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


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>

Updated on: 10-Oct-2023

227 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements