HTML5 combines flash to implement video files in all major browser compatible playback

Due to the advent of HTML5, the Web page of video, audio has a more convenient way to implement. However, video, audio tags only in IE + +, Safari, FireFox 4+, Opera + +, chrome, the browser version of the Internet has been supported, and the browser for the video encoding format support inconsistent, which requires us to consider a comprehensive implementation of the scheme, This allows the video to play smoothly in different browsers and is supported in older versions of the browser.

The following is a combination of project experience, summed up several programs, to share with you.

Scenario 1, using the VIDEOJS plug-in implementation of compatible plug-in download http://videojs.com

The use of the new Videojs plugin is to be aware of how it is used:

Use Step One: Head section add

<link href= "Http://vjs.zencdn.net/c/video-js.css" rel= "stylesheet" >  <script src= "http/ Vjs.zencdn.net/c/video.js "></script>  

Description: The above JavaScript code is used to support the HTML5 element of the IE version, for older versions of IE can be html5shiv to enable browsers that do not support HTML5 HTML new tags. Htnl5shiv main Solution The new elements proposed by HTML5 are not recognized by IE6/IE7/IE8, these new elements cannot wrap child elements as parent nodes, and CSS styles cannot be applied. It is possible to apply CSS styles to unknown elements by simply performing document.createelement (elementname). Html5shiv works based on this. The use of Html5shiv is very simple, because IE9 is supported HTML5, so only need to add the following code in the head:

<!–[if lt IE 9]>       <script type= "Text/javascript" src= "http://html5shiv.googlecode.com/svn/trunk/ Html5.js "></script>   <![ Endif]–>  

Use Step two: Body Display video section add

<video id= "My_video_1" class= "Video-js Vjs-default-skin" Controls preload= "Auto" width= "275" height= "poster=" Http://www.feiliu.com/zt/img/20120417/preview.jpg "data-setup=" {} ">      <source src=" http://www.feiliu.com /zt/video/mv00.mp4 "type= ' Video/mp4 '/>      <source src=" HTTP://WWW.FEILIU.COM/ZT/VIDEO/TEST2.WEBM "Type= ' VIDEO/WEBM '/>  </video>  

Description: The WEBM format here is for the FF browser's playback format.

Currently VIDEOJS the latest upgrade version v3.2.0, I have tested the V3.0 above are not supported ie6/ie7/ie8/, so we use the old version of v2.0.2 implementation.
For example, for a description of the article "Videojs Version 3 doesn ' t work on IE7/IE8" see the Help documentation http://help.videojs.com/
Use this method:

Step One: Add the following code to the Head section of the page:

<link rel= "stylesheet" href= "Css/video-js.css" type= "Text/css"/> <script type= "Text/javascript" src= "js/ Video.js "></script> <script type=" Text/javascript ">//Must come after the Video.js library//ADD Vid Eojs to all video tags on the page when the DOM was Ready videojs.setupallwhenready ();//optional.  Do not write this function by default to show the playback control bar, mouse off hidden//============= or ============ *//Setup and store a reference to the player (s). Must happen after the DOM was loaded//You can use any library's Dom ready method instead of Videojs.domready */V        Ideojs.domready (function () {//Using the video ' s ID or element var Myplayer = Videojs.setup ("Example_video_1"); OR using an array of video Elements/ids//Note:it Returns an array of players var mymanyplayers = Videoj      S.setup (["Example_video_1", "Example_video_2", Video3element]);      OR all videos in the page var mymanyplayers = Videojs.setup ("All"); After you are references to your players You can ... (example) Myplayer.play ();  Starts playing the video for this player.  }); */* ========= SETTING Options ========= *///Set options when SETTING up the videos.    The defaults is shown here. /* Videojs.setupallwhenready ({controlsbelow:false,//Display control bar below video instead of in front of Cont Rolshiding:true,//Hide controls when mouse are not over the video defaultvolume:0.85,//'ll be overridden by user ' s last volume if available flashversion:9,//Required Flash version for fallback linkshiding:true//Hide Downloa  D links when video is supported}); *//As the second option of Videojs.setup/* Videojs.domready (function () {var myplayer = Videojs.setup ("Exa  Mple_video_1 ", {//Same options});  });   */</script>

Step Two: Add the following code to the body display video location:

Video id= "Example_video_1" class= "Video-js" width= "280" height= "" Controls preload= "None" poster= "/http Www.feiliu.com/zt/img/20120417/img01.jpg "> <source src=" http://www.feiliu.com/zt/video/mv01.mp4 "type=" vide O/mp4, '/> <source src= ' http://www.feiliu.com/zt/video/test2.webm ' type= ' video/webm '/> <obje CT id= "flash_fallback_1" class= "Vjs-flash-fallback" width= "280" height= "All" type= "Application/x-shockwave-flash" Data= "http://www.feiliu.com/zt/flash/flowplayer-3.2.1.swf" > <param name= "movie" Value= "http://www.feiliu.co m/zt/flash/flowplayer-3.2.1.swf "/> <param name=" allowfullscreen "value=" true "/> <param nam E= "Flashvars" Value= ' config={"playlist": ["Http://www.feiliu.com/zt/img/20120417/img01.jpg", {"url": "/HTTP// www.feiliu.com/zt/video/mv01.flv "," AutoPlay ": false," autobuffering ": True}]} '/>  </object> </video> </div>   <!--End Videojs-</div>

Description: This video code layer is separated by a class= "Vd" div. In this way, browsers that support HTML5 will detect the provided video encoding format individually until a format can be played, and if all formats are not playable, try decoding the video using the FlowPlayer Flash Player (which supports the MP4 format above). For browsers that do not support HTML5, flash playback is also used. Therefore, the use of this scheme only need to provide a MP4 format video can be played in all browsers, but Flash Player to MP4 format file decoding is slow, in order to take care of the user experience, so we added a choice of FLV format.

