@liveqing/liveplayer 视频截图Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvas处理

背景

因为工作需要，所以研究了一下LivePlayer H5直播|点播播放器。使用起来很方便，但是也遇到一个不小的坑，搞的我欲仙欲死。

系统环境

windows10、vue2.6、@liveqing/liveplayer2.7.0

报错原因

视频截图中使用的视频来源跨域

报错截图

处理过程

遇到这个问题第一时间一定是百度啦，各种各样的答案，五花八门的方法总之最后都没有解决。但是对问题的解决还是有很大帮助的，在此列举一下网上的方法：
1、给video设置crossorigin=‘Anonymous’
2、在服务器设置Access-Control-Allow-Origin *
3、在视频的地址后面添加随机数

video.src =video.src+'?v='+Math.random()

4、使用setTimeout或者addEventListener包裹代码

最终结果

其实最多的答案就是第一条，也很接近真相。但是还有一条，由于我使用的@liveqing/liveplayer框架，它的html都被封装起来，所以一般都是在js代码块中去添加crossorigin

解决方案就是在mounted里面给video节点添加crossorigin属性

mounted(){
      //进行内部快照跨域截图
      let video0 = document.getElementsByClassName("vjs-tech")[0];
      
       video0.setAttribute('crossorigin', 'Anonymous')
       let video1 = document.getElementsByClassName("vjs-tech")[1];
      
       video1.setAttribute('crossorigin', 'Anonymous')
       let video2 = document.getElementsByClassName("vjs-tech")[2];
     
       video2.setAttribute('crossorigin', 'Anonymous')

    },