首先说明一下浏览器或者手机需要支持video标签。

从H5本身来说这里用到了video的一个属性，

然后还有一个video的事件loadeddata（当当前帧的数据已加载，但没有足够的数据来播放指定音頻/视频的下一帧时会发生 loadeddata 事件。）

所以要提醒一下,如果不是用框架来监听的，就自己手动用addEventListener来监听视频是否已经加载好可以截取第┅帧了。

从网上搜的资料总结一下：

都是选择用canvas来得到第一帧图片总的来说的过程是

B：canvas无法处理跨域的图片，所以需要处理跨域请求將图片的 crossOrigin设置成anonymous。

C：处理视频的宽高和URL链接

 

 PS：这里转载自知乎作者，如果我的看不懂可以去看看原博客。
 
 

 再记录一下使用element的框架怎麼截取第一帧。原理和上面一致就不具体写怎么弄了。给一个链接地址如果有这方面需求，可以去简书上看看这篇文章 
 
 

 每天进步一點点，冲冲冲！