vue-video-player 播放加截图踩坑的解决方法随笔

最新推荐文章于 2024-07-31 09:57:55 发布

目光所及皆星河

最新推荐文章于 2024-07-31 09:57:55 发布

阅读量512

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_42265650/article/details/124886870

版权

this.$nextTick(() => {
        let video = document.getElementsByClassName("vjs-tech")[0];
        let canvas = document.createElement("canvas");
        let img = new Image();
        // img.crossOrigin = "anonymous"; //原先以为是这个问题跨域
        let w = window.innerWidth;
        let h = (window.innerWidth / 16) * 9;
        canvas.width = w;
        canvas.height = h;
        console.log(canvas);
        const ctx = canvas.getContext("2d");
        ctx.drawImage(video, 0, 0, w, h);
        this.previewImg = canvas.toDataURL("image/png");
        img.src = this.previewImg;
      });

//最终解决方案，video跨域而不是图片
mounted(){
    let video = document.getElementsByClassName("vjs-tech")[0];
    video.setAttribute('crossorigin', 'Anonymous')
  },

解决方法参考：https://blog.csdn.net/weixin_43341974/article/details/120768069?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_utm_term~default-8-120768069-blog-120742980.pc_relevant_paycolumn_v3&spm=1001.2101.3001.4242.5&utm_relevant_index=11