| Introduction to HTML |
|---|
| Introduction to HTML |
|---|
| HTML Attributes |
|---|
| HTML5 Semantic Elements |
|---|
| HTML Graphics |
|---|
The <video> element in HTML is used to embed video content in a webpage. It is a block-level element that supports various attributes to control video playback. Here’s a detailed explanation along with examples:
Basic Syntax
<video src="path/to/video.mp4" controls>
Your browser does not support the video tag.
</video>
Attributes of the 'video' Element
‘
src‘: Specifies the path to the video file. It can be a relative or absolute URL.- Example:’
<videosrc="video.mp4" controls></video>‘
- Example:’
‘
controls‘: Adds video controls like play, pause, volume, etc. to the video player.- Example:’
<videosrc="video.mp4"controls></video>‘
- Example:’
‘
autoplay‘: The video starts playing automatically when the page loads.- Example:’
<videosrc="video.mp4"autoplay</video>‘
- Example:’
‘
loop‘: The video will start over again, every time it ends.- Example:’
<videosrc="video.mp4"loop></video>'
- Example:’
‘
muted‘: Mutes the audio of the video by default.- Example:’
<videosrc="video.mp4" muted></video>‘
- Example:’
‘
poster‘: Specifies an image to be shown while the video is downloading, or until the user hits the play button.- Example:’
<videosrc="video.mp4"poster="poster.jpg" controls></video>‘
- Example:’
‘
width‘ and ‘height‘: Set the dimensions of the video player.- Example:’
<videosrc="video.mp4"width="640"height="360" controls></video>‘
- Example:’
‘
preload‘: Specifies if and how the video should be loaded when the page loads. It can take the following values:- ‘
auto‘: The video should be loaded entirely when the page loads. - ‘
metadata‘: Only metadata (like dimensions and duration) is loaded. none: The video should not be loaded when the page loads.- Example:’
<videosrc="video.mp4"preload="metadata" controls></video>‘
- ‘
Example with Multiple Source Formats
It’s a good practice to provide multiple formats of the video to ensure it plays across different browsers. This is done using the ‘<source>‘ tag.
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
Example with All Features
<video width="640" height="360" controls autoplay loop muted poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
Explanation
- Fallback Content: The text “Your browser does not support the video tag.” is a fallback content that will be displayed if the browser doesn’t support the ‘
<video>‘ element. - Multiple ‘
<source>‘ Tags: The browser will pick the first format it supports. - ‘
autoplay‘, ‘loop‘, ‘muted‘: The video will play automatically, loop indefinitely, and will be muted by default. - ‘
poster‘: An image will be shown before the video starts playing.
Browser Support
The ‘<video>‘ element is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, not all browsers support all video formats, which is why providing multiple formats is important.
Example with JavaScript Control
You can also control video playback using JavaScript:
<video id="myVideo" width="640" height="360" controls>
<source src="video.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() {
document.getElementById('myVideo').play();
}
function pauseVideo() {
document.getElementById('myVideo').pause();
}
</script>
The ‘<video>‘ element is a powerful and flexible way to include video content in your webpages. By understanding its attributes and using fallback strategies, you can ensure that your videos are accessible to a wide range of users.
