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

How to enhance the browser compatibility of video tags in HTML5, I believe that many inexperienced people do not know what to do. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

In the past, flash was the best way to solve video on the web, but so far it is still mainstream. Video sites like Youku and online music sites like Xiami still use flash to provide playback services. But this situation will change with the development of HTML5. As far as video is concerned, HTML5 has added video to realize the function of playing video online.

Using video of HTML5, it is very convenient to use JavaScript to control the video content and so on. The function is very powerful, and there is less code to speed up the loading speed. In addition, cross-platform is better, especially some tablets, mobile phones and so on. For example, Apple's products do not support flash and only support the video function in HTML5.

But HTML5 compatibility is a tough problem. We can use video to play video on a web page, but visitors using early browsers may not be able to watch the video properly. In addition, different browsers support different video formats due to the history of video encoders. To deal with these problems, if you want to use the HTML5 video function in a web page, you can follow the following three steps.

Step 1: prepare many format video files in advance

Due to the copyright problem of the encoder, different browsers have different compatibility with video formats. At present, no video format is compatible with all browsers, and the only solution is to convert the video to multiple formats.

First, prepare a video in mp4 format, which can be used on Apple devices; secondly, prepare a video in ogv format to be used in Firefox; finally, prepare a video in webm format, which can be used in Google browser and so on. Webm is proposed by Google, open source, free, and is likely to become a video format compatible with all browsers.

The trouble with preparing a multi-format browser is to convert the format. The domestic function of video conversion tools is relatively less, the conversion format may not have the above two, and the quality is mixed, often need to register in order to use. Recommend a foreign tool Online converter, online free video conversion tool. Do not even need to install the software, directly select the appropriate target format, and then upload the video, configure the parameters can be converted out. Friends who don't have the right tools can give it a try.

Step 2: write the corresponding HTML5 video code

Video in HTML5 is actually a simple tag that contains some video-related information. Let me give the specific code directly, and then explain it briefly:

XML/HTML Code copies content to the clipboard

Your browser does not support video, click here to download video: download video.

The video tag indicates that this is a video, and the width and height attributes represent the width and height of the video content (in pixels). Video tags can contain source tags, and source tags are used to indicate the format and type of referenced videos and videos. To ensure downward compatibility, we have also added a prompt to the video tag, which is not displayed in browsers that support video tags, but will be displayed if it is not supported. Here, also added a video download address, if the browser does not support, you can choose to download to watch.

In particular, it is important to note that your host must be able to handle these video requests correctly. Make sure your host sends the correct MIME type in the Content-Type header when asked for these videos. If you are not sure, you can consult the host service provider, or you can add it yourself. If the host supports .htaccess, you can add the following statement to the .htaccess file:

The code is as follows:

AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm

Roughly like this, relatively simple, more specific about the use of video, you can search, you can also see this article to expand the reading link, I will not repeat it here.

Step 3: make compatibility for older browsers

As mentioned earlier, if the browser does not support video, the prompts in video will be displayed. So for old browsers, we can replace this prompt with traditional flash. In this way, when the browser is not compatible with video tags, the flash version of the video will be displayed. For example:

XML/HTML Code copies content to the clipboard

It can be written directly into the video tag in accordance with the original normal flash introduction method. In this way, we have implemented the use of cross-browser compatible video functions

After reading the above, do you know how to improve the browser compatibility of video tags in HTML5? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.