由于html5的出现，让网页中的视频、音频有了更加便捷的实现方式。但是video、audio标签只在IE 9+、Safari 3+、FireFox 4+、Opera 10+、Chrome 3+的浏览器版本得到了支持，并且各浏览器对于视频编码格式的支持不一致，这就需要我们考虑一个综合的实现方案，使得视频在不同浏览器中都能顺利播放，而且在老版本的浏览器中也能得到支持。
以下是结合项目经验，总结出的几种方案，与大家分享。
方案1、使用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
|
<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>
|
步骤二：在body显示视频位置添加如下代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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个视频之多，造成了页面加载慢，降低了用户体验。出于此，第二套方案诞生。
方案2、由于目前大多数设备的浏览器对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"
></embed>
</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>
|
说明：mac设备的Safari浏览器支持mp4格式，如果视频文件放在自己服务器，使用上述mp4格式的视频链接即可；也可以使用优酷的链接，优酷提供自动转码到iOS支持格式这一机制。例如优酷视频地址为http://player.youku.com/player.php/sid/XMzkwNzY2NTEy/v.swf，其iOS设备格式地址只需要改为http://v.youku.com/player/getRealM3U8/vid/XMzkwNzY2NTEy/type//video.m3u8 。
相关文章请考考《分析优酷HTML5地址》地址http://blog.xiaohai.co/archives/youku-html5/
统一采用优酷地址的好处是保证了两个页面的一致性，又减轻自己服务器压力，而且可以与优酷合作更好的营销。
页面访问的设备检测代码如下：
|
1
2
3
4
5
|
<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"
}
</script>
|
补充：安卓系统从Android 2.1版本就开始部分支持flash，可下载安装flash插件播放视频。Adobe Flash Player 10.1.92.8已经支持所有android 2.2智能手机。目前主流的安卓智能机系统都在版本2.3以上，android4.0已大行其道。因此无须对安卓设备采用单独的视频处理方案，安卓系统和windows系统采用同样的方案，使用flash播放器即可实现。
html5media是一个让video、audio标签在旧版IE中全面兼容的JavaScript类库，它不依赖于任何JavaScript框架。页面使用了html5media之后，当老版本的浏览器不支持HTML5时，它将会自动切换成Flash模式的flowplayer播放器尝试播放。。
使用html5media的方法：
1、首先在页面head部分加入如下脚本
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
你可以通过使用IE条件注释的方法，只在旧版IE浏览器中加载这条JS脚本。
2、然后在body部分使用audio或video标签，添加音频视频相关代码。
<!-- 视频媒体标签 -->
<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标签了。
扫一扫
1154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
