Hi everybody! After a long time with a series of articles about Tips & Tricks JavaScript in the working process that I have accumulated, everything feels quite “saturated” and “boring”. So, now I decided to return with a much more “gentle” and “emotional” article, some little things to share about the friendly HTML guy (no headache).
Surely all Web Developers have worked with HTML5 video tags. However, there are also some new developers to learn and work with HTML5, often using only a few features and ignoring many other cool things. So in this article I will summarize all that belongs to the video card, invite you to join us
1. Getting Started
To get started with video tags, it’s really simple to add videos directly to your website.
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> video</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video.mp4 <span class="token punctuation">"</span></span> <span class="token attr-name">controls</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> video</span> <span class="token punctuation">></span></span> |
In the event a user’s browser doesn’t support HTML5 video tag, you need to let them know. The content inside the video tag will act as a fallback for browsers that don’t support video tags.
1 2 3 4 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> video</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video.mp4 <span class="token punctuation">"</span></span> <span class="token attr-name">controls</span> <span class="token punctuation">></span></span> Bữa nay còn dùng IE8 à bro...Hãy tải ngay Chrome để trải nghiệm nhé! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> video</span> <span class="token punctuation">></span></span> |
or
1 2 3 4 5 6 7 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> video</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video.mp4 <span class="token punctuation">"</span></span> <span class="token attr-name">controls</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token punctuation">></span></span> Bữa nay còn dùng IE8 à bro...Hãy tải ngay Chrome để trải nghiệm nhé! Hoặc bro lười tải thì click vào <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> a</span> <span class="token attr-name">href</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video.mp4 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> đây <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> a</span> <span class="token punctuation">></span></span> nha! (Dù sao vẫn nên tải Chrome, nhanh thôi mà) <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> p</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> video</span> <span class="token punctuation">></span></span> |
2. Link source video
There are 2 ways for you to specify a video source.
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> video</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video.mp4 <span class="token punctuation">"</span></span> <span class="token attr-name">controls</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> video</span> <span class="token punctuation">></span></span> |
or
1 2 3 4 5 6 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> video</span> <span class="token attr-name">controls</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> source</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video.webm <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video/webm <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> source</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video.ogg <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video/ogg <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> source</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video.mp4 <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video/mp4 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> video</span> <span class="token punctuation">></span></span> |
The benefit of using <source> is that you can add different types of videos to your videos. Not all browsers support the same video format. So by converting a variety of video file formats, you can let your browser decide which video is right for you.
3. Video Attribute
There are many attributes associated with them, the first of which are some common and important attributes:
controls: perform video tasks such as play, pause, and volume.widthandheight: set the height and width for the video. If the height and width are not set, the page may blink while the video is loaded.<source>: allows you to specify alternative videos that the browser supports. The browser will use the first recognized format.- The text in the
<video>Some text</video>tag will only be displayed in browsers that do not support <video>. autoplay: automatically start video. Note: this property is not supported on mobile devices such as iPhone, iPad.
In addition, there are many other attributes too …
poster: this allows you to pass an image URL, which will display while the video is downloading or until play is pressed. For example:
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> video</span> <span class="token attr-name">poster</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> image.png <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> video</span> <span class="token punctuation">></span></span> |
preload: determines whether a video file is loaded with page load.muted: video will be set to “silent” by default.loop: the video will automatically be played repeatedly after each end.
4. Add captions and subtitles with track tag
To add subtitles or captions for a video, the track tag will accompany your video by reading from a .vtt file, for example:
1 2 3 4 5 6 7 8 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> video</span> <span class="token attr-name">controls</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> source</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video.webm <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video/webm <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> source</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video.ogg <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video/ogg <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> source</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video.mp4 <span class="token punctuation">"</span></span> <span class="token attr-name">type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> video/mp4 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> track</span> <span class="token attr-name">kind</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> subtitles <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> english-subtitles.vtt <span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> en <span class="token punctuation">"</span></span> <span class="token attr-name">default</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> track</span> <span class="token attr-name">kind</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> subtitles <span class="token punctuation">"</span></span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> vietnamese-subtitles.vtt <span class="token punctuation">"</span></span> <span class="token attr-name">srclang</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> vi <span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> video</span> <span class="token punctuation">></span></span> |
Watch the short video below to understand how an HTML5 video with subtitles works:
In addition, to learn more about the track tag, you can see more here .
The above is everything about HTML5 Video through my accumulated learning and working experience. Hope to help you more or less in the process of studying and working. Good bye and see you again!