The <video> HTML Element

Overview

The <video> element serves as a container for embedding a media player that can play video content, with or without accompanying audio, directly within a webpage.

Note: While <video> can technically play audio files, using the <audio> element is recommended for a more suitable user experience when dealing with audio-only content.

Examples and Usage

Embedding a media player for video content within a webpage becomes straightforward with the <video> element. Below, you'll find two examples that demonstrate some of the flexibility and customization options available.

Basic Video Embedding with Single Source and Poster

<!-- "The End" short by Blue Sky Studios -->
<!-- Poster used from archive.org -->
<video 
    controls 
    src="https://ia802502.us.archive.org/35/items/the-end-blue-sky-studios/The%20End%281080P_60FPS%29.mp4" 
    poster="https://archive.org/download/the-end-blue-sky-studios/the-end-blue-sky-studios.thumbs/The%20End%281080P_60FPS%29_000017.jpg" 
    width="640">
    Oops! Your browser doesn't support embedded videos. However, you can
    <a href="https://archive.org/details/the-end-blue-sky-studios">download </a>
    and watch the short on a video player of your choice.
</video>

In this setup, a single video source is provided using the src attribute. The poster attribute sets an image to be displayed before the video starts playing. The controls attribute adds the default video controls like play, pause, and volume. If the browser doesn't support the video, a fallback text with a download link is displayed.

Multiple Video Sources for Better Compatibility

<video controls>
    <source src="sample-video.webm" type="video/webm">
    <source src="sample-video.mp4" type="video/mp4">
    <p>Your browser doesn't support the given video file.</p>
</video>

The example above illustrates the use of multiple <source> elements to provide different video formats. This approach ensures that the video will play in browsers that support either the WebM or MP4 format. If none of the formats are supported, the browser will display the fallback text.

While the <video> tag is versatile, it has some considerations to be aware of.

Browsers differ in the video formats they support, making it advisable to provide multiple sources. Although the controls attribute adds a default player, custom controls can be built using JavaScript and the HTMLMediaElement API. Moreover, the <video> element can fire numerous events to control and monitor both the download and playback of the media. These events offer more precise control over your video content and allow for advanced features like real-time progress monitoring. If captions or subtitles are needed, the <track> element along with the WebVTT format can be employed.

Attribute Breakdown

The <video> element comes with a set of attributes in addition to the global HTML attributes, enabling you to fine-tune its behavior.

Attribute	Description
`src`	Defines the URL of the video file. You can also use the `<source>` element for multiple formats.
`crossorigin`	Configures CORS settings for the video. Options include `anonymous` and `use-credentials`.
`poster`	Sets the URL of an image to display before video playback starts.
`preload`	Hints at how much of the video should be buffered when the page loads. Values include `none`, `metadata`, and `auto`.
`autoplay`	If present, the video will start playing as soon as possible. Use cautiously due to user experience concerns.
`playsinline`	Suggests that the video should be played within the element's playback area rather than fullscreen.
`loop`	If present, the video will start over automatically after reaching the end.
`muted`	Mutes the audio by default if present.
`controls`	Adds browser-native playback controls.
`width`	Sets the display width of the video in CSS pixels.
`height`	Sets the display height of the video in CSS pixels.

The autoplay attribute should be used cautiously. While it makes the video play automatically, it can disrupt the user experience. Some browsers require the video to be muted (muted attribute) for autoplay to function.
Experimental Attributes: Some attributes like controlslist (non-standard), disablepictureinpicture, and disableremoteplayback are considered experimental. Their behavior might change, and they may not be supported across all browsers.

Accessibility Aspects

To enhance accessibility, it's crucial to offer captions and transcripts that accurately describe the video's content. While captions are beneficial for people with hearing impairments, transcripts offer those who need additional time a readable alternative. Beyond spoken dialogue, subtitles should also capture essential sounds and music for a comprehensive understanding of the video.

The <video> element doesn't have an implicit ARIA role but permits the use of the application role. More detailed information on this can be found here.

Associated Elements

<audio>
<video>
<source>
<track>

Additional Notes

By default, the <video> element behaves like an inline element, but it's commonly set to block for easier styling and positioning.
The object-fit and object-position CSS properties can be used to control the video's sizing and positioning within its frame.
Using the <source> element provides considerable benefits, especially in mobile contexts. Allowing browsers to prioritize among multiple media formats can reduce load times. Furthermore, specifying the media format through the type attribute allows browsers to quickly choose a suitable format, thereby improving performance. This is because browsers won't have to sample or preliminarily download any media content to make that decision.