HTML5 introduced a new set of elements that make it easy to embed audio and video into web pages. The audio and video tags are part of this set of elements and allow you to add multimedia content to your web pages.

The <audio> tag

The <audio> tag is used to embed audio content in a web page. It has several attributes that you can use to control how the audio is played, including src, controls, autoplay, and loop.

Here's an example of how to use the <audio> tag:

<audio src="example.mp3" controls>
  Your browser does not support the <code>audio</code> element.
</audio>

In this example, we're using the src attribute to specify the location of the audio file. We're also including the controls attribute, which adds a set of controls to the audio player, such as play/pause, volume, and progress bar. The text between the opening and closing tags is used as a fallback for browsers that don't support the <audio> element. You can also include the autoplay attribute to automatically play the audio when the page loads:

<audio src="example.mp3" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>

And you can include the loop attribute to loop the audio playback:

<audio src="example.mp3" loop>
  Your browser does not support the <code>audio</code> element.
</audio>

The <video> tag

The <video> tag is used to embed video content in a web page. It has several attributes that you can use to control how the video is played, including src, controls, autoplay, loop, width, and height.

Here's an example of how to use the tag:

<video src="example.mp4" controls width="640" height="360">
  Your browser does not support the <code>video</code> element.
</video>

In this example, we're using the src attribute to specify the location of the video file. We're also including the controls attribute, which adds a set of controls to the video player, such as play/pause, volume, and progress bar. The width and height attributes set the dimensions of the video player. The text between the opening and closing <video> tags are used as a fallback for browsers that don't support the <video> element.

You can also include the autoplay attribute to automatically play the video when the page loads:

<video src="example.mp4" autoplay width="640" height="360">
  Your browser does not support the <code>video</code> element.
</video>

And you can include the loop attribute to loop the video playback:

<video src="example.mp4" loop width="640" height="360">
  Your browser does not support the <code>video</code> element.
</video>

Using different file types

Different browsers support different audio and video file types. To ensure that your media works across all browsers, you should provide multiple file types for each audio and video file. Here's an example of how to use the tag to provide multiple file types:

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

In this example, we're using the <source> tag to provide two different file types for the audio file: example.mp3 and example.ogg. The type attribute specifies the MIME type of the file.

You can do the same for the <video> tag:

<video controls width="640" height="360">
  <source src="example.mp4" type="video/mp4">
  <source src="example.webm" type="video/webm">
  Your browser does not support the <code>video</code> element.
</video>

In this example, we're providing two different file types for the video file: example.mp4 and example.webm. Again, the type attribute specifies the MIME type of the file.

Here is a simple HTML program that uses the and tags to embed an audio file and a video file:

Conclusion

The HTML5 and tags make it easy to embed multimedia content in web pages. By using the attributes available for these tags, you can control how your media is played and provide a better user experience for your visitors. And by providing multiple file types, you can ensure that your media works across all browsers.

I hope this blog post has been helpful in getting you started with using HTML audio and video tags. If you have any questions or feedback, please feel free to leave a comment below!