video的一些使用笔记

参看：https://www.jianshu.com/p/1af...

禁止下载

$('#video').bind('contextmenu',function() { return false; });
$('#video')[0]['disablePictureInPicture'] = true; 

关闭视频弹框

处理视频弹框时，一般把链接放按钮的data-src上，关闭视频弹框时，把video的src给置空，为了避免关闭之后，视频继续播放

//打开视频弹框
document.getElementById('video').src = $(this).attr('data-src');
document.getElementById('video').play();
//关闭视频弹框
document.getElementById('video').src = '';
document.getElementById('video').pause();

视频自动播放autoplay

autoplay需要和muted属性一起使用才可以自动播放，此时视频是静音

安卓浏览器不能在H5页面播放视频playsinline

在一些安卓浏览器播放视频的时候，不能在H5页面播放视频，系统会自动接管视频。
添加内联播放属性；
如果需要在H5页面内播放视频，需要在video标签加上webkit-playsinline，在一些ios上还需要加上playsinline。
可以同时加上这两个属性：

有些app还需要支持内联播放的模式，这时候需要加上：
webview.allowsInlineMediaPlayback = YES;

移动版无法播放或卡顿

可能是视频被接管的原因，移动端播放视频有时候无法直接播放或有卡顿的现象。
启用H5内核H5播放器;
在video标签中添加启动H5播放的属性：x5-video-player-type="h5"
如：

video视频满屏

video标签加上style="width= 100%; height=100%; object-fit: fill"
但有兼容问题，微信浏览器存在视频定位问题

监听视频结束

//js写法
document.getElementById("video").addEventListener('ended', function () {
}, false);
//jQuery写法
$('#video').on('ended',function(){
     console.log('play over!');
})

video一些参数

object-fit: fill   视频内容充满整个video容器。style="object-fit:fill"
muted：当设置该属性后，它规定视频的音频输出应该被静音
x5-video-player-type="h5":  启用x5内核H5播放器
x5-video-player-fullscreen="true" 全屏设置。ture和false的设置会导致布局上的不一样
x5-video-orientation="portraint"：声明播放器支持的方向，可选值landscape 横屏,portraint竖屏。默认值portraint。无论是直播还是全屏H5一般都是竖屏播放，但是这个属性需要x5-video-player-type开启H5模式
webkit-playsinline="true" x5-playsinline="true" playsinline="true"：内联播放，避免跳全屏播放
x-webkit-airplay="true" ，兼容安卓微信跳全屏播放的问题

ios黑屏问题

ios 在播放视频时，会出现短暂的黑屏，然后正常显示。
解决：在视频上层覆盖一个 添加一个p并用一张图片填充，制造播放前加载假象。然后监听事件 timeupdate ，视频播放有画面时移除这个“p块”

video.addEventListener('timeupdate',function(){
    if(video.currentTime > 0.1){
        posterImg.hidden();
    }
})