In this article, we will know HTML5 Video, along with knowing the different ways to add 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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
10 May, 2023
Like Article
Save Article