HTML Video and Audio Tags: Complete Guide with Examples

by

Understanding and Tags in HTML

HTML provides powerful multimedia capabilities with the <video> and <audio> tags, allowing developers to easily embed videos and audio files into web pages. These tags make it simple for users to interact with media content without needing third-party plugins.

The <video> Tag in HTML

The <video> tag allows you to embed video content into a webpage. It supports multiple file formats and provides several useful attributes for customization.

Attributes of <video>:

  • controls – Adds play, pause, volume, and other controls.
  • autoplay – Automatically starts playing when the page loads.
  • loop – Repeats the video after it ends.
  • muted – Starts the video with the sound muted.
  • poster – Defines an image to show before the video plays.
  • width & height – Sets the dimensions of the video player.

Try to Run these Code Snippets in VS Code

Example 1: Basic Video Tag Usage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Video Example</title>
</head>
<body>
    <h2>Basic Video Example</h2>
    <video width="600" height="300" controls>
        <source src="video.mp4" type="video/mp4">
        <source src="video.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>
</body>
</html>

Example 2: Video with Autoplay, Muted, and Poster

<video width="600" height="300" controls autoplay muted poster="thumbnail.jpg">
    <source src="example.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

Example 3: Looping a Video

<video width="500" height="280" controls loop>
    <source src="looping-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

The <audio> Tag in HTML

The <audio> tag is used to embed sound content, such as music or podcasts.

Attributes of <audio>:

  • controls – Displays play, pause, and volume controls.
  • autoplay – Starts playing automatically.
  • loop – Repeats the audio when it ends.
  • muted – Starts with the volume muted.

Example 1: Basic Audio Tag Usage

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Audio Example</title>
</head>
<body>
    <h2>Basic Audio Example</h2>
    <audio controls>
        <source src="audio.mp3" type="audio/mp3">
        <source src="audio.ogg" type="audio/ogg">
        Your browser does not support the audio tag.
    </audio>
</body>
</html>

Example 2: Autoplaying an Audio File

<audio controls autoplay>
    <source src="song.mp3" type="audio/mp3">
    Your browser does not support the audio tag.
</audio>

Example 3: Looping an Audio File

<audio controls loop>
    <source src="background-music.mp3" type="audio/mp3">
    Your browser does not support the audio tag.
</audio>

Supported File Formats

Format<video> Support<audio> Support
MP4✅ Yes❌ No
WebM✅ Yes❌ No
Ogg✅ Yes✅ Yes
MP3❌ No✅ Yes
WAV❌ No✅ Yes

Conclusion

Using the <video> and <audio> tags, you can enhance your web pages with rich multimedia experiences. These elements provide flexibility and ease of use, ensuring compatibility across different browsers.

Follow me on Instagram for daily web development tips! INSTAGRAM

View my Previous Post – Top 15 Patterns

Leave a Comment