HTML Video

HTML Video (<video>, <source>, <track>)

The <video> element in HTML allows you to embed video files directly into your webpage. It provides a simple and powerful way to add multimedia content without requiring external plugins like Flash. This article will cover how to use the <video> element along with <source> and <track> for a better user experience.

1. The `<video>` Element

The <video> element is used to display video content on a webpage. You can add attributes to control playback, such as controls, autoplay, loop, and muted.

Basic Example

<video width="600" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>

Explanation

The controls attribute adds play, pause, and volume controls.
The <source> elements allow the browser to choose the best-supported format.
The fallback text (“Your browser does not support the video tag.”) appears if the browser doesn’t support videos.

2. The `<source>` Element

The <source> element is used inside <video> to provide multiple video formats. Different browsers support different formats, so it’s a good practice to include multiple options.

Common Video Formats

Format	Browser Support
MP4 (H.264)	Chrome, Firefox, Edge, Safari, Opera
WebM	Chrome, Firefox, Edge, Opera
Ogg	Firefox, Opera

Example with Multiple Formats

<video width="600" controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

The browser will load the first format it supports.

3. The `<track>` Element

The <track> element provides subtitles, captions, and descriptions for videos. This improves accessibility and helps users who are deaf or watching in a different language.

Attributes of `<track>`

Attribute	Description
`kind`	Specifies the type of text track (`subtitles`, `captions`, `descriptions`, etc.)
`src`	The file containing the subtitles
`srclang`	Language of the subtitles
`label`	A title for the track

Example with Subtitles

<video width="600" controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles-en.vtt" kind="subtitles" srclang="en" label="English">
    <track src="subtitles-es.vtt" kind="subtitles" srclang="es" label="Spanish">
</video>

Example of a `.vtt` Subtitle File

WEBVTT

00:00:00.000 --> 00:00:05.000
Welcome to our video tutorial!

00:00:05.000 --> 00:00:10.000
In this video, you will learn about HTML video elements.

4. Additional Video Attributes

Attribute	Description
`controls`	Displays play, pause, and volume controls
`autoplay`	Starts the video automatically (muted by default)
`loop`	Repeats the video when it ends
`muted`	Mutes the video
`poster`	Specifies an image to display before the video plays

Example with More Attributes

<video width="600" controls autoplay loop muted poster="thumbnail.jpg">
    <source src="video.mp4" type="video/mp4">
</video>

##*5. Browser Compatibility Most modern browsers support the <video> element. However, not all browsers support every video format. Testing your video on multiple browsers ensures the best user experience.

Conclusion

The <video> element makes it easy to add videos to your website. Using <source> ensures compatibility across browsers, and <track> improves accessibility. By following best practices, you can provide a smooth and inclusive multimedia experience for your users.