移动端Web视频播放兼容处理

最近因为项目中用到了视频播放，所以使用了HTML5中的video标签，但是遇到了的各种兼容问题。背景：项目运行在支付宝内的网页，被第三方测试机构测出安卓和IOS中视觉不一样。不得不满足他们的要求。

1. video标签有一个层级问题，永远大于页面其他元素的层级。这样就会导致如果页面有其他内容需要展示在页面上方的时候，比如弹层之类的，这样就会出现以下的情况。

视频播放时点开其他的弹层（安卓）

在安卓机型中，如果在视频的播放中的情况点开了其他置于视频上方的元素时，此时视频会挡住点开的元素，不管弹层的层级多高。PS: IOS系统中没有此问题。解决思路大概可如下：

1. 暂停播放中的视频
2. 隐藏视频标签
3. 写一个和视频大小一样的标签占位在原视频标签处，里面可放一张视频的封面图
4. 显示其他弹出层内容
5. 关闭弹层时，隐藏占位的封面图，显示视频标签并播放

2. 视频在播放的情况下滚动页面，当视频消失在视线中的时候安卓和IOS的视觉效果不一样。IOS中会正常消失，而在安卓系统中会自动置顶在页面顶端。

安卓中视频自动置顶
解决思路：因为此问题是在视频播放的时候才会有这个问题，所有通过获取视频元素距离窗口的高度，当即将离开视线的时候暂停视频。最终还是失败：
在安卓中慢速的滑动时是没有问题的，视频暂停，不再置顶，正常的离开视线。但是当很快速的滑动时，还是控制不了它置顶在页面的顶部。下面的代码也考虑用了时间差来判断速度控制暂时，不过还是会先出现置顶，后才会暂停视频。
IOS中在自带的浏览器中是没有问题的，但是在支付宝的内置浏览器 中出现了问题，在手指滑动屏幕后，页面自动滚动的过程中，监听不了scroll事件，所以导致高度的计算值一直没有变化，当滚动停止后才更新高度。这样跟预期的想法也差了很远，所以这个方案也被kill。

  var touchHight = 0
  var dateTime = new Date()
  $('.warper').on('scroll',function(){
    var v =  $('#video-active').offset().top - $(window).scrollTop();
    var touchHightDiff = touchHight - v
    var timeDiff = new Date() - dateTime
        touchHight = v
        dateTime = new Date()

    if(timeDiff < 25 && touchHightDiff > 20){
      $('#video-active').trigger('pause')
      return
    }
    if(v<30 ){
      $('#video-active').trigger('pause')
    }else if(v>30){
      $('#video-active').trigger('play');
    }
  })

3. 考虑播放视频的时候全屏展示，退出就暂停视频播放。这样就不会有很大的视觉差别了。

这里引用第三方插件video.js,虽然播放的时候全屏显示，但是又有其他问题了。
安卓在退出全屏暂停播放后，再次点击播放的时候不会全屏了，正常播放了。这又和预期的效果不一样了，所以每次播放前视频都是隐藏，用图片代替，点击播放的时候再显示视频并全屏播放，暂停时再次隐藏视频，显示代替图片。这个过程中会有一些问题，安卓在退出全屏后并没有如期隐藏；IOS在暂停后再次播放的时候视频没有了画面。经过多次调试在全屏开始前都增加一个延时定时器会解决相关问题。如下，兼容代码：

// 播放视频 视频播放时开启全屏播放
function videoPlayer(){
    // 视频初始化
    var myPlayer = videoJs('#video',{
        width:'100%',
        controls:false,
        autoplay:false
    });
    // 视频模拟点击开始缓存视频
    myPlayer.play();
    setTimeout(function(){
        myPlayer.pause();
    },300)
    
     // 点击替代图片全屏播放视频
    $("#videoPoster .play").click(function() {
         // 隐藏替代图片 显示视频
        $('#videoPoster').hide();
        $('#video').show()
        // 全屏播放
        setTimeout(function(){
            myPlayer.requestFullscreen();
            myPlayer.play();
        },300)
    });  
    // 视频退出全屏会自动暂停触发暂停事件
    myPlayer.on("pause", function(){
        // 显示替代图片 隐藏视频
        $('#videoPoster').show()
        $('#video').hide()  
    });
}

就这样，还是可能会更换其他的方案。