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
<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.
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...