uniapp(全端兼容) 获取视频组件video第一帧作为图片当封面教程（详细示例代码，一键复制）

实现视频播放器用第一帧当封面功能，uniapp如何在全平台实现截取视频第一帧作为视频封面。

首先，先了解下功能，通过canvas来截取视频的某一帧，然后把这一帧转成base64编码的图片格式即可，canvas需要在document中获取，但是uniapp没有documen元素，所以这时候就要使用renderjs来获取documen元素。

renderjs

先介绍一下renderjs: renderjs是一个运行在视图层的js。

renderjs的主要作用有2个：大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力、在视图层操作dom，运行 for web 的 js库。

因为uniapp的逻辑层和视图层是分离的，所以我们无法在vue代码中获取到这个视图层document。这种机制就造成了逻辑层和视图层的通信阻塞。renderjs运行在视图层，直接就可以操作dom元素了。

renderjs模块代码解释

module：module的命名在上面的html标签里面会用到

instance：拿到整个html标签元素

getVideoCanvas：是用来接收逻辑层的数据

document创建video元素：进行自动播放，加上静音，来获取帧数

currentTime：选择视频的第几秒，如果切出来是黑色的话，那么换一下秒数。

toDataURL：把数据转成base64编码格式，直接在图片上渲染就行了。

drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

img：image是画布绘制的图像源，绘制到