Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to add Multimedia Components in a web page using HTML5

In this article we will see how to make use of multimedia elements in a web page so as to grab the attention of the viewers on your website.

Nowadays, the use of multimedia elements, such as audio and video, is common on the websites. Adding multimedia elements help you embed sound in the website and improve visual effect of the website, which, in turn, grabs the attention of the viewers. You can add multimedia elements in a Web page by using the following tags: <AUDIO> and <VIDEO>.

The <AUDIO> tag is used to include an audio file in a Web page. It provides various attributes to help you play an audio. The attributes of the tag are described in the following table.

Attribute Value Description
Autoplay Autoplay Specifies that the audio starts playing as soon as it is ready to play.
Controls Controls Specifies that the controls, such as play, pause, and stop, should be displayed.
Src url Specifies the URL of an audio file. It can be absolute URL or relative URL.
Loop Loop Specifies that the audio will start playing again, every time it has finished playing.

Listing 1: Consider the following code snippet for defining the tag:

<AUDIO controls="controls" src="Audio1.mp3">
 Your browser support this audio format. 
</AUDIO>

In the preceding code snippet, the tag is used to display the audio file, Audio1.mp3, on the Web page. The content inside the <AUDIO> and </AUDIO> tags is displayed when the browser does not support the audio format.

<VIDEO>

The <VIDEO> tag is used to display a video file on a Web page. It provides various attributes to help you play a video. The attributes of the <VIDEO> tag are described in the following table.

Attribute Value Description
Autoplay Autoplay Specifies that the video starts playing as soon as it is ready to play.
Controls Controls Specifies that the controls, such as play, pause, and stop, should be displayed.
Src url Specifies the URL or location of a video file.
Loop Loop Specifies that the video will start playing again, every time it is finished playing.
Height Pixels Specifies the height of a video player in pixels.
Width Pixels Specifies the width of a video player in pixels.
Muted Muted Specifies that the audio of the video file should be muted.
Poster URL Specifies an image to be displayed while the video is downloading.

Listing 2: Consider the following code snippet for defining the tag:

<VIDEO width="320" height="240" controls="controls" autoplay="autoplay" src="D:\HTML \Video1.mp4"> Your browser support this audio format. </VIDEO> 

In the preceding code snippet, the <VIDEO> tag is used to display the video file, Video1.mp4, on the Web page. The content inside the <VIDEO> and </VIDEO> tags is displayed when the browser does not support the video format.

Measuring Data and Displaying a Progress Bar

Consider a scenario where you need to enable a user to download files, such as images, from a website. In addition, you want that while saving the file, the user is able to view the disk space that is left. Moreover, you require that while saving the file, the user is able to know the level of the task that has been completed. In other words, the progress of the task should be displayed to the user. These tasks can be done by using the following tags:

<METER> 
<PROGRESS>
 	<METER> 

The <METER> tag specifies a scalar measurement within a known range. It is also known as gauge. It can be used to display disk usage. It provides various attributes to help you measure data. The attributes of the <METER> tag are described in the following table.

<METER> tag are described in the following table.

Attribute Value Description
High Number Specifies the range considered to be the highest range.
Low Number Specifies the range considered to be the lowest range.
Max Number Specifies the maximum value of the range.
Min Number Specifies the minimum value of the range.
Value Number Specifies the current value.
Form form_id Specifies the ID of the form to which the tag belongs.

Consider the following code snippet for defining the <METER> tag:

 <p>Display a meter:</p> <METER value="4" min="0" max="10"></ METER>

The preceding code snippet displays a meter specifying that 4 out of 10 tasks have been done as the current value has been specified as 4 and the maximum value as 10. The output of the preceding code snippet is displayed, as shown in the following figure.

 A Meter Being Displayed

Figure 1: A Meter Being Displayed

<PROGRESS>

The <PROGRESS> tag is used to display the progress of a task. It provides the following attributes to display the progress bar:

  • max: Specifies the amount of work a task requires.
  • value: Specifies the amount of task that has been completed.

Listing 3: Consider the following code snippet for defining the <PROGRESS> tag:

Progress of a task:
 <PROGRESS value="12" max="100"> </PROGRESS> 

The preceding code snippet displays a progress bar specifying that 12% of the task has been done, as shown in the following figure.

The Progress Bar Being Displayed

Figure 2: The Progress Bar Being Displayed

Let’s have a look at the demo:

To implement the above logic, you require :

  • One HTML page
  • One CSS file
  • Few images
  • And one Video

