Class – 27 | HTML5 Media Elements | HTML Tutorial

HTML5 introduced a number of new media elements, specifically designed to handle multimedia content such as audio, video, and images. Here are some of the most commonly used HTML5 media elements:

1. <audio>: The <audio> element is used to embed audio content on a web page. You can specify the source of the audio file using the src attribute, and you can also specify the type of the audio file using the type attribute. For example:

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

2. <video>: The <video> element is used to embed video content on a web page. Similar to the <audio> element, you can specify the source of the video file using the src attribute, and you can also specify the type of the video file using the type attribute. For example:

<video controls width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

3. <picture >: The <picture > element is used to embed responsive images on a web page. It allows you to specify different sources for the same image based on different screen sizes, screen resolutions, and screen orientations. For example:

<picture >
  <source srcset="image-large.jpg" media="(min-width: 800px)">
  <source srcset="image-medium.jpg" media="(min-width: 400px)">
  <img src="image-small.jpg" alt="A Responsive Image">
</picture >

4. <source>: The <source> element is used in conjunction with the <audio> and <video> elements to specify the source of the multimedia content. You can specify multiple <source> elements to provide multiple sources for the same multimedia content, in case the first source is not compatible with the user’s browser.
5. <embed>: The <embed> element is used to embed third-party content, such as Flash animations or PDF documents, on a web page. The source of the content is specified using the src attribute. For example:

<embed src="flash-animation.swf" width="400" height="300">

These are just some of the most commonly used HTML5 media elements. By using these elements, you can easily add multimedia content to your web pages and make them more engaging and interactive.

Next Class