HTML Video

Quiz

The HTML <video> element embeds and shows a video on the webpage. You can embed any type of video content on the webpage by using the <video> element.

HTML <video> Element

The <video> element is used to enable video playback support within a web page. It works very similarly to the <img> element, as it also requires adding the path or URL of the video within the src attribute. The HTML supports only MP4, WebM, and Ogg video formats. The <video> element also supports audio; however, the <audio> element is more suitable for that purpose.

Embedding Videos in HTML

To embed a video inside a web page, you need to set the src attribute inside the <video> tag that specifies the path or URL for the video. A web page serves content to a wide variety of users with various types of browsers. Each browser supports different video formats (MP4, WebM, and Ogg) as mentioned earlier. Therefore, we can supply all the formats that HTML supports by including multiple <source> tags. Let the browser decide which format is more suitable for video playback.

Syntax

Below is the syntax to embed a video on the webpage:

<video width="640" height="360" controls>
  <source src="video-file.mp4" type="video/mp4">
  <source src="video-file.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

The controls Attribute

You can also enable the built-in controls for controlling audio and video playback for the users (if needed) with the help of the controls attribute. It provides an interface that enables users to manage video playback functions such as volume adjustment, video navigation (forward and backward), and play or pause operations.

Example to Embed a Video

The following example shows how to insert the path or URL of a video inside the video element:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>
<body>
   <p>Playing video using video element</p>
   <p>The browser is responsible for determining the appropriate format to use.</p>
   <video width="450" height="250" controls>
      <source src="/html/media/video/sampleTP.webm" type="video/webm">
      <source src="/html/media/video/sampleTP.mp4" type="video/mp4">
      <source src="/html/media/video/sampleTP.ogv" type="video/ogg">
      <p>Sorry, video element is not supported!</p>
   </video>
</body>
</html>

Customizing Video Display Size

To set (adjust) the dimensions of the video display area, also known as the viewport, you can use the height and width attributes of the <video> element. These attributes define the height and width of the video viewport in pixels.

Note that the video will adjust its aspect ratio (e.g., 4:3 and 16:9) to align with the specified height and width. Therefore, it is advisable to match the dimensions of the viewport for a better user experience.

Example

Let's look at an example code below to understand better:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>
<body>
   <p>Playing video using video element</p>
   <video width="450" height="250" controls>
      <source src="/html/media/video/sampleTP.mp4" type="video/mp4">
   </video>
</body>
</html>

HTML Video autoplay and loop Attributes

You can configure the video to play automatically in a loop by using the autoplay and loop attributes.

Remember, a few browsers like Chrome 70.0 do not support the autoplay feature unless the muted attribute is used. Therefore, it is recommended to use autoplay and muted attributes together.

Example

The following example illustrates the autoplay and looping of video:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>
<body>
   <p>Playing video using video element</p>
   <video width="450" height="250" autoplay muted loop>
      <source src="/html/media/video/sampleTP.mp4" type="video/mp4">
   </video>
</body>
</html>

Setting a Video Thumbnail

You can pass a URL of an image that works as a thumbnail for the video within the poster attribute of the <video> element. It will display the specified image until the video starts playing.

Example

In the following example, we are illustrating the use of poster attribute:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>
<body>
   <p>Playing video using video element</p>
   <video width="450" height="250" controls muted poster ="tutorials_point.jpg" >
      <source src="/html/media/video/sampleTP.mp4" type="video/mp4">
   </video>
</body>
</html>

Browser Support for Various Video Formats

The table below illustrates the various video formats that are supported by different browsers:

Browser	OGG	WebM	MP4
Chrome	Yes	Yes	Yes
Edge	Yes	Yes	Yes
Safari	No	Yes	Yes
Firefox	Yes	Yes	Yes
Opera	Yes	Yes	Yes

Print Page