在日常项目中，html5的video标签还是比较常用到的，开发过程中，我们都会使用到，通过监听video标签的播放、暂停、停止等等来使用；
但我们是否也会遇到过，有些浏览器在显示这标签，兼容不太友好，video标签的封面是一层黑色的，而不是视频的封面图。
那么，此时，我们就得截取每个视频的封面图来，因为video标签有个属性poster是用来储存封面图地址的，但需注意先用本地视频，非本地视频会有跨域截取问题，这个得跟后端开发协作处理。
代码如下：
//视频------视频截图 ~~ 视频播放状态 ~~
constsetMedia=function(video,scale=0.8) {
//设置poster属性：（非本地视频资源会有跨域截图问题）
video.addEventListener('loadeddata',function(e) {
//拿到图片
letcanvas=document.createElement('canvas');
canvas.width=video.videoWidth*scale;
canvas.height=video.videoHeight*scale;
canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height);
letsrc=canvas.toDataURL('image/png');
//显示在dom，测试用
(function(flag=true) {
if(!flag) {return;}
letimg=document.createElement('img');
img.src=src;
document.body.appendChild(img);
})(0);
//设置属性
video.setAttribute('poster', src);
});
//-------------------------------------------------------------------------------------
//检测视频播放状态：
//播放按钮
letplayBtn=video.parentNode.childNodes[2].nextSibling;
//设置状态
functionvidplaySate(e) {
if(video.paused) {
video.play();
playBtn.classList.add('pause');
}else{
video.pause();
playBtn.classList.remove('pause');
}
}
//点击监听
video.addEventListener('click', vidplaySate,false);
playBtn.addEventListener('click', vidplaySate,false);
//结束监听
video.addEventListener('ended',function() {
playBtn.classList.remove('pause');
});
};
//视频：
letvideos=document.querySelectorAll('video');
videos.forEach((video)=>{
setMedia(video);
});
有什么错误或优化的地方，可以提出来，大家一起学习研究…
整个案例，可以访问本人github下载：https://github.com/xiexikang/html5-video-poster