HTML Video

Understanding HTML Video

The HTML <video> element embeds video directly into a webpage without requiring a separate browser plugin.

Video can be supplied with the src attribute or one or more <source> elements, while attributes such as controls, width, height, poster, autoplay, muted, loop, and preload control its presentation and playback behavior.

The <video> Element

The <video> element represents video content such as demonstrations, tutorials, presentations, animations, or other video recordings.

<video src="/audio-video/movie.mp4" controls></video>

The src attribute identifies the video file, while controls tells the browser to display its built-in playback controls.

Video Controls

The boolean controls attribute displays the browser's built-in controls so users can operate the video themselves.

<video src="/audio-video/movie.mp4" controls></video>

The exact controls vary by browser but commonly include play and pause, playback position, volume, and fullscreen controls.

Video Sources

Like the audio element, the <video> element can contain one or more <source> elements instead of using its src attribute.

<video controls>
  <source src="/audio-video/movie.mp4" type="video/mp4">
  Your browser does not support the HTML video element.
</video>

The browser examines the available sources in order and can use the first one it supports. The type attribute identifies the media type and can help the browser determine whether it can play the source.

Video Width and Height

The width and height attributes specify the dimensions of the video's display area in CSS pixels.

<video width="640" height="360" controls>
  <source src="/audio-video/movie.mp4" type="video/mp4">
</video>

Providing dimensions can reserve space for the video while the page loads and help reduce layout movement. The video's aspect ratio should be preserved when its displayed size is changed.

Video Poster Image

The poster attribute specifies an image that can be displayed before the video begins playing.

<video controls poster="/audio-video/poster.jpg">
  <source src="/audio-video/movie.mp4" type="video/mp4">
</video>

A poster image can give users a useful visual preview instead of displaying an empty or automatically selected video frame before playback begins.

Autoplay and Muted Video

The boolean autoplay attribute requests that the video begin playing automatically when it is ready.

<video controls autoplay muted>
  <source src="/audio-video/movie.mp4" type="video/mp4">
</video>

Modern browsers commonly restrict autoplay when media contains audible sound. Muted video is more likely to be allowed to autoplay, although browser policies and user preferences can still affect the behavior.

Unexpected playback can be distracting, so user-initiated playback is generally preferable unless automatic playback serves a clear purpose.

Looping Video

The boolean loop attribute causes a video to begin again automatically when playback reaches the end.

<video controls loop>
  <source src="/audio-video/movie.mp4" type="video/mp4">
</video>

Looping can be useful for short demonstrations or repeating animations, but users should still have a way to pause or stop continuous media.

Preloading Video

The preload attribute provides a hint about how much video data the browser should load before playback begins.

<video controls preload="metadata">
  <source src="/audio-video/movie.mp4" type="video/mp4">
</video>

The commonly used values are none, metadata, and auto.

• none suggests that the browser should not preload the video.
• metadata suggests loading information such as the video's duration and dimensions.
• auto suggests that the browser may preload the video file.

The browser is not required to follow the hint and may make a different loading decision based on network conditions, browser settings, or user preferences.

Fallback Content

Content placed between the opening and closing <video> tags can provide a fallback for browsers that cannot use the video element.

<video controls>
  <source src="/audio-video/movie.mp4" type="video/mp4">
  Your browser does not support the HTML video element.
</video>

A direct link to the video file can also be included as fallback content when appropriate.

Video Accessibility

Video content should provide appropriate alternatives for users who cannot see or hear all of the information presented in the recording.

Captions provide text for spoken dialogue and meaningful sounds, while audio descriptions can communicate important visual information that is not conveyed by the existing audio. A transcript may also provide the video's important audio and visual information in text form.

HTML uses the <track> element to associate timed text such as captions with video. We will cover tracks and captions separately in this section.

HTML Video Example

The following example uses your MP4 video with the browser's built-in playback controls. Try changing attributes such as loop, muted, and preload in the editor and observe how the video behaves.

HTML Video Best Practices

• Provide playback controls when users need to control the video.
• Avoid automatically playing video with sound unless there is a strong reason for doing so.
• Preserve the video's aspect ratio when changing its displayed dimensions.
• Use a poster image when a useful preview should appear before playback.
• Consider file size and loading behavior when choosing a preload value.
• Provide captions for meaningful spoken content and important sounds.
• Provide appropriate alternatives for important visual information that is not communicated through the audio.

Summary

The HTML <video> element embeds video directly into a webpage. Video files can be supplied with src or nested <source> elements, while attributes such as controls, width, height, poster, autoplay, muted, loop, and preload control presentation and playback behavior.

Effective video content should give users appropriate playback control, consider loading performance, preserve the video's proportions, and provide accessible alternatives for meaningful audio and visual information.