Question

我有以下代码设置，以便在暂停时显示视频的画布副本，以便它可以显示暂停图像的灰度版本。您会注意到暂停的帧总是在视频后面。

我尝试将pixelScan（）设置为仅在视频暂停或结束时发生，并且我已经尝试了setTimeout（）和requestAnimationFrame（）都没有运气。但是，这很可能是由于我自己缺乏JavaScript的技能哈哈

我似乎一直在关注这个问题，我知道必须对这个简单问题进行大量修复

var processes={
  timerCallback:function() {
    if (this.v2.paused || this.v2.ended) {
      return;
    }
        this.ctxIn.drawImage(this.v2,0,0,this.width,this.height);
        this.pixelScan();
        var self=this;
  },
  doLoad:function(){
    this.v2=document.getElementById("video");
    this.cIn=document.getElementById("cIn");
    this.ctxIn=this.cIn.getContext("2d");
    this.cOut=document.getElementById("cOut");
    this.ctxOut=this.cOut.getContext("2d");
    var self=this;
    setTimeout(function() {
      self.timerCallback();
    }, 34);

    this.v2.addEventListener("playing", function() {
      self.width=v.videoWidth;
      self.height=v.videoHeight;
      cIn.width=v.videoWidth;
      cIn.height=v.videoHeight;
      cOut.width=v.videoWidth;
      cOut.height=v.videoHeight;
      self.timerCallback();
    }, false);

  this.v2.addEventListener('ended', function() {
    openInfo();
    v2.pause();
    v2.loop = true;
    stateAnimate.animate({path: playBtn, fill:"white"}, 300, "ease-in-out");
    loopAnimate.animate({path: loopOn, fill:"white"}, 200, "back-in");
  });
  },
   pixelScan: function() {
    var frame = this.ctxIn.getImageData(0,0,this.width,this.height);
    for(var i=0; i<frame.data.length;i+=4) {
      var grayscale=frame.data[i]*.3+frame.data[i+1]*.59+frame.data[i+2]*.11;
      frame.data[i]=grayscale;
      frame.data[i+1]=grayscale;
      frame.data[i+2]=grayscale;
    }
    this.ctxOut.putImageData(frame,0,0);
    return;
  }
}

Answer 1

您可以使用pause事件：

this.v2.addEventListener('pause', function() {
    // process frame here
}, false);

如何将<video>和<canvas>复制到同一帧？</canvas> </video>

1 个答案: