Comment: Most videos are displayed through plug-ins (such as Flash). However, not all browsers have the same plug-in, HTML5 specifies a standard way to include videos through video elements, which can be used to complete video playback
Today, most videos are displayed through plugins (such as Flash). However, not all browsers have the same plug-in.HTML5 specifies a standard way to include videos through video elements.
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 = MPEG 4 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 videos in HTML5? Examples are as follows:
<video src="demo.mp4" controls="controls">Your browser does not support this video format. </video>
Okay, let’s explain the meaning of each attribute in the video element. Among them, width and height will not be explained. We mainly talk about controls. As the name suggests, controls are controls, haha, they are controls such as video playback, volume pause, etc. The Chinese characters inserted in the middle of the video element, you must know that they are smart, and they prompt the user that the browser does not support the use of the video format.
It should be noted that to ensure that it is suitable for Safari browser, the video file must be of MP4 type. Ogg format videos are suitable for Firefox, Opera and Chrome browsers. Internet Explorer 8 does not support video elements. In IE 9, support for video elements using MPEG4 is provided.
Of course, if we are not sure what format of videos our browser supports, we can first check it. The detection method is available in another blog post. If you are interested, you can check it out. If you don’t want to be troublesome, what should you do? We can do this:
<video controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support this video format.
</video>
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, we will introduce the properties of several video tags.
1.autoplay: This property appears means that the video will automatically play when it is ready. Usage: autoplay=autoplay
2.controls: This property appears means that the user is displayed with controls, 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 ready to be played when the page is loaded. Usage: preload=auto
auto - Load the entire video after the page loads
meta - Only metadata is loaded after the page is loaded
none - video is not loaded after the page is loaded
Note: If autoplay is used, preload is ignored.
7.src: The URL to play the video