Everything about HTML5 Video

Tram Ho

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.

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.


2. Link source video

There are 2 ways for you to specify a video source.


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.
  • width and height : 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:

  • 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:

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!

Share the news now

Source : Viblo