Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

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, that are useful for creating media resources. The different media tags are

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

The

To play videos on your web page, you can use the HTML 

<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

The following example demonstrates the usage of the in HTML. This code creates a webpage with a blue heading "TutorialPoint," a paragraph "Using video tag," and an embedded video player that loads and plays a video from a specified URL.

<!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

The in HTML is used to specify audio content on a webpage. It allows us to play audio content on a webpage. It allows us to play audio files OGG, MP3, or WAV directly in the browser. This tag supports attributes such as pause, play, and volume. The

Syntax

Following is the usage of 

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

Example

This HTML code creates a webpage with a blue heading "TutorialPoint," a paragraph"Using Audio tag," and an embedded audio player that automatically plays an MP3 file with controls.

<!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 tag

The tag in HTML specifies multimedia files for elements like

Syntax

Following is the usage of tag ?

<source src=" " type= " ">
text?.
</source>

Example

The following example demonstrates the usage of the tag. This HTML code creates a webpage with a blue heading "TutorialPoint," a red paragraph "Usage of Source Tag," and an embedded audio player that automatically plays an MP3 file with controls.

<!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 tag

The tag in HTML is used to embed external content or media files(such as video, audio, or interactive elements) into a webpage, including plug-ins like Flash animation.

Syntax

Following is the usage of embed tags in HTML ?

<embed   attribute>

Example

This HTML code creates a webpage with a blue heading "TutorialPoint," a red paragraph "Usage of Embed tag," and an embedded GIF from Giphy displayed in an iframe with controls.

<!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 multiple media resources in HTML5. There is a possibility of setting numerous media resources for media elements.

Syntax

Following is the usage of multiple media elements in HTML ?

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

Example

This HTML code creates a webpage with a blue heading "TutorialPoint," a red paragraph, and sections for audio and video players, embedding an MP3 file and an MP4 video with controls.

<!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: 2025-02-10T11:35:49+05:30

724 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements