前端播放器兼容各版本浏览器

发表于 | 更新于 | 分类于 | 评论数：

LivePlayer H5播放器

官方文档

兼容性：谷歌/火狐/IE11

安装： npm install @liveqing/liveplayer

或：下载安装包

video.js

使用 videojs 可以兼容低版本 IE 浏览器。官方 git

IE 9-10

引入：

  • video.min.js：video.js的主要库文件
  • video-js.min.css ：样式

IE 8 的问题

需要额外引入：

  • videojs-ie8.min.js： 兼容IE8的video标签所需要的文件，在video的5.8版本里可以找到
  • video-js.swf：兼容IE8所需。当IE8时，MP4等会转为swf文件用flash进行播放。

下载

官方 5.18.4 版(支持ie8)

基本配置

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <title>liveplayer</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link href="plugins/video-js-5.18.4/video-js.min.css" rel="stylesheet">

    <!--[if IE 8]>
    <script src="plugins/video-js-5.18.4/ie8/videojs-ie8.min.js">
    </script>
    <![endif]-->

</head>

注意：由于是在 iframe 中播放 video，jquery 资源已经引入；否则，需要再引入 jquery 资源，建议使用 1.11.1 版本（IE8 下测试可行）。

body

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
<body>
    <!-- 初始化时 src如果为空会报错 -->
    <video id="player" class="video-js vjs-big-play-centered" controls preload="auto" poster="" data-setup='{"techOrder": ["flash", "html5"]}'>
        <p class="vjs-no-js">
            To view this video please enable JavaScript, and consider upgrading to a
            web browser that
            <a href="https://videojs.com/html5-video-support/" target="_blank">
            supports HTML5 video
            </a>
        </p>
    </video>
    <script src="plugins/video-js-5.18.4/video.min.js"></script>
    <script>
        /**
         * videojs 配置
         */
        videojs.options.flash.swf = "plugins/video-js-5.18.4/video-js.swf"; //flash播放器资源文件
        videojs.options.autoplay = true; //自动播放
        var url = '';
        /**
         * 测试数据
         */
        // url = '//vjs.zencdn.net/v/oceans.mp4';
       
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == 'url') {
                url = pair[1];
            }
        }

        if (console) console.log('播放 url:' + url);

        var myPlayer = videojs('player');
        myPlayer.src(url);
        myPlayer.play();
    </script>
</body>

其中“plugins/video-js-5.18.4”下的资源注意对应实际位置。

IE 的坑

VUE 打包添加 babel-polyfill 兼容 IE11

1、 npm 下载 babel-polyfill
2、 webpack 的 entry 中，配置中添加 babel-polyfill，如：

1
2
3
4
5
{vManager: [
    'babel-polyfill',
    'G:/iot/src/apps/vManager/vManager.js'
  ]
}

3、 main.js 第一行添加 import 'babel-polyfill';

判断浏览器是否低于 IE11

1
2
3
4
5
6
7
8
9
10
11
var isUnderIE11 = false;
if (!!window.ActiveXObject || "ActiveXObject" in window) { //是否是 IE
    if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
        console.log("is ie <11")
        var isUnderIE11 = true;
    } else {
        console.log("is ie =11")
    }
} else {
    console.log("is not ie")
}

兼容 IE9 以下浏览器

1
2
3
4
<!--[if lt IE 9]>
<script type="text/javascript" src="<l:asset path='html5shiv.js'/>"></script>
<script type="text/javascript" src="<l:asset path='respond.js'/>"></script>
<![endif]-->

placeholder 不生效

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
<!--[if lt IE 9]>
  <script>
      //解决 placeholder 不生效的问题
       $(function(){
           console.log("适配 IE placeholder");
      if( !('placeholder' in document.createElement('input')) ){
          $('input[placeholder],textarea[placeholder]').each(function(){
              var that = $(this),
                      text= that.attr('placeholder');
              if(that.val()===""){
                  that.val(text).addClass('placeholder');
              }
              that.focus(function(){
                          if(that.val()===text){
                              that.val("").removeClass('placeholder');
                          }
                      })
                      .blur(function(){
                          if(that.val()===""){
                              that.val(text).addClass('placeholder');
                          }
                      })
                      .closest('form').submit(function(){
                  if(that.val() === text){
                      that.val('');
                  }
              });
          });
      }
  });
  </script>
  <![endif]-->

注：这里的 placeholder 实际上修改了 val，如果在 input 标签未输入时，调用 $(‘input’).val()，则会输出 placeholder 的值，注意进行判断。

IE 9 及以下 ajax 跨域问题

引入资源文件：

1
2
3
<!--[if lt IE 9]>
    <script type="text/javascript"   src="<l:asset path='jquery-xdomainrequest.js'/>"></script>  
<![endif]-->

js:

1
2
3
4
5
6
7
8
9
10
11
12
13
//解决低版本 IE 跨域问题
   if (isUnderIE11) {
       jQuery.support.cors = true;
       jQuery.ajaxSetup({
           xhr: function() {
               if (window.ActiveXObject) {
                   return new window.ActiveXObject("Microsoft.XMLHTTP");
               } else {
                   return new window.XMLHttpRequest();
               }
           }
       });
   }

IE8：0 开头的数字自动按八进制处理 :)

1
2
3
4
5
6
7
var ssrc = res.ssrc;
//在IE8下，js解释器将0开头的数字解析为8进制数，先去掉ssrc前面的0
ssrc = ssrc.replace(/0*(.*)/, '$1');
//进制转换
var hex_ssrc = parseInt(ssrc).toString(16);
//前面补 0 成八位数并转换为大写
hex_ssrc = (Array(8).join('0') + hex_ssrc).slice(-8).toLocaleUpperCase();

IE 8/9 console.log 缺失

1
2
3
4
if(!window.console){
    window.console = {};
    window.console.log = function(){};
}

IE 对 CSS 中 :active 伪类兼容性问题

这个问题发生在 11 及以下版本的 IE。

点击级联元素的子元素，使其 :active 时，不能正常使父元素 :active，需要用 jquery 绑定 onmousedown 与 onmuserup 事件，分别 addClass(‘active’)、removeClass(‘active’)。