Open In App

How to display video controls in HTML5 ?

Last Updated : 26 Jun, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

The HTML <video> controls attribute is used to display video controls in HTML5. It is a Boolean attribute that adds video controls like volume, pause, and play. HTML5 commonly uses formats such as OGG, MP4, OGM, and OGV because browser support for these formats varies.

Syntax

<video controls>
  <source src="video-file.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

The controls attribute adds video controls, and the <source> element allows you to specify alternative video files.

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

Video Controls

The video control should include:

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

Video Tag Attributes

The <video> tag supports the following main attributes:

  • autoplay: Starts playing the video automatically, without waiting for the entire video file to finish downloading.
  • loop: Plays the video again and again.
  • muted: Mutes the player by default.
  • preload: Specifies how the video should be loaded when the page loads.
    • auto: Loads the video as soon as the page loads.
    • metadata: Loads only the video metadata.
    • none: Does not load the video when the page loads.
  • src: Defines the URL of the video that should be played by the <video> tag.

Note: Always specify the width and height of the video to prevent the webpage from slowing down due to uncertainty about how much space the video will require.

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= 
"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:

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= 
"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:

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=
 "https://media.geeksforgeeks.org/wp-content/uploads/20190627130930/a218.png"> 
            <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:

The HTML <video> tag is a powerful tool for embedding videos in your web pages. By using various attributes like controls, autoplay, loop, muted, preload, and poster, you can enhance the user experience and ensure that your videos are displayed correctly across different browsers. Always remember to specify the width and height of the video to maintain optimal webpage performance.

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

Next Article
How to mute video using HTML5 ?
author
aksrathod07
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox