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编码