Listing 4: Code For the CSS file :

 H3 {
            color: darkgreen;
            font-family: algerian;
            position: absolute;
            right: 130px;
            top: 320px;
        }
        Aside P {
            text-align: center;
            background-color: darkgreen;
            color: white;
            font-size: 15px;
        }

        body {

            background-color: #D51165;
            background-image: url('background.gif');
            background-repeat: repeat-x;
        }

        details {
            color: darkgreen;
            font-family: algerian;
            font-size: 15px;
        }
        H1 {
            font-family: algerian;
            color: darkgreen;
            font-size: 20px;
            position: absolute;
            top: 0px;
            right: 50px;
        }
        Article P {
            color: black;
            font-size: 15px;
            font-family: arial;
            width: 550px;
        }

       H5 {
           font-family: arial;
           color: white;
           font-size: 16px;
           float:right;
        }
        H2 {
            color: darkgreen;
            font-family: algerian;
            position: relative;
            top: 0px;
            right: 0px;
            left: 500px;
        }
        details UL {
            color: #D51165;
            font-size: 15px;
       }
        H4 {
            color: darkgreen;
            font-family: algerian;
        }
        video {
            position: absolute;
            right: 50px;
            top: 380px;
        }
        #mainDivContainer H4 {
            color: darkgreen;
            font-size: 24px;
        }
       .auto-style1 {
            color: #FFFFFF;
           font-style: italic;
        }
        #callus {
            height: 80px;
            width: 50px;
            float:right;
        }

NAV a:hover{ 
color: pink; 
} 
NAV A{
display: inline;
text-decoration: none;
color:white;
}

Listing 5: Code for the HTML file

<html>

<head>

    <title>Home Page of ShowOnWheels</title>
    <link type="text/css" rel="stylesheet" href="ExternalStylesheet/homestylesheet.css" />

</head>

<body>

    <div id="mainDivContainer" style="position: relative; width: 100%; margin-top: 0px; margin-bottom: 0px;">

        <div style="width: 960px;  margin-top: 5px; margin-left: auto; margin-right:auto">

                    <div style="width: 960px; height:80px;">

                   		 <img id="logo" src="images\Logo.png" width="500" height="100">

                   			
                    <h5>For Enquiry<br>

                        Call Us 9225648543

                    </h5>
		 <img id="callus" src="images\callus.png">
			</div>


                    <div style="width:500px; height:20px; float:left; text-align:center;">
                    <span class="auto-style1"><B>The Ultimate Way For Booking Movie Tickets</B></span>

		                </div>

                 
            <div id="topnav" style="float:left;width: 960px; height: 20px; word-spacing: 5px; font-size: 90%; padding-left:60px; padding-top: 6px; white-space: nowrap; text-align:left; background-color: black;">
                    <nav>
			
			 <a href="home.html">Home</a> |
                    

                  </nav>
   
           </div>

            <div style="width: 960px; height: auto; position: relative; margin:0px; padding: 29px; overflow: hidden; background-color: white;">

                <h4>Currently, showing...</h4>

                <img src="images\movieimage1_bee.png" width="185" height="200">

                <img src="images\movieimage2_alvin.jpg" width="185" height="200">

                <img src="images\movieimage3_amy.jpg" width="185" height="200">

                <img src="images\movieimage4_bolt.jpg" width="185" height="200">

                <img src="images\movieimage5_wolf.jpg" width="185" height="200">

                              <article>            

<p>ShowOnWheels is an emerging entertainment company in the field of booking online movie tickets in US. We pioneered cinema halls in US by establishing the first multiplex cinema in 2001 and the largest 9-screen multiplex cinema in 2007. With its head office in Los Angeles, ShowOnWheels is now serving the viewers of major US cities.</p>
           
                     <p> Waiting in queues to book tickets for your favorite movie is now a matter of past.  ShowOnWheels empowers you by offering a platform to book movie tickets anywhere, anytime. Whether shopping in a mall, enjoying a vacation at a Miami Beach, partying in a discotheque, attending a conference, or taking your pet for a walk, ShowOnWheels is there to reserve your hot seat in your favorite cinema.</p>


                </article><br><br><br><br>
                <details>
                   <summary><b>Currently, operating in:</b></summary>
                    <ul>
                      <li>
                        Los Angeles 
                       <li>
                       Chicago 
                      <li>Houston </li>
                    </ul>

                  <p>With an annual turnover of US $12 million, ShowOnWheels is expanding its wings. We are launching three new screens in South Africa, shortly. </p>
           
</details>
                <h1>
                   <br>
                    Hurry Up! Heavy Discounts on weekends....</h1>
                <aside>
                    <p>
                       <i><b>ShowOnWheels values its customers. We keep you updated with our new discounts and offers.
                        <br>
                            We appreciate your association!</b></i>
                    </p>
                </aside>
                <h3>Latest Hot Offers!!</h3>
	<!-- Writer : priyampaul@gmail.com-->
                <video width="380" height="268" controls autoplay="autoplay" loop>
<source src="video\latestOffers.webm" type="video/mp4" />
                    Your browser does not support this audio format.
                </video>
            </div>
         </div>
    </div>
</body>
</html>

Figure 3: Output of the Project

Conclusion

We learnt how adding multimedia components to a web page can give attention to the website and helps in attracting viewers.



I am a software developer from India with hands on experience on java, html for over 5 years.

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login