What is the HTML5 video element?

The video element in HTML5 provides an embed video content into web pages without depend on  third-party plugins. HTML5 introduces native video playback. The <video> element treats video as a first-class citizen of web content.

Video Formats Supported by HTML5

HTML5 video supports several container formats and codecs. The video container formats relevant to HTML5 are MPEG-4, Ogg, and WebM. The video codecs relevant to HTML5 are H.264, Theora, and VP8.

• H.264: A high-quality codec standardized in 2003. It’s supported by Internet Explorer 9+, Safari, and Chrome. Videos in MP4 containers often use the H.264 codec.
• Theora: An open and patent-unencumbered codec. It’s supported by Firefox, Chrome, and Opera. The Ogg container format uses the Theora video codec.
• VP8: Another open and patent-unencumbered codec, used with the WebM container. It’s supported by Internet Explorer 9 (if codec installed), Firefox, Chrome, and Opera.

Browser makers decide which formats to support. To ensure the broadest browser support, it’s best practice to provide video in multiple formats.

What are the attributes of a video element?

The <video> element has several attributes to control its behaviour and appearance.

1. src: This attribute specifies the path or URL to the video file. A simple way to include HTML5 video is using the src attribute.

<video src=" https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.mp4"></video>

2. controls: When present, it tells the browser to display default video controls such as play/pause, volume, and seeking.

<video src=" https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.mp4" controls></video>

Native player controls look different in different browsers.

3. height & width: This attribute specifies the height an width of the video player in pixels.

<video src=" https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.mp4" controls width="320"  height="240"></video>

The browser will preserve the aspect ratio of the video when width and height are set.

5. poster: This attribute specifies the URL of an image to display while the video is downloading or until the user initiates playback. This is useful if there’s likely to be a delay in the video playing.

<video src=" https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.mp4" controls poster=" https://onlinetutorialhub.com/wp-content/uploads/2025/04/The-Ultimate-Introduction-To-NLP-1.jpg"></video>

6. autoplay: If present, the browser will start playing the video as soon as it has loaded enough data. It is generally recommended against using autoplay as users often find it disruptive. Mobile browsers might ignore the autoplay attribute.

<video src=" https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.mp4" controls autoplay></video>

7. loop: When included, it instructs the browser to repeat the video from the beginning once it has finished playing.

<video src=" https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.mp4" controls loop></video>

8. muted: If present, it sets the audio output of the video to be muted initially. Users can still unmute the video using the controls. The muted attribute replaces an older audio attribute with a muted value from previous HTML5 specifications.

<video src=" https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.mp4" controls muted></video>

Using the <source> Element for Multiple Video Formats:

To provide multiple video formats for better browser compatibility, you can use one or more <source> elements within the <video> tags. The browser will attempt to play the first format it supports. You should also provide a type attribute for each <source> element to indicate the MIME type of the video file. You must remove the src attribute from the main <video> element when using <source> elements.

<video controls width="360" height="240" poster="placeholder.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogv" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

The text between the <video> and </video> tags serves as fallback content for browsers that do not support the <video> element or none of the specified formats.

Hyperlink Fallbacks for Audio and Video:

For browsers that do not support the <audio> or <video> elements, you can provide hyperlink fallbacks within the respective elements. This allows users with older browsers to download the media file.

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogv" type="video/ogg">
  <p>Download the <a href="movie.mp4">movie</a> (MP4)</p>
</video>
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <p>Download the <a href="audio.mp3">audio file</a> (MP3)</p>
</audio>

You can also provide more sophisticated fallbacks, such as embedding Flash video players using the <object> or <embed> elements within the <video> tags. The “Video for Everybody” approach outlines this in detail.

How do I add subtitles to a video in HTML?

HTML5 introduces the <track> element to provide text tracks for media elements, such as subtitles, captions, and chapter titles. The <track> element is placed as a child of the <video> or <audio> element.

The <track> element has several attributes:

• kind: Specifies the type of text track. Common values include subtitles, captions, descriptions, chapters, and metadata.
• src: Specifies the URL of the text track file. The file format is typically WebVTT (.vtt).
• srclang: Specifies the language of the text track using a two-letter language code (e.g., “en” for English, “fr” for French).
• label: Provides a user-readable title for the track.
• default: A boolean attribute indicating that this track should be enabled by default if the user’s preferences do not indicate otherwise.

Here’s an example of adding subtitles to a video:

<video controls width="360" height="240" src="https://onlinetutorialhub.com/wp-content/uploads/2025/04/part-14.mp4">
  <track kind="subtitles" src="https://onlinetutorialhub.com/wp-content/uploads/2025/04/WEBVTT.vtt" srclang="en" label="English" default>
</video>

The WebVTT file is a plain text file with specific formatting to indicate when each text cue should be displayed. A basic WebVTT file structure looks like this: