HTML5视频-当到达视频中间时暂停

Question

目的:视频剪辑分为两部分:前半部分内容为正向播放，后半部分内容为反向播放。视频在鼠标悬停时播放，然后在中途暂停。在mouseout #1上，如果在中途暂停，它将取消暂停并播放到结束;#2如果你在暂停之前鼠标离开，它将跳转到下半场相应的时间戳并播放-例如，如果视频为10秒，你在3秒标记时鼠标离开，它将跳转到7秒并从那里播放到结束。参见Fiddle查看一个粗略的示例:

https://jsfiddle.net/cucocreative/1n3Lyqd5/422/

或者查看我们要复制的内容:

https://www.polestar.com/uk/polestar-2/(英雄横幅下的第一部分)

Fiddle有最新版本的代码。

var myVideo=document.getElementById("video"); 
var halfway=0;
document.getElementById("halfway").innerHTML=halfway;
function Rewind() { 
var duration = video.duration;
var currentTime = video.currentTime;
var jumpto = duration - currentTime;
var pause = duration/2;
document.getElementById("jumpto").innerHTML=jumpto;

myVideo.currentTime = jumpto;
myVideo.play();

}
function Play() {
if (myVideo.paused) 
var duration = video.duration;
var pause = duration/2;
document.getElementById("pause").innerHTML=pause;
myVideo.play();
this.on('timeupdate', function () {
console.log(this.currentTime());
});
}  
$("#video").on(
"timeupdate", 
function(event){
var duration = video.duration;
var pause = duration/2;
onTrackedVideoFrame(this.currentTime, this.duration);
// Pause when hit the halfway stage
// check to see if halfway yet
// can't get the below to play nice with the rewind function
if(this.currentTime >= pause) {
//this.pause();
//var halfway = 1;
//document.getElementById("halfway").innerHTML=halfway;
}
});
function onTrackedVideoFrame(currentTime, duration){
$("#current").text(currentTime); //Change #current to currentTime
$("#duration").text(duration)
}

经过大量的截止日期后，我已经弄清楚了倒带效果，可以在中途暂停，但是当两个代码块在一起时，它们不能很好地发挥在一起，所以暂时注释掉了暂停代码(见第36-40行)。

我不明白让倒带函数知道视频是否已经暂停的逻辑。

所以目前，只要你在2秒标记之前鼠标移出它的工作，之后我需要帮助。

update:我确实认为在第12行放一个if语句来检查currentTime是否为>=而不是Duration，但事实并非如此。

if(this.currentTime >= pause) {
myVideo.currentTime = pause;
} else {
myVideo.currentTime = jumpto;
}

Answer 1

我设法得到一个粗略的解决方案，它可能需要一点微调。

HTML

<div style="text-align:center" onmouseenter="Play()" onmouseleave="Rewind()"> 
<video 
id="video" 
onended="onVideoEnd()"
class="video"
width="480">
<source src="https://www.cucostaging.co.uk/side-reversed.mp4" type="video/mp4" />
Your browser does not support HTML5 video.
</video>
</div>

脚本

//var myVideo=document.getElementById("video"); 
const myVideo = document.getElementById('video')
var status = 'STOP' // STOP | PLAY | REWIND
function Rewind() { 
var currentTime = myVideo.currentTime;
var duration = myVideo.duration;
myVideo.currentTime = duration - currentTime;
status = 'REWIND'
myVideo.play();

}
function Play() {
var currentTime = myVideo.currentTime;
var duration = myVideo.duration;
let tempCurrent = status === 'STOP' ? 0 :  duration - currentTime;
myVideo.currentTime = tempCurrent;
status = 'PLAY'
myVideo.play();
setTimeout(() => {
if(status === 'PLAY')
myVideo.pause()},
(2 - tempCurrent) * 1000)
}  
function onVideoEnd() {
status = 'STOP'
}