Class – 27 | HTML5 Media Elements | HTML Tutorial

HTML5 introduced several new media elements for 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 You can also set the type of audio file using the attribute type. 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 set 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 select multiple… <source> Elements will provide multiple sources for the same multimedia content if the first source is incompatible with the user’s browser.
5. <embed>: The <embed> element embeds third-party content on a web page, such as Flash animations or PDF documents. 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. Using these elements, you can easily add multimedia content to your web pages, making them more engaging and interactive.

Next Class