利用canvas的drawImage() API,第一个参数传video可以将视频当前帧画到画布上，（这里示例是第一帧），
以下代码需要注意：因为跨域限制，必须放到web服务器上运行（比如localhost），如果直接是在硬盘上的文件系统打开是不行（file://...)的。
另外，这里示例上用的是本地存了一个视频文件，实际项目时如果脚本和视频不在同一个域还是会发生跨域问题，参数另一篇帖子。
getVideoCover() 就是获取视频的函数，可以直接调用。
<!DOCTYPE html> <html> <body> <img id="img"> <script> function getVideoCover(url, width = null, height = null) { return new Promise((resolve, reject) => { const canvas = document.createElement('canvas'); const video = document.createElement('video'); document.body.appendChild(video); video.setAttribute('crossOrigin', 'anonymous'); canvas.width = width ? width : video.clientWidth; canvas.height = height ? height : video.clientHeight; video.style.height = '0'; video.onloadeddata = (() => { setTimeout(() => { canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height); let b64 = canvas.toDataURL('image/png'); document.body.removeChild(video); resolve(b64); }, 100); }); video.setAttribute('src', url); }); } getVideoCover('./videoplayback.mp4', 200, 150).then((base64) => { document.getElementById('img').setAttribute('src', base64); }); </script> </body> </html>