video的一些使用笔记

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

禁止下载

<video class="video_con" src=""controls  controlslist="nodownload  nofullscreen noremoteplayback"oncontextmenu ="return false"id="video"></video>

$('#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。
可以同时加上这两个属性：
<video muted src="" autoplay webkit-playsinline playsinline ></video>
有些 app 还需要支持内联播放的模式，这时候需要加上：
webview.allowsInlineMediaPlayback = YES;

移动版无法播放或卡顿

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

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();
    }
})