HTML Video
You can create static and dynamic web pages, and you can embed multimedia content, such as videos, into your web pages.
To embed a video into an HTML document, you can use the <video>
tag.
As an example:
Editor
In this example:
- The
"src"
attribute specifies the URL of the video file, and the "controls" attribute displays the default set of video controls (play, pause, volume, etc.). - The text between the opening and closing
<video>
tags is displayed in browsers that do not support the<video>
tag.
Width , Height , Autoplay and Loop
You can also specify other attributes, such as "width"
and "height"
, to control the size of the video player, and you can add additional elements, such as <source>
tags, to provide alternative video formats for different browsers.
As an example:
<video width="640" height="360" autoplay loop>
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
In this example:
- The video player has a width of
640
pixels and a height of360
pixels. - The
"autoplay"
attribute specifies that the video should start playing as soon as it loads, and the"loop"
attribute specifies that the video should continue playing in a loop. - The
<source>
tags specify three different video files in different formats, and the browser will choose the first one that it can play. - If none of the formats are supported by the browser, the text
"Your browser does not support the video tag."
will be displayed.
Poster , Controls , Preload and Muted
You can also add other attributes to the <video>
tag to customize the video player. Here are some common attributes:
poster
: specifies a poster image to be displayed before the video starts playingcontrols
: displays the default set of video controls (play, pause, volume, etc.)preload
: specifies whether the video should be preloaded (none, metadata, auto)muted
: specifies whether the video should be muted by default
As an example:
<video width="640" height="360" controls preload="auto" poster="poster.jpg">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
In this example:
- A poster image (
"poster.jpg"
) is displayed before the video starts playing, and the default set of video controls is displayed. - The video is preloaded automatically, and if the
"muted"
attribute were added with a value of"true"
, the video would be muted by default.
HTML Video - Methods, Properties, and Events
HTML video elements have a number of properties, methods, and events that you can use to control and interact with the video player.
Here are some of the most commonly used ones:
Properties:
currentTime
: returns or sets the current playback time in secondsduration
: returns the length of the video in secondspaused
: returns whether the video is currently paused or notended
: returns whether the video has ended or notvolume
: returns or sets the volume of the video (0.0 to 1.0)muted
: returns or sets whether the video is muted or not-
src
: returns or sets the URL of the video file
As an example:
<video id="my-video" src="video.mp4"></video>
<script>
var video = document.getElementById("my-video");
video.play();
console.log("Current time: " + video.currentTime);
console.log("Duration: " + video.duration);
console.log("Paused: " + video.paused);
console.log("Ended: " + video.ended);
console.log("Volume: " + video.volume);
video.volume = 0.5;
console.log("Muted: " + video.muted);
video.muted = true;
console.log("Muted: " + video.muted);
</script>
In this example:
- The
<video>
tag includes an"id"
attribute that is used to reference the video element in JavaScript. - The
"play"
method is used to start playing the video, and the"currentTime"
,"duration"
,"paused"
,"ended"
,"volume"
, and"muted"
properties are logged to the console. - The
"volume"
and"muted"
properties are also set to new values.
Methods:
play
: starts playing the videopause
: pauses the videoload
: loads the video filecanPlayType
: returns whether the browser can play a specified video format
As an example:
<video id="my-video">
<source src="video.mp4" type="video/mp4" />
<source src="video.webm" type="video/webm" />
<source src="video.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
<script>
var video = document.getElementById("my-video");
video.load();
console.log(video.canPlayType("video/mp4"));
console.log(video.canPlayType("video/webm"));
console.log(video.canPlayType("video/ogg"));
setTimeout(function () {
video.play();
}, 5000);
</script>
In this example:
- The
<video>
tag includes multiple<source>
tags for different video formats. - The
"load"
method is used to load the video file, and the"canPlayType"
method is used to check whether the browser can play each of the specified video formats. - Finally, the
"play"
method is called after a 5-second delay using the"setTimeout"
function.
Events:
play
: fires when the video starts playingpause
: fires when the video is pausedended
: fires when the video has endedtimeupdate
: fires when the current playback time changesloadedmetadata
: fires when the video metadata (duration, size, etc.) has been loaded
As an example:
<video id="myVideo" src="video.mp4"></video>
<script>
var video = document.getElementById("myVideo");
// Play event
video.addEventListener("play", function () {
console.log("Video is playing");
});
// Pause event
video.addEventListener("pause", function () {
console.log("Video is paused");
});
// Ended event
video.addEventListener("ended", function () {
console.log("Video has ended");
});
// Timeupdate event
video.addEventListener("timeupdate", function () {
console.log("Current time: " + video.currentTime);
});
// Loadedmetadata event
video.addEventListener("loadedmetadata", function () {
console.log("Video duration: " + video.duration);
console.log(
"Video size: " + video.videoWidth + "x" + video.videoHeight
);
});
</script>
In this example:
- We're adding event listeners to the video element for each of the events
play
,pause
,ended
,timeupdate
, andloadedmetadata
. - When the video starts playing, the
play
event is fired, and we log a message to the console. Similarly, when the video is paused or ends, thepause
andended
events are fired, respectively. - The
timeupdate
event is fired every time the current playback position changes, and we log the current time to the console. - The
loadedmetadata
event is fired when the video metadata has been loaded, and we log the video duration and size to the console.