当前位置：移动技术网 > IT编程>网页制作>CSS > html视频播放器兼容处理问题详细讲解

html视频播放器兼容处理问题详细讲解

2018年01月07日 | 移动技术网IT编程 | 我要评论

由于html5的出现，让网页中的视频、音频有了更加便捷的实现方式。但是video、audio标签只在IE 9+、Safari 3+、FireFox 4+、Opera 10+、Chrome 3+的浏览器版本得到了支持，并且各浏览器对于视频编码格式的支持不一致，这就需要我们考虑一个综合的实现方案，使得视频在不同浏览器中都能顺利播放，而且在老版本的浏览器中也能得到支持。

以下是结合项目经验，总结出的几种方案，与大家分享。

方案1、使用VideoJS插件实现兼容插件

使用新版VideoJS插件需要注意的是其使用方法：

使用步骤一：head部分添加

<link href="https://vjs.zencdn.net/c/video-js.css" rel="stylesheet">  
<script src="https://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中添加如下代码即可：

<!–[if lt IE 9]>   
    <script type="text/javascript" src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>   
<![endif]–>

使用步骤二：body显示视频部分添加

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="275" height="200" poster="https://www.feiliu.com/zt/img/20120417/preview.jpg" data-setup="{}">  
    <source src="https://www.feiliu.com/zt/video/mv00.mp4" type='video/mp4'/>  
    <source src="https://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》的相关说明请查看帮助文档

使用方法是：

步骤一：在页面head部分添加如下代码：

<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显示视频位置添加如下代码：

<p class="vd">  
    <!-- Begin VideoJS -->      
    <p class="video-js-box">  
    <video id="example_video_1" class="video-js" width="280" height="210" controls preload="none" poster=https://www.2cto.com/uploadfile/2017/1228/20171228105510517.jpg">  
        <source src="https://www.feiliu.com/zt/video/mv01.mp4" type='video/mp4;' />  
        <source src="https://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="https://www.feiliu.com/zt/flash/flowplayer-3.2.1.swf">  
        <param name="movie" value="https://www.feiliu.com/zt/flash/flowplayer-3.2.1.swf" />  
        <param name="allowfullscreen" value="true" />  
        <param name="flashvars" value='config={"playlist":[https://www.2cto.com/uploadfile/2017/1228/20171228105510517.jpg", {"url": "https://www.feiliu.com/zt/video/mv01.flv","autoPlay":false,"autoBuffering":true}]}' />  
        <img src=https://www.2cto.com/uploadfile/2017/1228/20171228105510517.jpg" width="280" height="210" alt="Poster Image"  title="No video playback capabilities." />  
      </object>  
    </video>  
    </p>  
    <!-- End VideoJS -->  
</p>

说明：这段视频代码外层以一个class=“vd”的p分隔区别。这样，支持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传统标签的代码：

<p class="vd">  
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="280" height="210">  
        <param name="movie" value="https://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="https://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="https://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>       
</p>

说明：这里使用的优酷的视频迷你播放器，减小了播放控制条的显示大小，比优酷普通播放器的画面大一些，用户体验好一些。

页面二针对mac设备代码：

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="280" height="210" poster="https://www.feiliu.com/zt/img/20120417/preview.jpg" data-setup="{}">  
    <source src="https://www.feiliu.com/zt/video/mv01.mp4" type='video/mp4'/>  
</video>

说明：mac设备的Safari浏览器支持mp4格式，如果视频文件放在自己服务器，使用上述mp4格式的视频链接即可;也可以使用优酷的链接，优酷提供自动转码到iOS支持格式这一机制。例如优酷视频地址为https://player.youku.com/player.php/sid/XMzkwNzY2NTEy/v.swf，其iOS设备格式地址只需要改为https://v.youku.com/player/getRealM3U8/vid/XMzkwNzY2NTEy/type//video.m3u8 。

统一采用优酷地址的好处是保证了两个页面的一致性，又减轻自己服务器压力，而且可以与优酷合作更好的营销。

页面访问的设备检测代码如下：

<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="https://api.html5media.info/1.1.4/html5media.min.js"></script>

2、然后在body部分使用audio或video标签，添加音频视频相关代码。

<!-- 视频媒体标签 -->
<video src="https://www.feiliu.com/zt/video/mv02.mp4" width="480" height="320" controls preload></video>
<!-- 音频媒体标签 -->
<audio src="https://www.feiliu.com/zt/audio/test.mp3" controls loop></audio>

这样你便可以在IE6-IE8浏览器中使用audio和video标签了。

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

CSS实现loading小动画

纯css实现loading动画相信各位上网过程中最不希望看到的就是加载中不停转圈圈的画面了那么他是怎么实现的呢？... [阅读全文]
CSS3 - 文本超出隐藏显示省略号（单行 / 多行）

单行如果实现单行文本的溢出显示省略号（…）应该都知道用 text-overflow:ellipsis 属性来，当... [阅读全文]
css counter计数器与content总结

content属性早在css2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。content属性现在已经得到大部分浏览器的支持，关于... [阅读全文]
前端学习笔记（6）之css盒模型的细节知识点汇总

css盒模型细节知识点总结只要元素有浮动，尽量保证浮动元素都在一个父元素里面。高度塌陷：子元素浮动，而父元素未设... [阅读全文]
前端学习笔记（4）之css背景属性合集

背景模块背景颜色background-color背景图：background-image：url（）；背景图平铺... [阅读全文]
PC端页面适配到移动端的问题(自动缩放PC端页面)

有时候在移动端开发页面的时候会发现因为移动端分辨率大导致页面视图被缩放的很小,这个时候就需要适配了话不多说直接贴... [阅读全文]
新版知乎x-zse-86加密破解分析

知乎x-zse-86加密破解新版知乎加密破解仅用于研究和学习使用新版本知乎使用headers中的x-zse-86... [阅读全文]
Flex 使用场景(二）

Flex 就是容器和轴。容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴，可以说 flex 布... [阅读全文]
css3实现边框圆角内凹效果

我们知道在边框的四个角实现圆角可以用 border-radius 实现, 如果在边框中心实现边框的内凹效果呢?效... [阅读全文]
【css】利用line-height实现垂直居中

替换元素与非替换元素<body> <div>hello</div> &l... [阅读全文]

网友评论


验证码：

html视频播放器兼容处理问题详细讲解

2018年01月07日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论