Question

我需要的

我需要一个脚本（Javascript，jQuery等）来在单击后倒带视频。我们使用了在某些论坛中找到的脚本，但是该脚本以加速的方式倒带在视频中，这会使您的搜索动作变得完整/奇怪。速度必须相同。

我有什么

//[Rewind]  

var video = document.getElementById('video');
var intervalRewind;
jQuery(video).on('play',function(){
        video.playbackRate = 1.0;
        clearInterval(intervalRewind);
});
jQuery(video).on('pause',function(){
        video.playbackRate = 1.0;
        clearInterval(intervalRewind);
});
jQuery("#btnVoltar").click(function() { // button function for rewind
     intervalRewind = setInterval(function(){
             video.playbackRate = 1.0;
             if(video.currentTime == 0){
                     clearInterval(intervalRewind);
                     video.pause();
             }
             else{
                     video.currentTime += -.1;
             }
                        },30);
});

Answer 1

通过基于每秒帧数计算间隔和时间减法的值，我得到了更好的结果。一帧的时间间隔以毫秒（1000 / fps）为单位，一帧的时间减法以秒为单位（1 / fps）。

由于播放头位置是手动设置的，因此我在反向播放时也将playbackRate设置为零。

var video = document.getElementById('video');
var intervalRewind;
var fps = 30;

$(video).on('play', function() {
  clearInterval(intervalRewind);
  video.playbackRate = 1.0;

});
$(video).on('pause', function() {
  clearInterval(intervalRewind);
});
$("#speed").click(function() { // button function for 4x fast speed forward
  clearInterval(intervalRewind);
  video.playbackRate = 4.0;
  video.play();
});
$("#negative").click(function() { // button function for rewind
  video.playbackRate = 0;
  clearInterval(intervalRewind);
  intervalRewind = setInterval(function() {
    if (video.currentTime == 0) {
      clearInterval(intervalRewind);
      //video.pause();
    } else {
      video.currentTime -= (1 / fps);
    }
  }, (1000 / fps));
});

video {
  height: 400px;
}

button {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  padding: 1rem;
  border-radius: 6px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video" controls="controls">
	<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
	<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
	<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
<button id="speed">Fast Forward</button>
<button id="negative">Rewind</button>

另请参阅：
Playing HTML5 Video Backwards @ nicbell.net。

或者，您可以考虑使用requestAnimationFrame控制每秒的帧数。参见Controlling fps with requestAnimationFrame?

根据您的要求，这是一个使用类而不是ID在页面上容纳多个视频的版本。我还使用了markE所描述的Controlling fps with requestAnimationFrame的requestAnimationFrame方法。

var fps = 30;
var fpsInterval = 1000 / fps;

jQuery('.video_block').each(function(i, $thisBlock) {

  var thisVideo = this.querySelector('video');

  jQuery('.video', $thisBlock).on('play', function() {
    thisVideo.reverse_stop = true;
    thisVideo.playbackRate = 1.0;
  }).on('pause', function() {
    thisVideo.reverse_stop = true;
  });

  jQuery('.btn_fast', $thisBlock).on('click', function() {
    thisVideo.reverse_stop = true;
    thisVideo.playbackRate = 4.0;
  });

  jQuery('.btn_reverse', $thisBlock).on('click', function() {
    thisVideo.playbackRate = 0;
    thisVideo.reverse_stop = false;
    startReverse(fps, thisVideo);
  });

});


function startReverse(fps, video) {
  video.playbackRate = 0;
  video.reverse_stop = false;
  video.then = Date.now();
  animateReverse(video);
}

function animateReverse(video) {

  // stop playing in reverse
  if (video.reverse_stop) {
    return;
  }

  // request another frame
  requestAnimationFrame(function() {
    animateReverse(video);
  });

  // calculate elapsed time since last loop
  var now = Date.now();
  var elapsed = now - video.then;

  // if enough time has elapsed, draw the next frame
  if (elapsed > fpsInterval) {

    video.then = now - (elapsed % fpsInterval);

    // if we reach the beginning, stop playing in reverse.
    // otherwise, move backward.
    if (video.currentTime <= 0) {
      video.reverse_stop = true;
    } else {
      video.currentTime -= (1 / fps);
    }

  }
}

.video {
  height: 400px;
}

.btn {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  padding: 1rem;
  border-radius: 6px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="video_block">
  <video class="video" controls="controls">
	  <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
	  <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
	  <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
  </video>
  <button class="btn btn_fast">Fast Forward</button>
  <button class="btn btn_reverse">Reverse</button>
</div>


<div class="video_block">
  <video class="video" controls="controls">
	  <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
	  <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
	  <source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
  </video>
  <button class="btn btn_fast">Fast Forward</button>
  <button class="btn btn_reverse">Reverse</button>
</div>

HTML5-视频后退而没有加速或延迟

1 个答案: