vue 截取视频第一帧作为视频封面

做开发的时候碰到需要上传视频封面的问题，跟后台讨论了一波决定用前端截取，然后上传 视频封面，由于我这边做了相册功能，所有的图片都由相册统一管理，省的每次都的重复上传，所以我用的直接是 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") // 截取后的视频封面
      }
    },

比较坑爹的就是后面发现青牛云直接提供了截取视频第一帧的方法，我写的又被弃用了