HTML - <video> Tag

HTML <video> tag is used to embed video media player into the website. 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.

Theere three video formats that are supported by the <video> element are MP4/MPEG 4, WebM, and Ogg.

Syntax

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

Attribute

HTML video tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.

Attribute	Value	Description
autoplay	autoplay	Specifies that the video will play automatically.
controls	controls	Specifies that the video controls gets displayed.
height	pixels	Specifies the height of the video media player.
loop	loop	Specifies that the video will start again every time after finish.
muted	muted	Specifies that the audio should be muted.
poster	URL	Specifies the image to be shown while the video is downloading.
preload	auto metadata none	Specifies what author thinks will lead to user experience at its best.
src	URL	Specifies the URL of the video's path.
width	pixels	Specifies the width of the video media player.

Examples of HTML video Tag

Bellow examples will illustrate the usage of video tag. Where, when and how to use it to render video player and how we can manupulate video player using CSS.

Creating Video player using Video Tag

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>

Video player with Control Elements

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>

Autoplay video after page load

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>

Video player with Play & Pause Button

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>

Supported Browsers

Tag
video	Yes 4.0	Yes 9.0	Yes 3.5	Yes 3.1	Yes 11.5

html_tags_reference.htm