Contents
HTML video Tag: Main Tips
- By using the
<video>tag, you can make HTML insert video to your page. - This tag was introduced in HTML5.
- It supports global attributes.
Using the video Tag
The HTML video tag includes a video on the web page. It works in a similar manner as the <object> tag.
<video controls width="400" height="300">
<source src="video-tag-example.mp4" type="video/mp4">
<source src="video-tag-sample.webm" type="video/webm">
<source src="video-tag-demo.ogg" type="video/ogg">
Video tag is not supported in this browser.
</video>This tag is compatible with MP4, WebM, and Ogg file types. To avoid video codecs and browser compatibility issues, it's best that you add multiple sources to the video.
It is mandatory to use both opening and closing video HTML tags. If the browser cannot show the video, it will display the text you write between them.
Mostly Used video Tag Attributes
autoplay specifies whether the video should play automatically when it's ready:
<video controls autoplay width="400" height="300">
<source src="video-tag-example.mp4" type="video/mp4">
Video tag is not supported in this browser.
</video>Note: to stop the video from auto-playing, remove the attribute altogether. Simply changing its value to false won't help.
controls specifies whether the video should have player control buttons (play, pause, volume, etc.):
<video controls width="400" height="300">
<source src="video-tag-example.mp4" type="video/mp4">
Video tag is not supported in this browser.
</video>height and width define the dimensions of the video player:
<video controls width="400" height="300">
<source src="video-tag-example.mp4" type="video/mp4">
Video tag is not supported in this browser.
</video>loop specifies whether the video will start over after it ends:
<video controls loop width="400" height="300">
<source src="video-tag-example.mp4" type="video/mp4">
Video tag is not supported in this browser.
</video>muted specifies whether the audio of the video should be muted when it’s loaded:
<video controls muted width="400" height="300">
<source src="video-tag-example.mp4" type="video/mp4">
Video tag is not supported in this browser.
</video>poster specifies whether a certain image will be shown while the video is loading:
<video controls poster="/images/video-tag.gif" width="400" height="300">
<source src="video-tag-example.mp4" type="video/mp4">
Video tag is not supported in this browser.
</video>preload specifies how a video should load when the page is loaded:
<video controls preload="none" width="400" height="300">
<source src="video-tag-example.mp4" type="video/mp4">
Video tag is not supported in this browser.
</video>Note: there are three possible preload values: none (no preload), metadata (preloads only the metadata) and auto (the whole file is preloaded).
src defines an URL source of the video file:
<video src="video-tag-example.mp4" controls width="400" height="300">
<track kind="subtitles" src="video-tag.en.vtt" srclang="en" label="English">
Video tag is not supported in this browser.
</video>Note: src also supports multiple tracks to include subtitles.