![]() |
Definition and UsageThe The The text between the There are three supported video formats in HTML: MP4, WebM, and OGG.
Tips and NotesTip: For audio files, look at the Browser SupportThe numbers in the table specify the first browser version that fully supports the element. Optional Attributes
Global AttributesThe Event AttributesThe Related PagesHTML DOM reference: HTML Audio/Video DOM Reference Default CSS SettingsNone. |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The video element</h1>
<video width="320" height="240" controls>
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
The autoplay
attribute is a boolean attribute.
When present, the video will automatically start playing.
Note: Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.
Add muted
after autoplay
to let your video file start playing automatically (but muted).
The numbers in the table specify the first browser version that fully supports the attribute.
<video autoplay>
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The video autoplay attribute</h1>
<video width="320" height="240" controls autoplay>
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
It is A <video> element with browser default controls.
The controls
attribute is a boolean attribute.
When present, it specifies that video controls should be displayed.
Video controls should include:
The numbers in the table specify the first browser version that fully supports the attribute.
<video controls>
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The video controls attribute</h1>
<video width="320" height="240" controls>
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
It is A video player with a specified height and width.
The height
attribute specifies the height of a video player, in pixels.
Tip: Always specify both the height
and width
attributes for videos. If these attributes are set, the required space for the video is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the video loads).
Note: Do not rescale video with the height
and width
attributes! Downsizing a large video with these attributes forces a user to download the original video (even if it looks small on the page). The correct way to rescale a video is with a program, before using it on a web page.
<video height="pixels">
Value | Description |
---|---|
pixels | The height of the video, in pixels (i.e. height="100") |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The video width and height attributes</h1>
<video width="320" height="240" controls>
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
It is A video that will start over again, every time it is finished.
The loop
attribute is a boolean attribute.
When present, it specifies that the video will start over again, every time it is finished.
The numbers in the table specify the first browser version that fully supports the attribute.
<video loop>
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The video loop attribute</h1>
<video width="320" height="240" controls loop>
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
The muted
attribute is a boolean attribute.
When present, it specifies that the audio output of the video should be muted.
The numbers in the table specify the first browser version that fully supports the attribute.
<video muted>
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The video muted attribute</h1>
<video width="320" height="240" controls muted>
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
It is A video player with a poster image.
Before playing video, It will show a default image.
The poster
attribute specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
The numbers in the table specify the first browser version that fully supports the attribute.
<video poster="URL">
Value | Description |
---|---|
URL | Specifies the URL of the image file.
Possible values:
|
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The video poster attribute</h1>
<video width="320" height="240" poster="https://horje.com/avatar.png" controls>
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Author thinks that the video should NOT be loaded when the page loads.
The preload
attribute specifies if and how the author thinks that the video should be loaded when the page loads.
The preload
attribute allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. This attribute may be ignored in some instances.
Note: The preload
attribute is ignored if autoplay
is present.
The numbers in the table specify the first browser version that fully supports the attribute.
<video preload="auto|metadata|none">
Value | Description |
---|---|
auto | The author thinks that the browser should load the entire video when the page loads |
metadata | The author thinks that the browser should load only metadata when the page loads |
none | The author thinks that the browser should NOT load the video when the page loads |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The video preload attribute</h1>
<video width="320" height="240" controls preload="none">
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
It will Play a video.
The src
attribute specifies the location (URL) of the video file.
The example above uses an Ogg file, and will work in Chrome, Edge, Firefox and Opera.
To play the video in old Internet Explorer and Safari, we must use an MPEG4 file.
To make it work in all browsers - add several <source>
elements inside the <video>
element. Each <source>
elements can link to different video files. The browser will use the first recognized format:
The numbers in the table specify the first browser version that fully supports the attribute.
The src
attribute is supported in all of the major browsers, however, the file format defined may not be supported in all browsers.
<video src="URL">
Value | Description |
---|---|
URL | The URL of the video file.
Possible values:
|
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The video src attribute</h1>
<video width="320" height="240" controls src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4">
Your browser does not support the video tag.
</video>
<p><b>Note:</b> The .ogg fileformat is not supported in old IE and Safari.</p>
</body>
</html>
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
This is A video player with a specified width and height.
The width
attribute specifies the width of a video player, in pixels.
Tip: Always specify both the height
and width
attributes for videos. If these attributes are set, the required space for the video is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the video loads).
Note: Do not rescale video with the height
and width
attributes! Downsizing a large video with these attributes forces a user to download the original video (even if it looks small on the page). The correct way to rescale a video is with a program, before using it on a web page.
<video width="pixels">
Value | Description |
---|---|
pixels | The width of the video, in pixels (i.e. width="100") |
Example:
HTML
<!DOCTYPE html>
<html>
<body>
<h1>The video width and height attributes</h1>
<video width="320" height="240" controls>
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="https://www.sample-videos.com/video321/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
html video |
Read Full: | HTML Tag |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | HTML Tag |
Uploaded: | 3 weeks ago |
Uploaded by: | Admin |
Views: | 41 |
Reffered: https://www.w3schools.com/tags/tag_video.asp