HTML Video Tag
HTML <video> tag is a key component for embedding and controlling multimedia content specifically video on on web-page. It is part of the HTML5 specification and provide a standard way to include video without the need for third-party plugin. This tag enable web developer to deliver multimedia experience in a way that is widely compatible with modern web browser. break down the various aspect of the <video> tag and it functionality.
Structure of the <video> Tag
<video controls> <source src="movie.mp4" type="video/mp4"> HTML Video Tag Syntax. </video>
Attribute:
- Src: This is the source attribute, where you provide the URL of the video file. In this example the video file is called movie.mp4.
- Controls: This attribute enables the default video controls like play, pause, volume control, etc. If the controls attribute is not included, the video will be played without any user interface.
- Fallback Text: Inside the <video> tag, you can include fallback content that will be shown if the browser does not support the video element. For example, you can add a message like “Your browser does not support the video tag” to ensure that users know they cannot view the video.
Multiple Sources: Sometimes, different video formats are required to ensure compatibility with various browsers. The <video> tag allows you to include multiple <source> elements within it, each pointing to a different video format. For instance:
<video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video>
File Formats and Compatibility:
The most commonly supported video formats are MP4, WebM, and OGG.
- MP4 (with H.264 video codec and AAC audio codec) is supported by most modern browsers (Chrome, Safari, Firefox, Internet Explorer).
- WebM is an open-source format primarily supported by Chrome, Firefox, and Opera.
- OGG is another open-source format supported by Firefox, Chrome, and Opera.
Some older browser (like Internet Explorer 8 and earlier) may not support the <video> tag at all. However modern browsers (Chrome, Firefox, Edge, Safari) provide excellent support for it.
Key Attributes of the <video> Tag
In addition to the src and controls attributes, the <video> tag has several other attribute that allow developer to fine-tune the behavior and appearance of the video
autoplay: This attribute tells the browser to begin playing the video automatically when it is loaded, without user intervention.
<video src="movie.mp4" autoplay> Your browser does not support the video tag. </video>
loop: When this attribute is added, the video will automatically loop back to the start when it ends.
<video src="movie.mp4" loop> Your browser does not support the video tag. </video>
muted: This attribute work mute the video audio by default.
<video src="movie.mp4" muted> Your browser does not support the video tag. </video>
poster: This attribute specifies an image to be shown before the video is played, essentially acting as a thumbnail or preview of the video.
<video src="movie.mp4" poster="thumbnail.jpg" controls> Your browser does not support the video tag. </video>
preload: This attribute determines how the browser should load the video when the page is loaded. It can take three value.
- none: The video will not be loaded until the user presses play.
- metadata: Only the metadata (such as duration, dimensions) of the video will be loaded.
- auto: The entire video will be loaded when the page loads.
Example
<video src="movie.mp4" preload="auto" controls> Your browser does not support the video tag. </video>
width and height: These attributes allow you to set the dimensions of the video on the page. If not specified, the video will be displayed at its native resolution.
<video src="movie.mp4" width="600" height="400" controls> Your browser does not support the video tag. </video>
The <source> Tag for Multiple Video Formats
As mentioned earlier, to ensure compatibility across different browsers and devices, you can include multiple sources inside the <video> tag. Each <source> element specifies a different video file and its MIME type.
<video controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogv" type="video/ogg"> <source src="movie.webm" type="video/webm"> Your browser does not support the video tag. </video>
Advanced Features and Methods JavaScript Control
The <video> tag can be controlled programmatically using JavaScript. This allows you to customize the behavior of the video element and add interactivity to the user experience.
JavaScript Methods
play(): This method starts video playback.
document.getElementById('myVideo').play();
pause(): This method pauses the video playback.
document.getElementById('myVideo').pause();
load(): This method reloads the video and resets playback to the beginning.
document.getElementById('myVideo').load();
muted(): This method toggles the audio on and off.
document.getElementById('myVideo').muted = !document.getElementById('myVideo').muted;
JavaScript Properties
CurrentTime: This property get or set the current playback time of the video in second.
console.log(document.getElementById('myVideo').currentTime);
document.getElementById('myVideo').currentTime = 30; // Jump to 30 seconds
Duration: This property returns the total duration of the video in second.
console.log(document.getElementById('myVideo').duration);
Paused: This property returns a Boolean value indicating whether the video is paused.
console.log(document.getElementById('myVideo').paused); // true or false
Ended: This property return a Boolean value indicating whether the video has ended.
console.log(document.getElementById('myVideo').ended); // true or false
Event Handling
let video = document.getElementById('myVideo');
video.addEventListener('play', function() {
console.log('Video is playing');
});
HTML Video Tag with Example
<!DOCTYPE html> <html lang="en"> <head> <title>HTML Video Tag with Example</title> </head> <body> <h1>Video with Example</h1> <video width="640" height="360" controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> HTML Video Tag Supported Video Formats. </video> </body> </html>
