0

我需要的

我需要一个脚本（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);
});
4

1 回答 1

0

通过基于每秒帧数计算间隔和时间减法的值，我得到了更好的结果。一帧的间隔以毫秒（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>

另请参阅：
向后播放 HTML5 视频@nicbell.net。

或者，您可以考虑使用requestAnimationFrame. 请参阅使用 requestAnimationFrame 控制 fps？

根据您的要求，这是一个通过使用类而不是 ID 在页面上容纳多个视频的版本。我还使用了此处描述的markErequestAnimationFrame方法：Controlling fps with 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>

于 2018-08-17T17:02:48.527 回答