HTML - <video> Tag

Quiz

Introduction to <video> Tag

The HTML <video> tag is used to embed a video media player into a website. To ensure proper rendering, you should offer various video formats, as not all browsers support the same ones. The path of the video file is specifies within the <source> tag or the src attribute. If the browser does not support the video format, you can provide alternative text within the video tag, which will be displayed instead.

The three video formats supported by the <video> element are MP4/MPEG 4, WebM, and Ogg. Special programs, or codecs, are used for compressing and decompressing large video files. The CSS object-position property can be used to adjust the video's location within the element's frame. Use the object-fit property to modify the video's size to fit the frame.

Syntax

Following is the syntax of <video> tag−

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

Attributes

The HTML video tag supports Global and Event attributes. It also accepts some specific attributes, which are listed bellow.

Attribute	Value	Description
autoplay	autoplay	Specifies that the video will play automatically.
controls	controls	Specifies that the video controls are displayed.
height	pixels	Specifies the height of the video player.
loop	loop	Specifies that the video will restart automatically after it finishes.
muted	muted	Specifies that the audio will be muted.
poster	URL	Specifies the image displayed while the video is downloading.
preload	auto metadata none	Specifies what the author believes will provide the best user experience.
src	URL	Specifies the URL of the video's file's path.
width	pixels	Specifies the width of the video player.

Example: Creating Video Player

Lets look at the following example, where we use the preload attribute set to "auto," which loads the entire video when the page loads. This HTML code creates a webpage with a centered video player, specifying its dimensions and controls, and preloading the video.

<!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>

Example: Control Elements

In the following example, we use the controls attribute to add features like play, pause and volume. This HTML code creates a webpage with a centered video player, specifying its dimensions and embedding a video.

<!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>

Example: Autoplay Video

In the following example, we use the autoplay attribute to make the video start automatically. This HTML code creates a webpage with a centered video player, specifying its dimension and autoplaying the embedded video.

<!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>

Example: Video Player With Play & Pause Button

Considering the following example, where we run the script and add events like play, pause, full screen, and minimize.

<!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

Print Page