Create a media resources for media elements, defined inside video or audio elements in HTML5

HTML5 Web Development Front End Technology

HTML5 supports five media elements, which are helpful in creating media resources. The different media tags are <audio>, <source>, <video>, <track> and <embed>.

These tags are used to change the development, let us discuss about each element in detail with an example −

The <video> tag

If you want to play videos on your web page, then HTML <video> element can be used for it. HTML <video> element provides a standard way to embed videos in a web page. The simple code to embed a video is as follows −

<video controls="controls">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogg">
   Your browser does not support the HTML5 Video element.
</video>

Example

Following is the example, demonstrate the usage of <video> tag in HTML −

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         color: blue;
      }
   </style>
</head>
<body>
   <center>
      <h1>TutorialPoint</h1>
      <p>Using Video tag</p>
      <video width="300" height="250" controls preload>
         <source src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
      </video>
   </center>
</body>
</html>

The <audio> tag

Suppose, if we want to add songs, or sound files into our webpage, we have to use <audio> tag in HTML document.

Syntax

Following is the usage of <audio> tag in HTML

<audio>
   <source src=”demo.mp3”  type=”audio/mpeg”>
</audio>

Example

Following is the example program for <audio> tag −

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         color: blue;
      }
   </style>
</head>
<body>
   <center>
      <h1>TutorialPoint</h1>
      <p>Using Audio tag</p>
      <audio controls autoplay>>
         <source src="https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp3" type="audio/mpeg">
      </audio>
   </center>
</body>
</html>

The <source> tag

All media elements contain source element which is used to attach multimedia files.

Syntax

Following is the usage of <source> tag −

<source src=” “ type= “ “>
text….
</source>

Example

Following is the example for <source> tag −

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         color: blue;
      }

      p {
         color: red;
         font: 20px;
      }
   </style>
</head>
<body>
   <center>
      <h1>TutorialPoint</h1>
      <p>Usage of Source tag</p>
      <audio controls autoplay>>
         <source src="https://dl.espressif.com/dl/audio/ff-16b-2c-44100hz.mp3" type="audio/mpeg">
      </audio>
   </center>
</body>
</html>

The <embed> tag

For embedding plug-ins like flash animation we use <embed> tag in HTML

Syntax

Following is the usage of embed tag in HTML −

<embed   attribute>

Example

Following is the example of usage of embed element in HTML −

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         color: blue;
      }
      p {
         color: red;
         font: 20px;
      }
   </style>
</head>
<body>
   <center>
      <h1>TutorialPoint</h1>
      <p>Usage of Embed tag</p>
      <iframe src="https://giphy.com/embed/BfbUe877N4xsUhpcPc" width="250" height="150" frameBorder="0" class="giphy-embed" allowFullScreen></iframe>
   </center>
</body>
</html>

Multiple media resources

Now let us discuss about multiple media resources in HTML5. There is a possibility to set multiple media resources for media elements.

Syntax

Following is the usage of multiple media element in HTML −

<media_element>
   <source src="logo.jpg">
   <source src="sample.mp3"> 
   <source src="video.mp4">
</media_element>

Example

Following program demonstrates the usage of multiple media resources −

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         color: blue;
      }

      p {
         color: red;
         font: 20px;
      }
   </style>
   <title>Multiple Media Resources</title>
</head>
<body>
   <center>
      <h1>TutorialPoint</h1>
      <div>
         <h2>Multiple media resources in single HTML:</h2>
         <div>
            <audio controls>
               <source src="sample.mp3">
               <code>audio</code> element.
            </audio>
         </div>
         <div>
            <video width="300" height="250" controls preload>
               <source src="https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
            </video>
         </div>
      </div>
   </center>
</body>
</html>

Bhanu Priya

Updated on: 10-Oct-2023

247 Views

Kickstart Your Career

Get certified by completing the course

Get Started