HTML <video> Tag
The <video> tag is one of the HTML5 elements. It is used to embed the video on an HTML document. Browsers don't all support the same video formats, so you should provide multiple video formats for correct rendering. A path to the video file is nested inside <source> tag, or src attribute.
You can also include an alternate text in the <video> tag, that will be displayed in case if the browser doesn’t support the video format.
There are 3 supported video formats for the <video> element: MP4/MPEG 4, WebM, and Ogg. For the compression/decompression of large video files special programs, codecs, are used.
MP4/MPEG 4 files are used with H264 video and AAC audio codecs, WebM files - with VP8 video codec and Vorbis audio codec; and Ogg files - with Theora video codec and Vorbis audio codec.
Syntax
The <video> tag comes in pairs, its content is written between opening (<video>) and closing (</video>) tags.
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).mp4"/>
</video>
<p>Some information about video</p>
</body>
</html>Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
<source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
</video>
<p>Some information about video</p>
</body>
</html>
The controls, autoplay and loop attributes are Boolean attributes and do not accept values. If specified, they are on by default.
Attributes
| Attributes | Value | Description |
|---|---|---|
| autoplay | autoplay | Specifies that the video will start playing automatically as soon as it is ready. |
| controls | controls | Displays controls element allowing the user to control video playback, including volume, seeking, and pause/resume playback. |
| height | pixels | Sets the height of the video player. |
| loop | loop | Specifies that the video will start over again, every time it is finished |
| muted | muted | Specifies that the video will be initially silenced. |
| poster | URL | Sets an image that will be shown while the video is downloading, or until the user hits the play button. |
| preload | Provides a hint to the browser regarding what content is loaded before the video is played. | |
| auto | The whole video file can be downloaded. | |
| metadata | Video metadata (e.g. length) is fetched. | |
| none | The video should not be preloaded. | |
| The attribute is ignored is autoplay is enabled. | ||
| src | URL | Sets the URL of the embedded video. The <source> element can be used instead to specify the video to embed. |
| width | pixels | Sets the width of the player. |
The <video> tag supports the Global Attributes and the Event Attributes.
0 Comments
CAN FEEDBACK
Emoji