videoJs toDataURL对视频截图疑难问题

Question

<div class="test_two_box">
  <video
      id="myVideo"
      class="video-js vjs-big-play-centered"
      crossOrigin="anonymous"
      style="width: 515px;height: 300px;"
  >
    <source
        src="//vjs.zencdn.net/v/oceans.mp4"
        type="video/mp4"
    >
  </video>
</div>
<van-row type="flex" justify="center">
  <van-col>
    <van-button type="primary" @click="captureImg">对{{'id:' + captureObj }}进行视频截图</van-button>
  </van-col>
</van-row>
<div>
  <div style="width:0px;height:0px;overflow:hidden;">
    <canvas id="canvas" width="515" height="300"></canvas>
  </div>
  <img :src="imgSrc" style="margin-top:5px;" />
</div>

  data(){
    return {
      imgSrc     : '', //图片路径
      captureObj : 'myVideo',
    };
  },
  mounted(){
    this.initVideo();
    this.initCapture();
  },
  methods    : {
    initVideo(){
      //初始化视频方法
      let myPlayer = this.$video(myVideo, {
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls : true,
        //自动播放属性,muted:静音播放
        autoplay : 'false',
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload  : 'auto',
        //设置视频播放器的显示宽度（以像素为单位）
        width    : '800px',
        //设置视频播放器的显示高度（以像素为单位）
        height   : '400px',
        poster   : 'https://dss0.baidu.com/73F1bjeh1BF3odCf/it/u=2304790197,3604046591&fm=85&s=E8F030C0C30F114B56BCFD82030070C3',
      });
    },
    initCapture(){
      this.videoTag = document.getElementById(this.captureObj);
      this.canvas = document.getElementById('canvas');
      this.context = this.canvas.getContext('2d');
      console.log('加载数据2：', this.videoTag, this.canvas, this.context);
    },
    //截图
    //注意 video标签设置crossOrigin属性为'anonymous'即可防止报跨域错误若报’toDataURL‘
    captureImg(){
      // 报错Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
      // 该方法可以正常截取到普通video
      // this.context.drawImage(this.videoTag, 0, 0, 515, 300);
      /*由于报错，根据网上找到的方法改进成下面方法，从而解决了报错。修改后截屏获取到的都是黑屏。普通的video也是黑屏*/
      this.canvas.onload = () => this.context.drawImage(this.videoTag, 0, 0, 515, 300);
      let base64 = this.canvas.toDataURL('image/jpeg');
      console.log('base64:', base64);
      this.imgSrc = base64;
    },
  },

我个人怀疑是这段代码的问题，若改回"this.context.drawImage(this.videoTag, 0, 0, 515, 300);",
就会报错"Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)';
依旧使用"this.canvas.onload = () => this.context.drawImage(this.videoTag, 0, 0, 515, 300);"，截取到的始终是黑屏图片

  // 报错Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
  // 该方法可以正常截取到普通video
  // this.context.drawImage(this.videoTag, 0, 0, 515, 300);
  /*由于报错，根据网上找到的方法改进成下面方法，从而解决了报错。修改后截屏获取到的都是黑屏。普通的video也是黑屏*/
  this.canvas.onload = () => this.context.drawImage(this.videoTag, 0, 0, 515, 300);

Answer 1

已有解决方案了。
我这边的黑屏原因是因为videoJs控制的video标签已经变成了一个自定义的盒子标签了，所以drawimg要从videoJs生成的盒子往下找到video标签的id，从而进行控制

Answer 2

       const arr = player.el_.getElementsByTagName('video');
          const video = arr && arr.length >= 1 ? arr[0] : null;
          if (video !== null) {
            console.log(video);
            const canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas
              .getContext('2d')
              .drawImage(video, 0, 0, canvas.width, canvas.height);
            const src = canvas.toDataURL();
            const link = document.createElement('a');
            link.download = '截图';
            link.href = src;
            link.click();
            link.remove();
          }

Answer 3

遇到同样的问题了，能否分享一下解决办法
///
我这边黑屏原因是因为videoJs控制的video标签已经变成了一个自定义的盒子标签了，所以drawimg要从videoJs生成的盒子往下找到video标签的id

Answer 4

遇到同样问题 可以分享一下解决方法吗

Answer 5

遇到同样问题 可以分享一下解决方法吗

Answer 6

楼主你好，我也遇到相同的问题，能否分享一下，谢谢，