您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

纯web前端video标签JavaScript视频截图

发布时间：2022-07-30 18:34:14编辑：雪饮阅读（）

 以下是crmeb多商户（好像是2.0.1）的环境下的示例：

元素：

<video  ref="myvideo"
        style="width:100%;height: 100%!important;border-radius: 10px;"
        :src="formValidate.video_link"
        controls="controls"
        crossorigin="anonymous"
        @canplay="videoLoaded"
>您的浏览器不支持 video 标签。
</video>

实现

videoLoaded(){
  console.log("视频加载完毕");
  this.formValidate.myvideo=this.$refs.myvideo;
  console.log("myvideo",this.formValidate.myvideo);



  //this.formValidate.myvideo.setAttribute('crossOrigin', 'anonymous');

  this.formValidate.myvideo.play();

  var that=this;
  setTimeout(function(){
    var canvas = document.createElement("canvas");
    var canvasCtx = canvas.getContext("2d");
    var ratio = window.devicePixelRatio || 1;
    canvasCtx.scale(ratio, ratio);
    canvas.width = that.formValidate.myvideo.offsetWidth * ratio;
    canvas.height = that.formValidate.myvideo.offsetHeight * ratio;
    canvasCtx.drawImage(that.formValidate.myvideo, 0, 0, canvas.width, canvas.height)
    var imgBase64 = canvas.toDataURL("image/png");
    console.log("视频封面",imgBase64);
    that.formValidate.myvideo.pause();
  },500);

},

注意：首先是有可能会有跨域问题，则video标签的crossorigin="anonymous"这个属性是有必要的，另外一个就是视频必须是要播放了才能截取。