HTML Video

The <video> element in HTML is used to embed video content on a webpage.

It supports a variety of video formats, such as:

  • MP4
  • WebM
  • Ogg

The element typically includes controls that allow the user to play, pause, and adjust the volume of the video, and it can also include text alternatives for users who are unable to view the video.

The element must have a closing tag and have source of the video to play.

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

It also can have additional attributes like width, height, autoplay, loop and poster which can further define its functionality.

Video Autoplay Attribute

The autoplay attribute can be used to automatically start playing a video as soon as it is loaded on a webpage. To use this attribute with the <video> element in HTML, simply include it as part of the opening <video> tag like this:

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

It is worth noting that using autoplay attribute is not best practice because it can be disruptive to users and negatively impact their experience. Also, in some modern browsers and devices autoplay feature is blocked.

You can consider having an option on page to start playing video or let the user initiate playing the video.

It is also important to keep in mind that the autoplay feature may be disabled by some web browsers on mobile devices in order to save bandwidth.

Video Muted Attribute

The muted attribute can be used to mute the audio of a video element in HTML. When the muted attribute is present, the video will play without any audio.

To use this attribute with the <video> element in HTML, simply include it as part of the opening <video> tag like this:

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

You can also use javascript or DOM to change the value of muted attribute to toggle the sound of video.

var myVideo = document.querySelector("video");
myVideo.muted = true; // To mute the video
myVideo.muted = false; // To unmute the video

It's also worth noting that, if the video have sound initially and if you want to have video play muted by default, you will also have to add muted attribute to the <source> element in order to make sure that the video is actually playing without sound

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

HTML Video Related Tags

In addition to the <video> and <source> tags, there are a few other HTML tags that are commonly used when working with video content.

These include:

<audio>:

This tag is used to embed audio content on a webpage. It functions in a similar way to the <video> tag, and supports a variety of audio formats, such as MP3 and Ogg.

<track>:

This tag is used to add captions, subtitles, or descriptions to a video or audio element.

The <track> tag must be used in conjunction with either a <video> or <audio> element, and it must have a src attribute that points to a file containing the captions or subtitles.

<figure> and <figcaption>:

These tags are used to add a caption or description to an image, video, or other type of media.

The <figure> tag is used to group the media element with its caption, and the <figcaption> tag is used to define the caption or description.

<picture>:

This tag is used to provide different images for different devices based on screen resolution and size. It contains multiple <source> elements and an image to use as a fallback.

<object>:

This tag can be used to embed multimedia resources such as video, audio and PDF files. But it's not recommended to use it as it is an older version of the <embed> tag and it has very limited support.

You can use these tags in combination with <video> or <audio> to have more rich experience for user interaction.

You also have an access to many properties, methods and events of video element to control and track the video state.

HTML Basics