A video player can be added to a web page with the <video> tag.
The video file to play is specified with a src attribute, or a nested <source> tag.
Supported video file formats include mp3, webm, and ogg.
A <video> element.
<video width="320" height="240" controls>
<source src="/media/movie.mp4" type="video/mp4">
<source src="/media/movie.ogg" type="video/ogg">
Please upgrade your browser to view videos.
</video>
The <video> tag creates a video display.
The controls attribute adds play, pause, timer, volume, and other controls.
The size of the video display is controlled with the width and height attributes.
The <source> tags set the video files to play and their media types. The browser selects the first recognized format.
If the browser does not support the <video> tag, then the text inside the tag displays.
For details on <video>, see our HTML video Tag Reference.
Adding the autoplay attribute will play the video as soon as the page is loaded.
Note: autoplay is disabled on this page. To see it in action click the 'Try it live' button.
<video width="320" height="240" controls autoplay>
<source src="/media/movie.mp4" type="video/mp4">
<source src="/media/movie.ogg" type="video/ogg">
Please upgrade your browser to view videos.
</video>
HTML supports three video formats: MP4, WebM, and OGG.
Their media types are video/mp4, video/webm, and video/ogg respectively.
Not all browsers support all video formats. Here's a list:
| Browser | MP4 | WebM | OGG |
|---|---|---|---|
 Chrome
|
Yes | Yes | Yes |
 Firefox
|
Yes | Yes | Yes |
 IE/Edge
|
Yes | No | No |
 Opera
|
Yes | Yes | Yes |
 Safari
|
Yes | No | No |
The <video> element exposes a DOM (Document Object Model) that allows programmatic control of the video. This example shows how to play, pause, and resize (normal, big, small) a video with JavaScript.
<button class="btn" onclick="playPause()">Play/Pause</button>
<button class="btn" onclick="makeNormal()">Normal</button>
<button class="btn" onclick="makeBig()">Big</button>
<button class="btn" onclick="makeSmall()">Small</button>
<br><br>
<video id="myvideo" width="420">
<source src="/media/movie.mp4" type="video/mp4">
<source src="/media/movie.ogg" type="video/ogg">
Please upgrade your browser to view videos.
</video>
<script>
var element = document.getElementById("myvideo");
let playPause = () => {
if (element.paused)
element.play();
else
element.pause();
}
let makeBig = () => {
element.width = 560;
}
let makeSmall = () => {
element.width = 320;
}
let makeNormal = () => {
element.width = 420;
}
</script>
The <track> tag specifies a timed text track, such as subtitles and headlines.
Track files are WebVTT (.vtt)formatted. Here's a track with subtitles.
<video width="320" height="240" controls>
<source src="/media/movie.mp4" type="video/mp4">
<source src="/media/movie.ogg" type="video/ogg">
<track src="/media/movie.vtt" kind="subtitle" srclang="en" />
Please upgrade your browser to view videos.
</video>
Here is when <video> support started for each browser:
|
Chrome
|
4.0 | Jan 2010 |
|
Firefox
|
3.5 | Jun 2009 |
|
IE/Edge
|
9.0 | Mar 2011 |
|
Opera
|
10.5 | Feb 2010 |
|
Safari
|
4.0 | Jun 2009 |
Video courtesy: Blender Foundation, www.bigbuckbunny.org
