uniapp中生成视频的第一帧图片

需求

页面显示这个视频，封面要求是视频里面的内容，然后点击出现弹窗，视频在弹窗里面播放

const video_url = '.mp4'

一.最好用的办法是，直接用背景图

<view class="vide-img"
		:style="{background:'url('+video_url+'?x-oss-process=video/snapshot,t_0,f_jpg'+') no-repeat center center/cover'}"
		@click="" //点击打开弹窗
>
</view>

二.就是用renderjs了(因为app没有dom)，通过创建video标签，然后通过canvas绘制图片的方式

<template>  
    <view>  
        <view :vsrc="vsrc" :change:vsrc="renderScript.getVideoImg">  
            <video src="_doc/uniapp_save/16891612452645.mp4"></video>  
        </view>  
        <image :src="imgSrc" mode=""></image>  
        <!-- <button @click="setUrl('_doc/uniapp_save/16891612452645.mp4')">设置链接</button> -->  
        <button @click="setUrl('https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4')">设置链接</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                vsrc: {}, //用于renderjs通信  
                imgSrc: ""  
            }  
        },  
        methods: {  
            // 接收图片的base64编码  
            receiveImg(data) {  
                //data.test为返回的封面图  
                console.log("接收到的数据", data);  
                this.imgSrc = data.test  
            },  
            //视频封面图  
            setUrl(url) {  
                console.log("setUrl触发了", url);  
                let options = {};  
                options.width = 300;  
                options.height = 300;  
                options.src = url;  
                this.vsrc = options;  
            }  

        }  
    }  
</script>  

<script module="renderScript" lang="renderjs">  
    export default {  
        data() {  
            return {  
                test: ""  
            }  
        },  
        methods: {  
            //通过视频获得缩略图  
            getVideoImg(newValue, oldValue, ownerInstance, vm) {  
                console.log("getVideoImg触发了", newValue, oldValue);  
                if (newValue == null)  
                    return;  
                let that = this;  
                // 在缓存中创建video标签  
                let video = document.createElement("VIDEO")  
                // 添加一个静音的属性，否则自动播放会有声音  
                // video.setAttribute('muted', true)  
                video.muted = true  
                // 通过setAttribute给video dom元素添加自动播放的属性，因为视频播放才能获取封面图  
                video.autoplay = true;  
                //允许跨域访问  
                video.crossOrigin = 'anonymous';  
                // 上面我们只是创建了video标签，视频播放需要内部的source的标签，scr为播放源  
                video.innerHTML = '<source src=' + newValue.src + ' type="audio/mp4">'  
                // 再创建canvas画布标签  
                let canvas = document.createElement('canvas');  
                let ctx = canvas.getContext('2d');  
                // video注册canplay自动播放事件  
                video.addEventListener('canplay', function() {  
                    console.log("canplay事件触发了");  
                    // 创建画布的宽高属性节点，就是图片的大小，单位PX  
                    let anw = document.createAttribute("width");  
                    anw.nodeValue = newValue.width;  
                    let anh = document.createAttribute("height");  
                    anh.nodeValue = newValue.height;  
                    canvas.setAttributeNode(anw);  
                    canvas.setAttributeNode(anh);  
                    // 画布渲染  
                    ctx.drawImage(video, 0, 0, newValue.width, newValue.height);  
                    // 生成图片  
                    that.test = canvas.toDataURL('image/png') // 这就是封面图片的base64编码  
                    // 视频结束播放的事件  
                    video.pause()  
                    // 返回图片的base64编码  
                    ownerInstance.callMethod('receiveImg', {  
                        test: that.test  
                    })  
                }, false)  
            },  
        }  
    }  
</script>  

<style lang="scss">  

</style>

点击【设置连接】按钮会给vsrc赋值，触发renderScript.getVideoImg，成功返回图片的base64编码