What is <video> tag ?
<video> tag is an inline element used to embed video content into a web page.
<video> tag is used to add any videos, for example music video or news video, to our web pages.
What are the supported formats for <video> tag ?
Only three certain formats are supported by HTML5 <video> tag, listed below
1. mp4
2. ogg
3. webM
Note : All three formats are not supported in all browsers.
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
Simple <video> tag
Example :
<!DOCTYPE html>
<html>
<head>
<title>Video Tag</title>
</head>
<body>
<p>MP4 Format</p>
<video width="300" height="200" autoplay>
<source src="example1.mp4" type="video/mp4">
</video>
<p>Ogg Format</p>
<video width="300" height="200" autoplay>
<source src="example2.ogv" type="video/ogg">
</video>
<p>WebM Format</p>
<video width="300" height="200" autoplay>
<source src="example3.webm" type="video/webm">
</video>
</body>
</html>
<video> – Defines the start and end of <video> and </video> tags.
width, height – Defines the width and height of the video section.
If not set the webpage will flicker while loading the video file.
source – Defines the source location of the video file.
type – Defines the supported format type of the video file.
Output :
What are the attributes for <video> tag ?
Some of the attributes can be used with <video> tag listed below,
1. height and width
2. src
3. autoplay
4. controls
5. loop
6. muted
7. poster
8. preload
1. height and width
Defines the width and height of the video player.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Video Tag</title>
</head>
<body>
<p>MP4 Format</p>
<video width="300" height="200">
<source src="example1.mp4" type="video/mp4">
</video>
</body>
</html>
Output :
2. src
Defines the source URL of the video.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Video Tag</title>
</head>
<body>
<p>MP4 Format</p>
<video width="300" height="200">
<source src="example1.mp4" type="video/mp4">
</video>
</body>
</html>
Output :
3. autoplay
Defines the video will play immediately after it loads.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Video Tag</title>
</head>
<body>
<p>MP4 Format</p>
<video width="300" height="200" autoplay>
<source src="example1.mp4" type="video/mp4">
</video>
</body>
</html>
Output :
4. controls
Defines the controls to display with the video player.
This is a Boolean value( New attribute in HTML5).
The video control should include:
1. Play
2. Pause
3. Volume
4. Full-screen Mode
5. Seeking
6. Captions/Subtitles(if available)
7. Track(if available)
Example :
<!DOCTYPE html>
<html>
<head>
<title>Video Tag</title>
</head>
<body>
<p>MP4 Format</p>
<video controls width="300" height="200">
<source src="example1.mp4" type="video/mp4">
</video>
</body>
</html>
Output :
5. loop
Defines the video should continuously repeat.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Video Tag</title>
<script>
var id = document.getElementById("egVideo");
function enableLoop() {
id.loop = true;
id.load();
}
</script>
</head>
<body>
<p>MP4 Format</p>
<video controls id="egVideo" width="300" height="200">
<source src="example1.mp4" type="video/mp4">
</video><br/>
<button onclick="enableLoop()" type="button"><b>Enable loop</b></button>
</body>
</html>
Output :
6. muted
Defines the audio output should be muted.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Video Tag</title>
<script>
var id = document.getElementById("egVideo");
function enableLoop() {
id.muted = true;
}
</script>
</head>
<body>
<p>MP4 Format</p>
<video controls id="egVideo" width="300" height="200">
<source src="example1.mp4" type="video/mp4">
</video><br/>
<button onclick="enableLoop()" type="button"><b>Enable Muted</b></button>
</body>
</html>
Output :
7. poster
Defines an image to be shown while the video is downloading, or first loads.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Video Tag</title>
<script>
var id = document.getElementById("egVideo");
function enableLoop() {
id.muted = true;
}
</script>
</head>
<body>
<p>MP4 Format</p>
<video controls id="egVideo" width="300" height="200" poster="https://secureservercdn.net/192.169.221.188/s30.e0b.myftpupload.com/wp-content/uploads/2020/10/html5-title-cc-1.png">
<source src="example1.mp4" type="video/mp4">
</video><br/>
</body>
</html>
Output :
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
8. preload
Defines how and when the video should load.
Example :
<!DOCTYPE html>
<html>
<head>
<title>Video Tag</title>
<script>
var id = document.getElementById("egVideo");
function enableLoop() {
id.muted = true;
}
</script>
</head>
<body>
<p>MP4 Format</p>
<video controls id="egVideo" width="300" height="200" preload="auto">
<source src="example1.mp4" type="video/mp4">
</video><br/>
</body>
</html>
Output :
в W3C есть и другие сторонники ограничения работы пользовательских браузеров, букмарклетов и плагинов. ^ Google released a WebM component for Media Foundation to allow the playback of WebM files in IE9 through the standard HTML5 video tag.