In the past, Flash is the best way to solve the video on the web, as of now mainstream, such as Youku and other video sites, shrimp, such as online music website, 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 enable online playback.
Using HTML5 's video makes it easy to use JavaScript to control and so on, and so on, the function is very powerful, and the code less speed up loading. In addition, cross-platform better, especially some tablets, mobile phones and so on. For example, Apple's products do not support Flash support for video features only in HTML5.
But the compatibility issue with HTML5 is a mishap, we can use video to play videos on our web pages, but visitors with early browsers may not be able to watch the video properly. In addition, the historical origins of video encoders result in different video formats supported by various browsers. To deal with these issues and to use the HTML5 video feature in your Web pages, follow these three steps.
The first step: Prepare a lot of format video files in advance
Because of the copyright problem of the encoder, the compatibility of different browsers to the video format is different. Currently, there is no video format compatible with all browsers, the only solution is to convert the video into a variety of formats.
The first thing to do is to prepare a video in a MP4 format that can be used in an Apple device, and then prepare the video in OGV format for use in Firefox, and finally prepare the WEBM format video, which can be used in Google browsers. WEBM was proposed by Google, open source, free, and likely to become a compatible video format for all browsers.
The trouble with preparing a multiple-format browser is to transform the format. Video conversion tools in the domestic function is relatively small, conversion format may not have the top two, and the quality of good and bad, often need to register to use. Recommend a foreign tool online converter, free video conversion tool. Do not even install the software, directly select the appropriate target format, and then upload video, configure the parameters can be converted. A friend who doesn't have the right tools can give it a try.
Step two: Write the corresponding HTML5 video code
The video in HTML5 is actually a simple label that contains some information about the videos. I'll just give you the specific code, and then I'll explain briefly:
<video width= "height=" "374" >
<source src= "My_video.mp4" type= "Video/mp4"/>
<source src= "MY_VIDEO.OGV" type= "Video/ogg"/>
<source src= "MY_VIDEO.WEBM" type= "VIDEO/WEBM"/>
Your browser does not support video features, click here to download video: <a href= "video.webm" > download videos </a>.
</video>
The video label indicates that this is a visual, and the width and height properties represent the width and height (in pixels) of the video content. The video label can contain the source label, which is used to represent the format and type of the referenced videos and videos. To ensure downward compatibility, we also add a hint to the video tag that is not displayed in the browser that supports the display, if it is not supported. Here, also added a video download address, if the browser does not support, you can let users choose to download the next look.
In particular, you need to be aware that your host must be able to handle some of these video requests correctly. Make sure your host is asked for these videos and will send the correct MIME type in Content-type hair. If you are not clear, you can consult the host service provider, you can add yourself. If the host supports. htaccess, you can add the following statement in the. htaccess file:
AddType Video/ogg. OGV
AddType video/mp4. mp4
AddType VIDEO/WEBM. webm
Basically is this, relatively simple, more specific about the use of video, you can search, you can see this article to expand the reading link, here no longer repeat.
Step three: Compatibility for older browsers
As I said earlier, if the browser does not support video, it will show the contents of the prompts in the display. So to deal with old browsers, we can use traditional flash to replace this hint content. In this way, when the browser is not compatible with the video tag, it will display a flash version of the videos. For example:
<video width= "height=" "374" >
<source src= "My_video.mp4" type= "Video/mp4"/>
<source src= "MY_VIDEO.OGV" type= "Video/ogg"/>
<object width= "height=" "374" type= "Application/x-shockwave-flash" Data= "fallback.swf" >
<param name= "movie" value= "fallback.swf"/>
<param name= "Flashvars" value= "autostart=true&file=video.flv"/>
</object>
</video>
Just follow the usual Flash introduction method into the video tag. This enables the use of Cross-browser-compatible video features.
Reference articles and extended readings
Cross Browser compatible HTML5 videos
WebM Format Baidu Encyclopedia
HTML5 Video @w3schools
