HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python 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.
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
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.
Browser support
Chrome
Edge
Firefox
IE
Opera
Safari
Mobile browser support
Chrome
Firefox
Opera
