How to display video in HTML5? HTML5 video playback demo_html5 tutorial skills

Today, most videos are displayed through plug-ins such as Flash. However, not all browsers have the same plugins.

HTML5 specifies a standard way to include video via the video element.
In HTML5, the video element currently supports three formats of video files,
1.Ogg = Ogg file with Theora video encoding and Vorbis audio encoding
2.MPEG4 = with H.264 video MPEG 4 file with encoding and AAC audio encoding
3.WebM = WebM file with VP8 video encoding and Vorbis audio encoding

So how to display video in HTML5? The example is as follows:

Copy code

The code is as follows:

Okay, now let’s explain the meaning of each attribute in the video element. Width and height will not be explained. I will mainly talk about controls. As the name suggests, controls are controls. , Haha, it’s the controls for video playback, volume, and pause. If you are smart, you must know that the Chinese characters inserted in the middle of the video element are a reminder that the user's browser does not support the use of video formats.

It should be noted that to ensure that it is suitable for Safari browser, the video file must be of MP4 type. The ogg format video is suitable for Firefox, Opera and Chrome browsers. Internet Explorer 8 does not support the video element. In IE 9, there will be support for the video element using MPEG4.

Of course, if we are not sure what video formats our browser supports, we can check it first. The detection method is in another blog post. If you are interested, you can check it out. What should I do if I don’t want to bother? We can do this:

Copy the code

The code is as follows:

The video element allows multiple source elements. The source element can link different video files. The browser will use the first recognized format, so we only need to prepare a few more videos in different formats.
Next, let’s introduce the attributes of several video tags.
1.autoplay: The appearance of this attribute means that the video will automatically play when it is ready. Usage: autoplay="autoplay"
2.controls: The appearance of this attribute Attribute means displaying controls to the user, such as play buttons, etc. Usage: controls="controls"
3.height: Set height
4.width: Set width
5.loop: Automatic replay, usage: loop="loop"
6.preload: The video is loaded and prepared to play when the page is loaded. Usage: preload="auto"
auto - load the entire video when the page is loaded
meta - when the page Only load metadata after loading
none - Do not load the video after the page is loaded
Note: If autoplay is used, preload is ignored
7.src: URL of the video to be played