HTML Video

HTML Video

The HTML <video> element is used to embed video content in web pages.

HTML Video Syntax

To embed a video, use the <video> element with the src attribute:

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

The controls attribute adds video controls, like play, pause, and volume.

HTML Video - Multiple Formats

Different browsers support different video formats. Use multiple <source> elements to ensure compatibility:

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

HTML Video Attributes

HTML Video - Autoplay

To start a video automatically, use the autoplay attribute:

<video autoplay>
  <source src="movie.mp4" type="video/mp4">
</video>

Note: Most browsers do not autoplay videos with sound. Add muted for autoplay to work:

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

HTML Video - Browser Support

The numbers in the table specify the first browser version that fully supports the <video> element:

HTML Video Formats

There are three supported video formats:

MP4 is the most widely supported format.

HTML Video - Poster Image

The poster attribute specifies an image to be shown while the video is downloading, or until the user hits the play button:

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

HTML Video - Size

Use the height and width attributes to set the size of the video player:

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

HTML Video - Preload

The preload attribute specifies if and how the video should be loaded when the page loads:

<video preload="auto" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

Values:

• auto - The browser should load the entire video
• metadata - Load only video metadata
• none - Do not load the video

HTML Video - Loop

The loop attribute specifies that the video will start over again, every time it is finished:

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

HTML Video - Muted

The muted attribute specifies that the audio output of the video should be muted:

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

HTML Video - Track and Text

The <track> element is used to specify subtitles, captions, and other text tracks:

<video controls>
  <source src="movie.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>

The kind attribute can be:

• subtitles - Subtitles for the video
• captions - Captions for the video
• descriptions - Descriptions for the video
• chapters - Chapter titles for the video

HTML Video - JavaScript

JavaScript can be used to control video playback:

<video id="myVideo" width="320" height="240">
  <source src="movie.mp4" type="video/mp4">
</video>

<button onclick="playPause()">Play/Pause</button>

<script>
function playPause() {
  var video = document.getElementById("myVideo");
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
}
</script>

HTML Video - Responsive

To make a video responsive, add CSS:

<style>
video {
  max-width: 100%;
  height: auto;
}
</style>

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

HTML Video - Chapter Summary

• The HTML <video> element is used to embed video in web pages
• Use the controls attribute to show video controls
• Use multiple <source> elements for browser compatibility
• MP4 is the most widely supported video format
• Use autoplay muted for automatic playback
• Use poster for a thumbnail image
• Use <track> for subtitles and captions