videojs动态封面_HTML5的多个video标签：截取视频源的封面图poster，监听视频播放状态的功能；...

在日常项目中，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'