HTML5 Video - Pause when get to middle of video

Question

Aim: video clip is in 2 parts: first half of content is the playing forwards, the second half is the first half in reverse. The video plays when mouseover and will then pause at the halfway stage. On mouseout #1 if paused at the halfway stage it unpauses and plays to end: #2 if you mouseout for before it pauses it will jump to the corresponding timestamp in the 2nd half and play - eg if 10sec video and you mouse at 3sec mark it will jump to 7sec and play from there to the end. See Fiddle for a rough example:

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

or see this site for what we are trying toreplicate:

https://www.polestar.com/uk/polestar-2/ (first section under hero banner)

Fiddle has latest version of code (not below).

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

After a lot of deadends, I have figured out the rewind effect and can get it to pause at the halfway stage BUT when both blocks of code are together they don't play nice together so have commented out the pause code for the time being (see lines 36-40).

I can't figure out the logic to get the Rewind function to know if the video has gotten as far as being paused yet.

So currently, as long as you mouseout before the 2sec mark it works, after that's I need help with.

update: I did think that putting an if statement at line 12 to check if the currentTime is >= than the Duration would work but it's not.

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

Answer 1

I managed to get a rough solution working, it probably needs a little fine tuning tho.

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>

Script

//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'
}