js获取视频封面作为缩略图

 

 

 //获取视频封面作为缩略图：
    captureVideoImage() {
      let videoArr = document.querySelectorAll('.swipe-video');
      let _this = this;
      for (let i = 0; i < videoArr.length; i++) {
        //loadeddata当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。
        //浏览器支持:所有主流浏览器都支持 loadeddata 事件。注释：Internet Explorer 8 或更早的浏览器不支持该事件。
        let video = videoArr[i];
        video.addEventListener(
          'loadeddata',
          function() {
            let canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            video.setAttribute('crossorigin', 'anonymous'); //跨域设置，后端也需要设置CORS为*
            canvas
              .getContext('2d')
              .drawImage(video, 0, 0, canvas.width, canvas.height);
            let dataUrl = canvas.toDataURL('image/png');
            let pareantNode = video.parentNode;
            let imgNode = document.createElement('img');
            imgNode.src = dataUrl;
            if (video.videoWidth > video.videoHeight) {
              imgNode.style.height = '100%';
            } else {
              imgNode.style.width = '100%';
            }
            pareantNode.appendChild(imgNode);
            video.pause();
            console.log(dataUrl, 'dataUrl');
            _this.feedbackImages[i].dataUrl = dataUrl;
          },
          false
        );
      }
    },
    //设置video封面海报poster:
    setPoster() {
      let videoArr = document.querySelectorAll('.swipe-video');
      for (let i = 0; i < videoArr.length; i++) {
        let video = videoArr[i];
        video.setAttribute('crossorigin', 'anonymous');
        let canvas = document.createElement('canvas');
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        video.addEventListener(
          'loadeddata',
          function() {
            canvas
              .getContext('2d')
              .drawImage(video, 0, 0, canvas.width, canvas.height);
            let dataUrl = canvas.toDataURL('image/png');
            video.setAttribute('poster', dataUrl);
            console.log(dataUrl, 'dataUrl');
            video.pause();
          },
          false
        );
      }
    },