摘要：
通过画布的drawImage（）API，可以将第一个参数video传输到画布以绘制视频的当前帧。应注意以下代码：由于跨域限制，它必须在web服务器上运行。如果直接打开硬盘上的文件系统，则不允许。此外，这里的示例使用本地存储的视频文件。在实际项目中，如果脚本和视频不在同一个域中，跨域问题仍然会发生。参数是另一个帖子。GetVideoCover（）是一个获取视频的函数，可以直接调用。
利用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>