HTML5 video tag browser compatibility enhancement solution sharing, html5video

HTML5 video tag browser compatibility enhancement solution sharing, html5video

In the past, flash was the best video solution on the web page. As of now, flash is still the mainstream, such as those online music websites such as Youku and Xiami, flash is still used to provide the playback service. However, this situation will change with the development of HTML5. In terms of videos, HTML5 adds the video function to play videos online.

Using HTML5 video allows you to easily use JavaScript to control video content. The function is very powerful and the loading speed is faster with less code. In addition, the cross-platform performance is better, especially for tablets and mobile phones. For example, Apple products do not support flash and only support the video function in HTML5.

However, HTML5 compatibility is hard to solve. We can use video to play a video on a webpage, but visitors who use an early browser may not be able to watch the video normally. In addition, due to the historical origins of the video encoder, various browsers support different video formats. To solve these problems and use the HTML5 video function on a webpage, follow these three steps.

Step 1: Prepare many video files in advance

Due to copyright issues of the encoder, different browsers have different compatibility with video formats. Currently, no video format is compatible with all browsers. The only solution is to convert videos into multiple formats.

First, prepare a mp4 video, which can be used on Apple devices. Second, prepare an ogv video for Firefox. Finally, prepare a webm video, this can be used in Google browsers. Webm was proposed by Google. It is open-source and free, and is likely to be compatible with all browser video formats.

The trouble with preparing a multi-format browser is to convert the format. The video Conversion Tool has few functions in China, and the conversion format may not be the last two. In addition, the quality is not good, and it often needs to be registered for use. We recommend a foreign tool Online converter and a free Online video Conversion Tool. You don't even need to install software. You can directly select the target format, upload the video, and configure the parameters to convert it. If you do not have a proper tool, try it.

Step 2: Compile the HTML5 video code

Video in HTML5 is actually a simple tag that contains video-related information. Below I will give the specific code, and then briefly explain:

Copy XML/HTML Code to clipboard

1. <Video width = "800" height = "374">
2. <Source src00000000my_video.mp4 "type =" video/mp4 "/>
3. <Source src = "my_video.ogv" type = "video/ogg"/>
4. <Source src = "my_video.webm" type = "video/webm"/>
5. Your browser does not support the video function. Click here to download the video: <a href = "video. webm"> download the video </a>.
6. </Video>

The video tag indicates a video. The width and height attributes indicate the width and height (in pixels) of the video content ). The video tag can contain the source tag, which is used to indicate the format and type of the referenced video and video. To ensure downward compatibility, we also added a prompt in the video tag, which will not be displayed in browsers that support video tags. If not, the prompt will be displayed. Here, a video is added. If the browser does not support the video, you can choose to download it.
Note that your host must be able to handle video requests correctly. Make sure that the correct MIME Type is sent in the Content-Type header when your host is requested. If you do not know, you can consult the host service provider or add one by yourself. If the host supports. htaccess, you can add the following statement to the. htaccess file:

The Code is as follows:
AddType video/ogg. ogv
AddType video/mp4. mp4
AddType video/webm. webm

This is basically the case. It is relatively simple. For more details about how to use video, you can search for it or refer to the extended reading link in this article. I will not go into details here.

Step 3: compatibility with old browsers

As mentioned above, if the browser does not support video, the prompt content in video will be displayed. To deal with old browsers, we can replace the prompt content with the traditional flash. In this way, when the browser is not compatible with the video tag, the video of the flash version is displayed. For example:

Copy XML/HTML Code to clipboard

1. <Video width = "800" height = "374">
2. <Source src00000000my_video.mp4 "type =" video/mp4 "/>
3. <Source src = "my_video.ogv" type = "video/ogg"/>
4. <Object width = "800" height = "374" type = "application/x-shockwave-flash" data = "fallback.swf">
5. <Param name = "movie" value = "fallback.swf"/>
6. <Param name = "flashvars" value = "autostart = true & amp; file = video. flv"/>
7. </Object>
8. </Video>

Directly follow the original normal flash introduction method into the video tag. In this way, we have implemented cross-browser compatible video functions.