Using Video and Audio with HTML5

HTML5 offers powerful features to support multimedia content on web pages. With the <video> and <audio> tags, video and audio files can be played without the need for external plugins. In this article, we’ll explore the use of video and audio in HTML5 in detail.

Using Video in HTML5

In HTML5, you can add videos directly to a webpage using the <video> tag. Here's a basic example of a video player:

<video width='640' height='360' controls>
    <source src='video.mp4' type='video/mp4'>
    Your browser does not support the video tag.
</video>

Attributes of the Video Tag

• controls: Displays playback controls like play, pause, etc.
• autoplay: Automatically starts playing the video when the page loads.
• loop: Replays the video when it ends.
• muted: Plays the video with the sound muted by default.
• poster: Sets a preview image to be displayed before the video plays.

Embedding YouTube or Vimeo Videos

You can embed videos from external platforms using the <iframe> tag:

<iframe width='640' height='360' src='https://www.youtube.com/embed/example' frameborder='0' allowfullscreen></iframe>

Using Audio in HTML5

To add audio to web pages, the <audio> tag is used. Here's a basic example of an audio player:

<audio controls>
    <source src='audio.mp3' type='audio/mpeg'>
    Your browser does not support the audio tag.
</audio>

Attributes of the Audio Tag

• controls: Displays audio playback controls to the user.
• autoplay: Automatically starts playing the audio when the page loads.
• loop: Plays the audio in a continuous loop.
• muted: Mutes the audio by default.

The <video> and <audio> tags provided by HTML5 make it easy to integrate multimedia content into web pages. By using these tags with the right attributes, you can create a user-friendly multimedia experience.