Question

我正在尝试在arrowLeft按键为-1帧而arrowright按键为+1帧的视频上设置属性，但是我无法阻止默认行为。

我尝试使用e.preventDefautl() e.stopPropagation并返回false。

<video id="video_1" class="video" controls class="video" width="800" height="600" mediagroup="videoMG1" autobuffer preload >
    <source src="{{movie["url"]}}"  />
</video>

var video = document.getElementById("video_1");

video.addEventListener("keypress", function(e){
  return false;
});
video.addEventListener("keyup", function(e){
  return false;
});
var video2 = VideoFrame({
    id: 'video_1',
    frameRate: 25.00,
    callback: function(response) {
        console.log(response);
    }
});

video.addEventListener("keydown", function(e){
  e.preventDefault()
  e.stopPropagation() 
  debugger;
  if( e.KeyCode == 39 ){
    console.log("backward")
    video.seekBackward(1)
  }else if( e.KeyCode == 37) {
    console.log("forwrd")
    video.seekForward(1)
  }
  return false;
});

当我进入调试器时，视频已经处理了按键并向前移动了7秒钟，而不是我想要的一帧。

感谢您的帮助！

Answer 1

这是由浏览器本身显示的标准控件引起的。

解决此问题的唯一方法是使用以下命令完全停用它：

video.controls=false;

此外，您在错误的对象上调用 seekBackward（）和 seekForward（）方法。我假设您正在使用VideoFrame库，对吗？

此刻，您正在这样做

video.seekBackward(1);

这是html5视频元素本身-您需要使用VideoFrame对象 video2 。

video2.seekBackward(1);

这是完整的代码：

<html>
  <body>
    <script type="text/javascript" src="VideoFrame.min.js"></script>
    <video id="video_1" class="video" controls class="video" width="800" height="600" mediagroup="videoMG1" autobuffer preload>
            <source src="myVideo.mp4"  />
        </video>
    <div id="videoControls">
      <button type="button" id="playPause">&#9205;</button>
      <button type="button" id="mute">&#128266;</button>
      <input type="range" id="volumeBar" min="0" max="1" step="0.1" value="1">
    </div>
    <script>
      var video = document.getElementById("video_1");
      var video2 = VideoFrame({
        id: 'video_1',
        frameRate: 25.00,
        callback: function(response) {
          console.log(response);
        }
      });
      video.controls = false;
      video.addEventListener("keydown", function(e) {
        console.log("asd", e.keyCode)
        if (e.keyCode == 39) {
          console.log("backward")
          video2.seekBackward(1)
        } else if (e.KeyCode == 37) {
          console.log("forwrd")
          video2.seekForward(1)
        }
        return false;
      });

      document.getElementById("playPause").addEventListener("click", function() {
        if (video.paused == true) {
          video.play();
          this.innerHTML = "&#9208;";
        } else {
          video.pause();
          this.innerHTML = "&#9205;";
        }
      });

      document.getElementById("mute").addEventListener("click", function() {
        if (video.muted == false) {
          video.muted = true;
          this.innerHTML = "&#128263;";
        } else {
          video.muted = false;
          this.innerHTML = "&#128266;";
        }
      });

      document.getElementById("volumeBar").addEventListener("input", function() {
        video.volume = volumeBar.value;
      });

    </script>
  </body>
</html>

逐帧前进和后退

1 个答案: