Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to display video in HTML5". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to display video in HTML5".

HTML5 specifies a standard way to include video through the video element.

In HTML5, the video element currently supports video files in three formats

1.Ogg = Ogg file with Theora video encoding and Vorbis audio encoding

2.MPEG4 = MPEG4 file with H.264 video encoding and AAC audio encoding

3.WebM = WebM file with VP8 video encoding and Vorbis audio encoding

So how to display video in HTML5? Examples are as follows:

The code is as follows:

Your browser does not support this video format.

All right, now let's explain the meaning of the attributes in the video element, among which width and height will not be explained. We will mainly talk about controls. As the name implies, controls is the controls, , video playback, volume pause and other controls. The Chinese characters inserted in the middle of the video element, as you must know, remind the user that the browser does not support the video format.

It is important to note that to ensure that it is suitable for Safari browsers, the video file must be of type MP4. Video in ogg format is suitable for Firefox, Opera and Chrome browsers. Internet Explorer 8 does not support video elements. In IE 9, support for video elements that use MPEG4 will be provided.

Of course, if we are not sure what format our browser supports, we can check it first. The detection method is found in another blog post, and those who are interested can take a look at it. What should I do if I don't want any trouble? We can do this:

The code is as follows:

Your browser does not support this video format.

The video element allows multiple source elements. The source element can link different video files. The browser will use the first recognizable format, so we just need to prepare a few more videos in different formats.

Next, introduce the attributes of several video tags

1.autoplay: the presence of this attribute means that the video will play automatically when it is ready, usage: autoplay= "autoplay"

2.controls: the presence of this property means that controls, such as playback buttons, are displayed to the user. Usage: controls= "controls"

3.height: setting height

4.width: setting width

5.loop: automatic replay, usage: loop= "loop"

6.preload: the video is loaded and ready to play when the page is loaded. Usage: preload= "auto"

Auto-load the entire video when the page is loaded

Meta-only metadata is loaded when the page is loaded

None-do not load videos when the page is loaded

Note: if autoplay is used, preload is ignored

7.src: the url of the video to be played

Thank you for your reading, the above is the content of "how to display video in HTML5", after the study of this article, I believe you have a deeper understanding of how to display video in HTML5, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.