HTML5 Video
In this article, we will know HTML5 Video, along with knowing the different ways to add the videos to the HTML page & understanding its implementation through the examples. Before HTML 5 came into existence, videos could only be played in a browser using a plugin like flash. But after the release of HTML 5, adding a video to a webpage is as easy as adding an image. The HTML5 “video” element specifies a standard way to embed a video on a web page.
There are three different formats that 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 Chrome | Yes | Yes | Yes |
| Internet Explorer | Yes | No | No |
| Firefox | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes |
| Safari | Yes | Yes | No |
Syntax:
<video src="" controls> </video>
Attributes that can be used with the “video” tag are listed below :
- 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 sets the width of the video in CSS pixels.
- 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= type="video/mp4"> <source src= type="video/ogg"> </video> </center></body></html> |
Output:
We will understand the various ways to implement the <video> tag, through the examples.
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
- Internet Explorer 9 and above
- Microsoft Edge 12 and above
- Firefox 3.5 and above
- Opera 10.5 and above
- Safari 3.1 and above
Please Login to comment...