Open In App
Related Articles

HTML5 Video

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The <video> element is used to embed video content on the web page. It allows the addition of video files in many formats such as MP4, WebM, etc. This element supports attributes like controls, autoplay, and loop to control video playback. It also enables the addition of captions and subtitles for accessibility.

Syntax:

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

Three different formats 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

Attributes

Attributes

Description

Autoplay

It tells the browser to immediately start downloading the video and play it as soon as it can.

Preload

It intends to provide a hint to the browser about what the author thinks will lead to the best user experience.

Loop

It tells the browser to automatically loop the video.

height

It sets the height of the video in CSS pixels.

width

It shows the default video controls like play, pause, volume, etc.

Controls

It shows the default video controls like play, pause, volume, etc.

Muted

It mutes the audio from the video.

Poster

It loads an image to preview before the loading of the video.

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="https://media.geeksforgeeks.org/wp-content
/uploads/20190616234019/Canvas.move_.mp4"
                type="video/mp4">
        <source src="https://media.geeksforgeeks.org/wp-content
/uploads/20190616234019/Canvas.move_.ogg"
                type="video/ogg">
      </video>
  </center>
</body>
 
</html>

                    

Output:

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
  • Edge 12 and above
  • Firefox 3.5 and above
  • Opera 10 and above
  • Safari 3.1 and above


Last Updated : 22 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads