The `<video>` tag in HTML is used to embed video content in a web page. It can be used to play video files such as movies, clips, or video streams. The `<video>` element supports multiple video formats, including MP4, WebM, and Ogg. Here’s a basic example of how to use the `<video>` tag:
<video controls>
<source src="video-file.mp4" type="video/mp4">
<source src="video-file.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Attributes of the `<video>` Tag
controls: Adds video controls, like play, pause, and volume.
autoplay: Specifies that the video will start playing as soon as it is ready.
loop: Specifies that the video will start over again, every time it is finished.
muted: Specifies that the video output should be muted.
preload: Specifies if and how the author thinks the video should be loaded when the page loads. It can have three values:
auto: The browser should load the entire video file when the page loads.
metadata Only metadata (like length) is loaded.
none: The video file should not be loaded when the page loads.
poster: Specifies an image to be shown while the video is downloading, or until the user hits the play button.
Example with Attributes
<video controls autoplay loop muted preload="auto" poster="poster-image.jpg" width="640" height="360">
<source src="video-file.mp4" type="video/mp4">
<source src="video-file.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Handling Unsupported Browsers
If the browser does not support the `<video>` element, the content inside the `<video>` tag (e.g., "Your browser does not support the video tag.") will be displayed to the user.
Using JavaScript with `<video>`
You can manipulate the video element using JavaScript. Here’s an example:
<video id="myVideo" controls width="640" height="360">
<source src="video-file.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<button onclick="playVideo()">Play</button>
<button onclick="pauseVideo()">Pause</button>
<script>
function playVideo() {
var video = document.getElementById("myVideo");
video.play();
}
function pauseVideo() {
var video = document.getElementById("myVideo");
video.pause();
}
</script>
This example adds play and pause buttons that control the video playback using JavaScript.