Previous
Written by: rJTutorial Team | Last Updated:

HTML Video & Audio

In the early days of the web, playing a simple video or audio clip required third-party plugins like Adobe Flash. Today, HTML5 provides native, built-in support for multimedia via the <video> and <audio> elements. These tags are not only faster and more secure but also work across mobile devices and desktops without any extra downloads.

Developer Tip: Native HTML multimedia elements are more SEO-friendly and accessible than old plugin-based methods because search engines and screen readers can easily identify the content.

HTML <video> Element

The <video> tag is the standard way to embed video content directly into your webpage. It acts as a container, and you can specify various options to control how the user interacts with the player.

Syntax

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

The text "Your browser does not support the video tag" is a fallback. It will only be visible to users running very outdated browsers that don't recognize the <video> element.

Common Mistake: Forgetting to include the controls attribute. Without it, the video will appear as a static image, and users won't be able to hit play, pause, or adjust the volume.

Attributes

  1. controls: Adds the default browser UI (Play/Pause, Volume, Fullscreen).
  2. autoplay: The video starts as soon as it's ready. Note that most browsers will block autoplay unless the video is also muted.
  3. loop: Automatically restarts the video once it finishes—great for background "hero" videos.
  4. muted: Disables the audio by default. This is often required for autoplay functionality.
  5. poster: Defines an image to show while the video is downloading or until the user hits the play button.
Best Practice: Always use a poster image. It improves the user experience by showing a relevant thumbnail instead of a black box or a blank space while the video file loads.

Example with Multiple Sources

Not every browser supports every video format. To ensure your video plays for everyone, it is common to provide multiple file formats within the same video tag. The browser will look through the list and play the first format it supports.

<video width="640" height="360" controls poster="thumbnail.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
Watch Out: Order matters! List your most efficient or preferred format (like WebM) first. If the browser supports it, it will stop there; otherwise, it will move to the next <source>.

 

HTML <audio> Element

The <audio> tag works almost exactly like the video tag, but it’s designed for sound files like podcasts, music, or sound effects.

Syntax

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

Attributes

  1. controls: Essential for audio so users can pause or scrub through the track.
  2. autoplay: Starts the sound immediately. Use this sparingly, as it can be annoying for users.
  3. loop: Useful for ambient background music or sound effects.
  4. muted: Starts the audio in a muted state.
Watch Out: Audio files (especially WAV or high-bitrate MP3s) can be very large. This can slow down page load times and consume mobile data. Always compress your audio files for the web.

Example with Multiple Sources

Similar to video, offering MP3 and OGG formats ensures maximum compatibility across different browsers like Chrome, Firefox, and Safari.

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

 

Advanced Features

Adding Subtitles (for Video)

Accessibility is a key part of web development. You can add subtitles or captions using the <track> element. This requires a .vtt (WebVTT) file which contains the timestamps and text.

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English" default>
  Your browser does not support the video tag.
</video>
Best Practice: Use kind="captions" for viewers who are deaf or hard of hearing (includes sound effects like [Music] or [Laughter]) and kind="subtitles" for translations of spoken dialogue.

 

Customizing Playback with JavaScript

While the default browser controls are fine, you might want to build a custom player UI. The HTMLMediaElement API gives you full control over playback via JavaScript.

Example: Play and Pause Video

In this example, we use standard HTML buttons to trigger methods on the video element. This allows you to style your own buttons to match your website's branding.

<video id="myVideo" width="640" height="360">
  <source src="video.mp4" type="video/mp4">
</video>

<div class="controls">
  <button onclick="playVideo()">Play</button>
  <button onclick="pauseVideo()">Pause</button>
  <button onclick="stopVideo()">Stop</button>
</div>

<script>
  const video = document.getElementById("myVideo");

  function playVideo() {
    video.play();
  }

  function pauseVideo() {
    video.pause();
  }

  function stopVideo() {
    video.pause();
    video.currentTime = 0; // Resets the video to the beginning
  }
</script>
Developer Tip: You can also listen for events like ended, timeupdate, or volumechange to create interactive experiences, like showing a "Next Video" button only when the current one finishes.

 

Summary

  • HTML <video>: The standard way to embed video with support for multiple sources, posters, and native controls.
  • HTML <audio>: Designed for sound files, providing a simple interface for playback without needing a visual frame.
  • Accessibility: Use the <track> tag to ensure your content is usable by everyone, including those with hearing impairments or those watching in loud environments.
  • Modern Playback: Remember that browsers often block autoplaying audio/video unless the muted attribute is present to protect the user experience.
  • Customization: JavaScript can be used to build entirely custom media interfaces by interacting with the element's properties and methods.
Previous