Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

How to display video controls in HTML5 ?

  • Last Updated : 06 Apr, 2021

The HTML <video> controls attribute is used to display video controls in HTML5.  It is the Boolean value. HTML5 most commonly uses ogg, mp4, ogm and ogv as a video formats in the video tag because the browser support for them differs.

Syntax

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

<video controls>
  <source>
</video>

From above Syntax controls attribute adds video controls like volume, pause, and play and <source> element allows you to specify alternative video files. The video control should include:

  • Play
  • Pause
  • Volume
  • Full-screen Mode
  • Seeking
  • Captions/Subtitles(if available)
  • Track(if available)

Attributes: Video tag supports mainly 5 attributes as mentioned below:



  1. autoplay : Makes the video start playing automatically, without waiting for the entire video file to finish downloading.
  2. loop : Through loop you can play the video  again and again.
  3. muted : Makes the player muted by default.
  4. preload : This can be set to following value.
    • auto : This implies whether the video should be load as soon as the page loads.
    • metadata : This implies whether only the video metadata should be loaded.
    • none : This implies browser should not load the video when the page loads.
  5. src : This defines the URL of the video that should be played by the video tag.

Note: Always specify the width and height of the video else web page will be confused that how much space the video will be required due to the reason the web page becomes slow down.

Example 1: Using src attribute in below code.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
  
        <h3>HTML video controls Attribute</h3>
  
        <video width="400" height="200" controls> 
            <source src
                                type="video/mp4"
            <source src
                                type="video/ogg"
        </video>
    </center>
</body>
  
</html>

Output:

Example 2: Using autoplay attribute to play video automatically.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
  
        <h3>HTML video controls Attribute</h3>
  
        <video width="400" height="200" autoplay controls> 
            <source src
                                type="video/mp4"
            <source src
                                type="video/ogg"
        </video>
    </center>
</body>
  
</html>

Output:

Example 3: Poster attribute is used to display the image while video downloading or when user click the play button.

HTML




<!DOCTYPE html>
<html>
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
  
        <h3>HTML video poster Attribute</h3>
  
        <video width="400" height="200" controls poster=
            <source src
                                                            type="video/mp4"
            <source src
                                                            type="video/ogg"
        </video>
    </center>
</body>
  
</html>

Output:

Supported Browsers: The browsers supported by HTML video tag are listed below:

  • Google Chrome 4.0
  • Firefox 4.0
  • Apple Safari 4.0
  • Opera 10.5



My Personal Notes arrow_drop_up
Recommended Articles
Page :