写在前边：因为项目是用vue.js框架实现，所以以下代码是vue.js语法。 首先，看一下Dom元素（[video相关属性和事件](https://link.segmentfault.com/?enc=S6OyzGRqu9w8ieCMy6y1bw%3D%3D.PR4qH%2FD%2FKPqA6uFVUJBVTwKLm4kAGHXCXbpkUOJuWNozsopGF5yL83UaFVfnDw5ocGmuqqx3TlFm7H%2F2ZutAJu%2FpFFvrm9a1O44ANcNTnyk%3D)）： ``` ~~~awk <video @loadeddata="createPreImg($event)" // loadeddata事件表示media中的首帧已经加载 class="content-video" :src="item.videoUrl" // 视频地址（可以是当前域下的，也可以是其他域下的） crossorigin="anonymous" // 允许跨域（由于浏览器的同源策略，如果视频是其他域，需要设置此属性） preload="auto" // 预加载（移动端需要设置此属性，因为移动端有很多播放限制，很多都不会自动加载） ></video> ~~~ ``` 其次，是javascript部分代码： ``` ~~~mel createPreImg(event) { // event js原生事件 const videoEle = event.target; // 当前video dom节点 videoEle.currentTime = 1; // 设置视频开始播放时间（因为有些手机第一帧显示黑屏，所以这里选取视频的第一秒作为封面） videoEle.addEventListener('canplay', function () { // 监听video的canplay事件 // 创建canvas元素 并设置canvas大小等于video节点的大小 const canvas = document.createElement('canvas'); const scale = 0.8; // 压缩系数 canvas.width = videoEle.videoWidth * scale; canvas.height = videoEle.videoHeight * scale; // canvas画图 canvas.getContext('2d').drawImage(videoEle, 0, 0, canvas.width, canvas.height); // 把canvas转成base64编码格式 const imgSrc = canvas.toDataURL('image/png'); // 创建img元素 插入到文档中 const img = document.createElement('img'); img.src = imgSrc; img.style.position = 'absolute'; img.style.left = '0'; img.style.top = '0'; img.style.objectFit = 'cover'; videoEle.parentNode && videoEle.parentNode.appendChild(img); }); } ~~~ ```