转自http://www.aimks.com/html5-combined-with-flash-method-in-all-mainstream-video.html
Html5结合flash在所有主流播放器播放视频的方法
2014年1月12日 MK 前端设计
由于html5的出现,让网页中的视频、音频有了更加便捷的实现方式。 但是video、audio标签只在IE 9+、Safari 3+、FireFox 4+、Opera 10+、Chrome 3+的浏览器版本得到了支持,并且各浏览器对于视频编码格式的支持不一致,这就需要我们考虑一个综合的实现方案,使得视频在不同浏览器中都能顺利播放,而且在老版本的浏览器中也能得到支持。
以下是结合项目经验,总结出的几种方案,与大家分享。
方案一
使用VideoJS插件实现兼容
插件下载 http://videojs.com
使用新版VideoJS插件需要注意的是其使用方法:
使用步骤一 :head部分添加
1
2
< link href= "http://vjs.zencdn.net/c/video-js.css" rel= "stylesheet" />
< script src= "http://vjs.zencdn.net/c/video.js" ></ script>
说明 :上述javascript代码进适用于支持html5元素的IE版本,对于老版本的IE可以通过HTML5shiv来使不支持HTML5的浏览器支持HTML新标签。htnl5shiv主要解决HTML5提出的新的元素不被IE6/IE7/IE8识别,这些新元素不能作为父节点包裹子元素,且不能应用CSS样式。让CSS 样式应用在未知元素只需执行 document.createElement(elementName) 即可实现。html5shiv的工作原理也就是基于此。html5shiv的使用很简单,由于IE9是支持html5的,故只需要在head中添加如下代码即可:
1
2
3
< ! –[ if lt IE 9 ] >
< script type= "text/javascript" src= "http://html5shiv.googlecode.com/svn/trunk/html5.js" ></ script>
< ! [ endif] –>
使用步骤二 :body显示视频部分添加
1
2
3
4
< video id= "my_video_1" class = "video-js vjs-default-skin" controls preload= "auto" width= "275" height= "200" 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>
说明 :这里的webm格式是针对FF浏览器的播放格式。 目前VideoJS最新升级的版本v3.2.0,本人已测试的V3.0以上都不支持IE6/IE7/IE8/,因此我们这里采用老版本v2.0.2实现。 例如文章《VideoJs Version 3 doesn’t work on IE7 / IE8》 的相关说明请查看帮助文档http://help.videojs.com/ 使用方法是:
步骤一 :在页面head部分添加如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
< 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 VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady ( ) ; //可选。不写此函数默认为显示播放控制条,鼠标移开隐藏
/* ============= OR ============ */
// Setup and store a reference to the player(s).
// Must happen after the DOM is loaded
// You can use any library's DOM Ready method instead of VideoJS.DOMReady
/*
VideoJS.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 = VideoJS.setup(["example_video_1", "example_video_2", video3Element]);
// OR all videos on the page
var myManyPlayers = VideoJS.setup("All");
// After you have 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 are shown here.
/*
VideoJS.setupAllWhenReady({
controlsBelow: false, // Display control bar below video instead of in front of
controlsHiding: true, // Hide controls when mouse is not over the video
defaultVolume: 0.85, // Will be overridden by user's last volume if available
flashVersion: 9, // Required flash version for fallback
linksHiding: true // Hide download links when video is supported
});
*/
// Or as the second option of VideoJS.setup
/*
VideoJS.DOMReady(function(){
var myPlayer = VideoJS.setup("example_video_1", {
// Same options
});
});
*/
</ script>
《/ pre>
< strong> 步骤二</ strong> :在body显示视频位置添加如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< div class = "vd" >
<! -- Begin VideoJS -->
< div class = "video-js-box" >
< video id= "example_video_1" class = "video-js" width= "280" height= "210" controls preload= "none" poster= "http://www.feiliu.com/zt/img/20120417/img01.jpg" >
< source src= "http://www.feiliu.com/zt/video/mv01.mp4" type= 'video/mp4;' />
< source src= "http://www.feiliu.com/zt/video/test2.webm" type= 'video/webm'/>
< object id= "flash_fallback_1" class = "vjs-flash-fallback" width= "280" height= "210" type= "application/x-shockwave-flash" data= "http://www.feiliu.com/zt/flash/flowplayer-3.2.1.swf" >
< param name= "movie" value= "http://www.feiliu.com/zt/flash/flowplayer-3.2.1.swf" />
< param name= "allowfullscreen" value= "true" />
< param name= "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}]}' />
< img src= "http://www.feiliu.com/zt/img/20120417/img01.jpg" width= "280" height= "210" alt= "Poster Image" title= "No video playback capabilities." />
</ object>
</ video>
</ div>
<! -- End VideoJS -->
</ div>
说明 :这段视频代码外层以一个class=“vd”的div分隔区别。这样,支持html5的浏览器,会逐个检测提供的视频编码格式,直到找到可以播放的格式为止,如果所有格式都不能播放,则尝试使用flowplayer这个flash播放器(支持上述mp4格式)对视频进行解码。对于不支持html5的浏览器,也使用flash播放。因此,使用该方案只需要提供一个mp4格式的视频即可实现在所有浏览器上播放,不过flash播放器对mp4格式的文件解码较慢,为了照顾用户体验,故而上述我们又增加了一种flv格式的选择。
这个方法有一缺点:算上页面上的其他js效果,由于使用了大量的js,视频检测机制占用了很大的系统资源,而且我的项目页面上有11个视频之多,造成了页面加载慢,降低了用户体验。出于此,第二套方案诞生。
方案二
由于目前大多数设备的浏览器对flash支持的很好,所以考虑页面一还是使用object/embed传统标签嵌入视频,用Adobe Flash Player播放。而对于不支持flash的苹果设备,制作另一个页面二。然后根据通过js程序对User-Agent的判断给不同的设备浏览器用户显示不同的页面,优酷网曾采用这种模式。
页面一flash传统标签的代码 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< 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= "210" >
< 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" />
< param name= "bgcolor" value= "#ffffff" />
< param name= "play" value= "true" />
< param name= "loop" value= "true" />
< param name= "wmode" value= "transparent" />
< param name= "scale" value= "showall" />
< param name= "menu" value= "true" />
< param value= "true" name= "allowfullscreen" />
< param name= "devicefont" value= "false" />
< param name= "salign" value= "" />
< param name= "allowScriptAccess" value= "sameDomain" />
< 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= "210" align= "middle" width= "280" pluginspage= "http://www.macromedia.com/go/getflashplayer" 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" />
</ object>
</ div>
说明:这里使用的优酷的视频迷你播放器,减小了播放控制条的显示大小,比优酷普通播放器的画面大一些,用户体验好一些。
页面二针对mac设备代码 :
1
2
3
< video id= "my_video_1" class = "video-js vjs-default-skin" controls preload= "auto" width= "280" height= "210" 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>
html5media是一个让video、audio标签在旧版IE中全面兼容的JavaScript类库,它不依赖于任何JavaScript框架。页面使用了html5media之后,当老版本的浏览器不支持HTML5时,它将会自动切换成Flash模式的flowplayer播放器尝试播放。。
使用html5media的方法 :
1、首先在页面head部分加入如下脚本
1
< script src= "http://api.html5media.info/1.1.4/html5media.min.js" ></ script>
你可以通过使用IE条件注释的方法,只在旧版IE浏览器中加载这条JS脚本。 2、然后在body部分使用audio或video标签,添加音频视频相关代码。
1
2
3
4
<! -- 视频媒体标签 -->
< video src= "http://www.feiliu.com/zt/video/mv02.mp4" width= "480" height= "320" controls preload></ video>
<! -- 音频媒体标签 -->
< audio src= "http://www.feiliu.com/zt/audio/test.mp3" controls loop></ audio>
这样你便可以在IE6-IE8浏览器中使用audio和video标签了。