最近因为项目中用到了视频播放，所以使用了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()
});
}
就这样，还是可能会更换其他的方案。
