HTML Video
The <video> element is used to show a video on a web page.
The HTML <video> Element
To show a video in HTML, use the <video> element, with one or more <source> elements for the video files.
Example
A video with controls and two source formats.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Basic</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
How it Works
The controls attribute adds video controls like play, pause, and volume. It is a good idea to always set width and height, or the page may flicker while the video loads. The <source> element lets you offer several video files; the browser uses the first format it recognizes. The text between <video> and </video> shows only in browsers that do not support the element.
HTML <video> Autoplay
To start a video automatically, use the autoplay attribute.
Note: Chromium browsers usually block autoplay, but muted autoplay is always allowed. Add muted after autoplay to let the video start automatically (but muted).
Autoplay
A video that starts automatically.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Autoplay</title>
</head>
<body>
<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Autoplay muted
A video that autoplays muted so it works in Chromium browsers.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Autoplay Muted</title>
</head>
<body>
<video width="320" height="240" autoplay muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Browser Support
The <video> element is supported in all modern browsers (from Chrome 4, Edge 9, Firefox 3.5, Safari 4, and Opera 10.5).
HTML Video Formats
HTML supports three video formats: MP4, WebM, and Ogg. MP4 and WebM work in all major browsers; Ogg works everywhere except Safari.
HTML Video - Media Types
The media types for the supported formats are: MP4 is video/mp4, WebM is video/webm, and Ogg is video/ogg.
HTML Video - Methods, Properties, and Events
The HTML DOM defines methods, properties, and events for the <video> element. These let you load, play, and pause videos, set the duration and volume, and respond to events such as a video starting or being paused.
Using JavaScript
Buttons that play, pause, and resize a video with JavaScript.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Js</title>
</head>
<body>
<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
</div>
<script>
var myVideo = document.getElementById("video1");
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
function makeBig() {
myVideo.width = 560;
}
function makeSmall() {
myVideo.width = 320;
}
function makeNormal() {
myVideo.width = 420;
}
</script>
</body>
</html>
HTML Video Tags
The video-related tags are: <video> (defines a video), <source> (defines several media resources for <video> and <audio>), and <track> (defines text tracks in media players).