This method has a drawback: count on the page of other JS effect, because of the use of a large number of JS, video detection mechanism occupies a lot of system resources, and my project page has more than 11 video, resulting in slow page loading, reducing the user experience. For this reason, the second set of programs was born.

Scenario 2, since most devices currently have a very good browser for Flash, consider page one or embed video with object/embed legacy tags and play with Adobe Flash player. For Apple devices that do not support flash, make another page two. Then according to the user-agent through the JS program to different devices browser users display different pages, Youku used this model.

Page a flash traditional tag code:

<div class= "VD" > <object classid= "clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase= "HTTP +/ fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0 "width=" 280 "height=" > < param name= "movie" Value= "http://static.youku.com/v/swf/qplayer.swf?winType=adshow&VideoIDS=XMzg2NzQ2OTU2 &isautoplay=false&isshowrelatedvideo=false "/> <param name=" quality "value=" High "/> &L T;param name= "bgcolor" value= "#ffffff"/> <param name= "Play" value= "true"/> <param name= "Lo Op "value=" true "/> <param name=" wmode "value=" Transparent "/> <param name=" scale "value=" sh Owall "/> <param name=" menu "value=" true "/> <param value=" true "Name=" allowFullScreen "/&gt          ; <param name= "Devicefont" value= "false"/> <param name= "salign" value= ""/> <param name= "a Llowscriptaccess "value=" Samedomain "/&Gt <param name= "Flashvars" value= "isshowrelatedvideo=false&showad=0&show_pre=1&show_next=1& Isautoplay=false&isdebug=false&userid=&wintype=interior&playmovie=true&mmcontrol=false &mmout=false&recordcode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999 "/ > <embed height= "align=" Middle "width=" 280 "pluginspage=" HTTP://WWW.MACROMEDIA.COM/GO/GETF Lashplayer "type=" Application/x-shockwave-flash "name=" AprilFools "flashvars=" Isshowrelatedvideo=false&showad =0&show_pre=1&show_next=1&isautoplay=false&isdebug=false&userid=&wintype=interior& Playmovie=true&mmcontrol=false&mmout=false&recordcode= 1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999 "src=" http://static.youku.com/v/swf/ Qplayer.swf?wintype=adshow&videoids=xmzg2nzq2otu2&isautoplay=false&isshowrelatedvideo=false "menu=" True "play=" true "AllowfullscreeN= "true" allowscriptaccess= "Samedomain" quality= "high" wmode= "Transparent" bgcolor= "#fff" ver= "10.0.0" ></   Embed> </object> </div>

Description: Use the Youku video mini player here, reduce the display size of the playback control bar, more than Youku normal player screen, user experience better.

Page two for Mac device code:

<video id= "My_video_1" class= "Video-js Vjs-default-skin" Controls preload= "Auto" width= "280" height= "poster=" Http://www.feiliu.com/zt/img/20120417/preview.jpg "data-setup=" {} ">      <source src=" http://www.feiliu.com /zt/video/mv01.mp4 "type= ' Video/mp4 '/>  </video>  

Description: The MAC device's Safari browser supports the MP4 format, and if the video file is placed on its own server, use the video link in the MP4 format above, or use the Youku link, Youku provides automatic transcoding to the iOS support format mechanism. For example, the Youku video address is http://player.youku.com/player.php/sid/XMzkwNzY2NTEy/v.swf, and its iOS device format address needs to be changed to http://v.youku.com/ Player/getrealm3u8/vid/xmzkwnzy2ntey/type//video.m3u8.

Related articles please test "Analysis of Youku HTML5 address" address http://blog.xiaohai.co/archives/youku-html5/

The advantage of unified use of Youku address is to ensure the consistency of two pages, but also reduce their own server pressure, but also with the Youku cooperation better marketing.

The device detection code for page access is as follows:

<script type= "Text/javascript" >      if (/iphone|ipad|ipod/i). Test (navigator.useragent) | | (/mac68k| macppc| macintosh| macintel/i). Test (Navigator.platform)) {           window.location.href = "# # #page2. html"      }  

Add: Android system from the Android 2.1 version of the start part of the support Flash, can download install Flash plugin play video. Adobe Flash Player 10.1.92.8 already supports all Android 2.2 smartphones. At present the mainstream Android Intelligent machine system is in version 2.3 above, android4.0 already big line. As a result, there is no need for a separate video processing solution for Android devices, and the same solution for Android and Windows systems can be achieved with flash players.

Html5media is a JavaScript class library that allows video and audio tags to be fully compatible with older versions of IE, and does not rely on any JavaScript framework. After the page uses Html5media, when the old version of the browser does not support HTML5, it will automatically switch to the flash mode of the FlowPlayer player to try to play.

Ways to use Html5media:

1, first in the page Head section to add the following script
<script src= "Http://api.html5media.info/1.1.4/html5media.min.js" ></script>
You can only load this JS script in the old version of IE by using the IE conditional annotation method.
2. Then use the audio or video tag in the body section to add the relevant code for the AV.
<!--video Media labels--
<video src= "Http://www.feiliu.com/zt/video/mv02.mp4" width= "480" height= "+" Controls preload></video>
<!--Audio Media labels--
<audio src= "Http://www.feiliu.com/zt/audio/test.mp3" Controls loop></audio>
This allows you to use the audio and video tags in the Ie6-ie8 browser.

Transferred from: http://blog.csdn.net/freshlover/article/details/7535785

HTML5 combines flash to implement video files in all major browser compatible playback