H5 video标签列表渲染用canvas截取视频画面做封面

这是一个关于h5的video视频播放标签来做视频播放截取视频画面的问题。

需求是这样的：要渲染一个视频资源列表，在列表中获取视频的画面来做列表的封面。看到这个需求就想，为什么要在列表里截取视频画面做封面，为什么不是后端返回图片url呢？没有那么多为什么，做出来就是了。

首先是找百度，怎么截取h5视频的画面，搜了一遍，大都是通过canvas来画出来的。基本实现过程是：通过video标签把视频加载进来，设置display：none; 把video标签隐藏起来，然后通过canvas的drawImage方法把视频画面画出来，得到一个base6位的图片编码，然后将这个base64位的编码赋给img标签的src即可。

先来一串代码：

html：
<video id="video" :src="videoSrc" x-webkit-airplay="allow" preload="auto" style="display: none"></video>
<div id="output"></div>
js：
captureImage() {
    const output = document.getElementById('output')
    const video = document.getElementById('video')
    const canvas = document.createElement('canvas')
    canvas.width = video.videoWidth * 0.3
    canvas.height = video.videoHeight *