Skip to content
Related Articles

Related Articles

HTML5 Video

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Basic
  • Last Updated : 12 Jun, 2022

In this article, we will know HTML5 Video, along with knowing the different ways to add the videos to the HTML page & understanding its implementation through the examples. Before HTML 5 came into existence, videos could only be played in a browser using a plugin like flash. But after the release of HTML 5, adding a video to a webpage is as easy as adding an image. The HTML5 “video” element specifies a standard way to embed a video on a web page. 

There are three different formats that are commonly supported by web browsers – mp4, Ogg, and WebM. The table below lists the formats supported by different browsers:

Browser

MP4

WebM

OGG

Google ChromeYesYesYes
Internet ExplorerYesNoNo
FirefoxYesYesYes
OperaYesYesYes
SafariYesYesNo

Syntax:

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

Attributes that can be used with the “video” tag are listed below :

  1. Autoplay: It tells the browser to immediately start downloading the video and play it as soon as it can.
  2. Preload: It intends to provide a hint to the browser about what the author thinks will lead to the best user experience.
  3. Loop: It tells the browser to automatically loop the video.
  4. height: It sets the height of the video in CSS pixels.
  5. width: It sets the width of the video in CSS pixels.
  6. Controls: It shows the default video controls like play, pause, volume, etc.
  7. Muted: It mutes the audio from the video.
  8. Poster: It loads an image to preview before the loading of the video.
  9. src: It is used to specify the URL of the video file.

Example: This example illustrates the use of <video> tag where we have used preload attribute whose value is set to auto which specifies the browser should load the entire video when the page loads.

HTML




<!DOCTYPE html>
<html>
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <h3>HTML video tag</h3>
         
 
 
<p>Adding video on the webpage
             
 
 
<p>
                <video width="450"
                       height="250"
                       controls
                       preload="auto">
                    <source src=
                       type="video/mp4">
                    <source src=
                       type="video/ogg">
                </video>
    </center>
</body>
</html>

Output:

We will understand the various ways to implement the <video> tag, through the examples.

Adding Video using HTML5:

Example: This simple example illustrates the use of the <video> tag in HTML. Here, the controls attribute is used to add controls like play, pause, volume, etc, & the “source” element is used to specify the video that the browser will choose to play.

HTML




<!DOCTYPE html>
<html>
<body>
     
 
 
<p>Adding Video on my webpage </p>
 
 
 
 
    <video width="400"
           height="350"
           controls>
        <source src="myvid.mp4"
                type="video/mp4">
        <source src="myvid.ogg"
                type="video/ogg">
    </video>
</body>
</html>

Output:

Video addition to the HTML.

Autoplaying a Video using HTML5: In order to start a video automatically, we can use the autoplay attribute.

Example: This example illustrates the use of the autoplay attribute in the HTML <video> tag.

HTML




<!DOCTYPE html>
<html>
<body>
     
 
 
<p>Adding Video on my webpage</p>
 
 
 
 
    <video width="400"
           height="350"
           autoplay>
        <source src="myvid.mp4" type="video/mp4">
        <source src="myvid.ogg" type="video/ogg">
    </video>
</body>
</html>

Output:

Autoplay attribute

Please refer to the How to display video controls in HTML5? article for knowing the various available controls in detail.

HTML Video using JavaScript: Many properties and events can be set for a video like load, play and pause videos, as well as setting duration and volume.

Example: In this example, we have used Javascript in order to play, pause & set the volume & duration of the video in HTML.

HTML




<!DOCTYPE html>
<html>
<body>
    <div style="text-align:center">
        <button onclick="Pauseplay()">Pause/Play</button>
        <button onclick="Big()">Big</button>
        <button onclick="Small()">Small</button>
        <button onclick="Normal()">Normal</button>
        <br>
        <video id="myvideo" width="450">
            <source src="myvid.MP4"
                    type="video/mp4">
            <source src="myvid.ogg"
                    type="video/ogg">
        </video>
    </div>
    <script>
        var testvideo = document.getElementById("myvideo");
 
        function Pauseplay() {
            if(testvideo.paused) testvideo.play();
            else testvideo.pause();
        }
 
        function Big() {
            testvideo.width = 600;
        }
 
        function Small() {
            testvideo.width = 300;
        }
 
        function Normal() {
            testvideo.width = 450;
        }
    </script>
</body>
</html>

Output:

Setting the various video controls using the Javascript events & properties in HTML

Supported browsers: 

  • Google Chrome 3 and above
  • Internet Explorer 9 and above
  • Microsoft Edge 12 and above
  • Firefox 3.5 and above
  • Opera 10.5 and above
  • Safari 3.1 and above


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!