做开发的时候碰到需要上传视频封面的问题，跟后台讨论了一波决定用前端截取，然后上传 视频封面，由于我这边做了相册功能，所有的图片都由相册统一管理，省的每次都的重复上传，所以我用的直接是 url渲染后的视频对象 ，你也可以自己js创建video对象下面代码也有
<canvas id='mycanvas' v-show='false' ></canvas>
findvideocover() {
const video = document.getElementById("upvideo"); // 获取视频对象
// const video = document.createElement("video") // 也可以自己创建video
// video.src='http://mall.private.netcente.com/cf0eec5e-6b17-4966-be4d-8b1b516970d9?e=1588057847&token=ew7Ezvrwgr2v8GBps2vP0TJFLK2G90ewUGzeFKam:IyXlq6S97GLEq7EiR27V6kU4dgg=' // url地址 url跟 视频流是一样的
var canvas = document.getElementById('mycanvas') // 获取 canvas 对象
const ctx = canvas.getContext('2d'); // 绘制2d
video.crossOrigin = 'anonymous' // 解决跨域问题，也就是提示污染资源无法转换视频
video.currentTime = 1 // 第一帧
video.oncanplay = () => {
canvas.width = video.clientWidth; // 获取视频宽度
canvas.height = video.clientHeight; //获取视频高度
// 利用canvas对象方法绘图
ctx.drawImage(video, 0, 0, video.clientWidth,video.clientHeight)
// 转换成base64形式
console.log(canvas.toDataURL ("image/png"))
this.videoImg = canvas.toDataURL ("image/png") // 截取后的视频封面
}
},
比较坑爹的就是后面发现青牛云直接提供了截取视频第一帧的方法，我写的又被弃用了
