How to display video controls in HTML5 ? - GeeksforGeeks

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
<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:
autoplay : Makes the video start playing automatically, without waiting for the entire video file to finish downloading.loop : Through loop you can play the video  again and again.muted : Makes the player muted by default.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.src : This defines the URL of the video that should be played by the video tag.
autoplay : Makes the video start playing automatically, without waiting for the entire video file to finish downloading.
loop : Through loop you can play the video  again and again.
muted : Makes the player muted by default.
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.
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.
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= "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:
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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Properties
CSS-Questions
HTML-Questions
HTML-Tags
HTML5
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property