Objetivo: el videoclip consta de 2 partes: la primera mitad del contenido es la reproducción hacia delante, la segunda mitad es la primera mitad hacia atrás. El video se reproduce cuando se pasa el mouse por encima y luego se detiene en la mitad de la etapa. En el mouseout n.º 1, si se detiene a mitad de camino, se reanuda y se reproduce hasta el final: n.º 2, si se retira el mouse antes de que se detenga, saltará a la marca de tiempo correspondiente en la segunda mitad y se reproducirá, por ejemplo, si el video es de 10 segundos y el mouse se encuentra en la marca de 3 segundos. saltará a 7 segundos y reproducirá desde allí hasta el final. Consulte Fiddle para ver un ejemplo aproximado:

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

o vea este sitio para lo que estamos tratando de replicar:

https://www.polestar.com/uk/polestar-2/ (primera sección debajo del banner de héroe)

Fiddle tiene la última versión del código (no a continuación).

 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) }

Después de muchos callejones sin salida, descubrí el efecto de rebobinado y puedo hacer una pausa en la etapa intermedia, PERO cuando ambos bloques de código están juntos, no funcionan bien juntos, así que he comentado el código de pausa por el momento ( ver líneas 36-40).

No puedo descifrar la lógica para obtener la función de rebobinado para saber si el video ha llegado a estar en pausa todavía.

Entonces, actualmente, siempre que mueva el mouse hacia afuera antes de la marca de 2 segundos, funciona, después de eso necesito ayuda.

actualización: pensé que poner una declaración if en la línea 12 para verificar si el tiempo actual es> = que la duración funcionaría, pero no lo es.

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