Javascript 如何保持和在同一帧上重复？

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

我曾尝试将pixelScan设置为仅在视频暂停或结束时发生，并且尝试了setTimeout和requestAnimationFrame，但都没有成功。但是，这很可能是因为我自己缺乏JavaScript技能，哈哈

我似乎一直在关注这个问题，我知道这个简单的问题必须有很多解决办法

您可以使用暂停事件：

---

您能否将代码隔离到JSFIDLE上的工作演示中？这样很容易编辑。

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;
  }
}

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