HTML5 -无加速或延迟的视频回放
HTML5 -无加速或延迟的视频回放
提问于 2018-08-18 00:43:34
我需要什么
我需要一个脚本(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);
});回答 1
Stack Overflow用户
发布于 2018-08-18 01:02:49
通过计算间隔和基于每秒帧数的时间减去值，我得到了更好的结果。一帧的间隔以毫秒(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在这里描述的requestAnimationFrame方法：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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51899759
复制相关文章
相似问题