How to display videos in HTML5? HTML5 video playback demo

Comments: Most videos are displayed through plug-ins (such as Flash. However, not all browsers have the same plug-ins. HTML5 stipulates a standard method to include videos through video elements. You can use this method to play a video today, most videos are displayed through plug-ins (such as Flash. However, not all browsers have the same plug-ins.

HTML5 specifies a standard method 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 files with H.264 video encoding and AAC audio encoding
3. WebM = WebM file with VP8 video encoding and Vorbis Audio Encoding

How to display videos in HTML5? Example:

The Code is as follows:
<Video src = "demo.mp4" width = "500" height = "250" controls = "controls"> your browser does not support this video format. </Video>

Okay, now let's explain the meaning of each attribute in the video element. The width and height are not explained here. Here we mainly talk about controls. As the name suggests, controls is the controls. Haha, controls such as video playback and volume pause. The Chinese characters inserted in the middle of the video element, which you must know, are prompted that the user's browser does not support video format.

Make sure that the video file type must be MP4 for the Safari browser. Ogg videos are applicable to Firefox, Opera, and Chrome browsers. Internet Explorer 8 does not support video elements. In IE 9, video elements of MPEG4 are supported.

Of course, if you are not sure about the formats supported by your browser, You can first check the formats of the videos. The detection methods are available in another blog post. If you are interested, you can check them. What should I do if I don't want to bother? We can do this:

The Code is as follows:
<Video width = "500" height = "250" 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 be used to link different video files. The browser will use the first recognizable format, so we only need to prepare several videos of different formats.
Next, we will introduce the attributes of several video tags,
1. autoplay: This attribute indicates that the video will be automatically played after it is ready. Usage: autoplay = "autoplay"
2. controls: When this attribute is displayed, a control, such as a play button, is displayed to the user. Usage: controls = "controls"
3. height: Set the height.
4. width: Set the width.
5. loop: Automatic replay. Usage: loop = "loop"
6. preload: the video is loaded and ready to play during page loading. Usage: preload = "auto"
Auto-load the entire video after the page is loaded
Meta-only metadata is loaded after the page is loaded.
None-videos are not loaded after the page is loaded.
NOTE: If autoplay is used, preload is ignored.
7. src: Specifies the url of the video to be played.