HTML5 video - video tags

 HTML5 video is a video tag, you can easily insert a video in the browser, you can also set the length and width of the video, increase the video playback control bar, whether to automatically play, whether to automatically repeat the playback and other functions, although using the HTML5 video video tag to It is quite easy to play videos, but at this stage, browser support needs to be considered. For example, IE 9 only supports HTML5 video tags. Other mainstream browsers such as Firefox, Chrome, Opera, and Safari support them, but the video formats are also different. , The rear introduction.

HTML5 video video tag syntax

<video src="Video link" controls></video>

The src in the HTML 5 <video> tag is the most important attribute. The video link is placed in quotation marks to the right of src=. In addition, several control option attributes can be added. For example, adding controls will bring up a control function bar, adding width can be set Video width, height can be added to control the height of the video, loop can be added to play repeatedly, autoplay can be added to automatically play when the video is ready, preload is added, it will be ready to play when the web page is loaded, but if you use both autoplay and preload, it will The autoplay attribute is dominant.

Browser support for HTML5 video video tags and video formats

HTML 5 currently supports three video formats, namely ogg, mpeg 4, and WebM. It doesn’t matter if you don’t know how to choose these multiple formats. The <video> tag supports multiple Video function, that is to say, you can prepare the same video in three different formats. When users open it in different browsers, the <video> tag will automatically play the video suitable for the browser according to the browser at that time. Format, this solves the problem of not knowing which format to use, but older browsers such as IE 7, IE 8 do not support the <video> tag, so the video still cannot be played smoothly, the following preparations A form is provided for your reference.

Browser	ogg	MPEG 4	WebM
FireFox 4.0	support	Does not support	support
Chrome 5.0	support	support	support
Safari 3.0	Does not support	support	Does not support
Opera 10.5	support	Does not support	support
IE 9	Does not support	support	Does not support

The video formats supported by the browsers on this table may change with the evolution of browsers. It is recommended to test the support of various browsers at the time while using video formats. At present, it seems that the supported formats of Opera and IE are just right. On the contrary, the supported formats of Safari and IE are exactly the same, while Chrome supports all formats, and Google is really an HTML 5 supporter. Although there are three formats to choose from, in fact, if you look carefully, it is not difficult to find that the preparation of ogg and mp4 formats will satisfy most browsers.

HTML 5 <video> video tag example

<video width="360" height="270" controls>
<source src="video/test.ogg" type="video/ogg">
<source src="video/test.mp4" type="video/mp4 ">
Your browser does not support this HTML5 video tag
</video>

The output of the above example

In the example, we use multiple video loading methods, using two video formats, ogg and mp4, so that the <video> tag automatically determines which format to display according to the browser, and ogg and mp4 just cover the above It is supported by several mainstream browsers, so normally it should be able to play smoothly. In addition, we also used the attributes to adjust the width and height of the video in the <video> tag, and added controls to give the video a playback function bar, which can adjust the volume, select the video playback position, start and pause, The full screen, etc., the video playback function is almost like this. Finally, I would like to remind you that although the HTML 5 <video> tag is very easy to play videos, the content of the videos is very important. Never use any unauthorized videos on the web page to avoid infringing on the intellectual property rights of others.