写在前面：因为项目是用vue.js框架实现的，所以下面的代码是vue.js语法。首先看Dom元素（视频相关的属性和事件）：其次，代码的javascript部分：createPreImg(event){//eventjsnativeeventconstvideoEle=event.target;//当前视频dom节点videoEle.currentTime=1;//设置视频开始时间（因为有些手机显示第一帧黑屏，所以这里选择视频第一帧一秒作为封面）videoEle.addEventListener('canplay',function(){//监听视频的canplay事件//创建一个canvas元素并设置画布大小等于视频节点的大小constcanvas=document.createElement('canvas');constscale=0.8;//压缩因子canvas.width=videoEle.videoWidth*scale;canvas.height=videoEle.videoHeight*scale;//画布绘制canvas.getContext('2d').drawImage(videoEle,0,0,canvas.width,canvas.height);//转换画布转base64编码格式constimgSrc=canvas.toDataURL('image/png');//创建一个img元素插入到文档中constimg=document.createElement('img');img.src=imgSrc;img.style.position='绝对';img.style.left='0';img.style.top='0';img.style.objectFit='封面';videoEle.parentNode&&videoEle.parentNode.appendChild(img);});}经测试，在小米Mix2机型上，可以显示封面；建议：由于手机型号较多，在移动端播放视频有很多限制，所以最好在服务器上进行封面处理，减少不同型号兼容性带来的问题
