HTML - <video> Tag

In an HTML document, video can be included using the <video> tag. For proper rendering, you should offer a variety of video formats since not all browsers support the same ones. Within the <source> tag, or src attribute the path of the video file is nested. If the browser does not support the video format, you can alternatively supply an alternative text in the <video> tag, which will be shown instead.

The three video formats that are supported by the <video> element are MP4/MPEG 4, WebM, and Ogg. special programs, or codecs, are employed for the compression and decompression of big video files. The CSS object-position property can be used to move the video's location within the element's frame. Use the object-fit property to modify the video's size so that it will fit in the frame.

Syntax

Following is the syntax for HTML <video> tag −

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

Specific Attributes

The HTML <video> tag also supports the following additional attributes −

S.No.	Attribute & Description
1	autoplay Specifies that the video will play automatically.
2	controls Specifies that the video controls gets displayed.
3	height Specifies the height
4	loop Specifies that the video will start again every time after finish.
5	muted Specifies that the audio should be muted
6	poster Specifies the image to be shown while the video is downloading.
7	preload Specifies what author thinks will lead to user experience at its best.
8	src Specifies the URL
9	width Specifies the width

Example

Let’s look at the following example, where we are going to use the preload attribute value set to "auto," which loads the entire video when the page loads.

<!DOCTYPE html>
<html>
<body>
   <center>
      <video width="400" height="200" controls preload="auto">
      <source src="https://cdn.pixabay.com/vimeo/165221419/ipad-2988.mp4?width=640&hash=4816e81143efa7f31f1e8c86c5605f43fdfac941" type="video/mp4">
      </video>
   </center>
</body>
</html>

On running the above code, the output window will pop up, displaying the video uploaded to the webpage, and it was used with the preload attribute mentioned with a value of "auto" to make the video load on the page.

Example

Following is an example where we are going to use the controls attribute, which is used to add controls like play, pause, volume, etc.

<!DOCTYPE html>
<html>
<body>
   <center>
      <video width="420" height="250" controls>
      <source src="https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" type="video/mp4">
      </video>
   </center>
</body>
</html>

When we execute the above code, it will generate an output consisting of a video uploaded to the webpage with controls like play, pause, volume, etc.

Example

In the following example, we are going to use the autoplay attribute to make the video start automatically.

<!DOCTYPE html>
<html>
<body style="background-color:#ABEBC6">
   <center>
      <video width="420" height="250" autoplay>
      <source src="https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" type="video/mp4">
      </video>
   </center>
</body>
</html>

On running the above code, the output window will pop up, displaying the video uploaded on the webpage mentioned with an autoplay, which makes the video start automatically on the load of the page, along with the applied CSS.

Example

Considering the following example, where we are running the script and adding events like play/pause, big screen, and small screen.

<!DOCTYPE html>
<html>
<body style="background-color:#EAFAF1">
   <div style="text-align:center">
      <button onclick="Pauseplay()">PLAY/PAUSE</button>
      <button onclick="BScreen()">BIG SCREEN</button>
      <button onclick="SScreen()">SMALL SCREEN</button>
      <br>
      <video id="tutorial" width="400">
      <source src="https://cdn.pixabay.com/vimeo/497754241/laptop-61037.mp4?width=640&hash=d25d7f4b8afa862b3252bdaeaf157934ceb1bb72" type="video/mp4">
      </video>
   </div>
   <script>
      var testvideo = document.getElementById("tutorial");
      function Pauseplay() {
         if (testvideo.paused) testvideo.play();
         else testvideo.pause();
      }
      function BScreen() {
         testvideo.width = 500;
      }
      function SScreen() {
         testvideo.width = 200;
      }
   </script>
</body>
</html>

When we execute the above code, it will generate an output consisting of the video uploaded along with three buttons named "playpause," "bigscreen, and "smallscreen created as events. When the user clicks the button, the event gets triggered and displays according to it.

html_tags_reference.htm