1st video hover + counter

by cucocreative

HTML

<div>current timestamp: <div id="current">0:00</div></div>
<div>duration: <div id="duration">0:00</div></div>
<div>pause at: <div id="pause">0:00</div></div>
<div>halfway yet? <div id="counter"></div></div>
<div>jump to timestamp on mouseout: <div id="jumpto">0:00</div></div>
<div style="text-align:center" onmouseover="Play()" onmouseout="Rewind()"> 
  <video 
    id="video" 
    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>

JavaScript

var myVideo=document.getElementById("video"); 

function Rewind() { 
  var duration = video.duration;
  var currentTime = video.currentTime;
  var jumpto = duration - currentTime;
  var pause = duration/2;
  document.getElementById("jumpto").innerHTML=jumpto;
  	if(this.currentTime >= pause) {
    	myVideo.currentTime = pause;  
    } else {
    	myVideo.currentTime = jumpto;
    }
  	if(this.currentTime < duration) {
      myVideo.play(); 
    }
}
function Play() {
	if (myVideo.paused) 
  var duration = video.duration;
  var currentTime = video.currentTime;
  var pause = duration/2;
  document.getElementById("pause").innerHTML=pause;
  if(counter != 1) {
    var counter = 0;
    document.getElementById("counter").innerHTML=counter;
  }
  myVideo.play();
  this.on('timeupdate', function () {
    console.log(this.currentTime());
	});  
}  

myVideo.addEventListener("timeupdate", function() {
  // this will pause but then is called again via rewind were it needs to ignore this!! 
  if(counter == 0) {
    if (this.currentTime >= 2.000 && this.currentTime <= 4.000){
     this.pause();
     counter++;
     document.getElementById("counter").innerHTML=counter;
    }
  }
  if(this.currentTime == duration) {
    counter--;
    document.getElementById("counter").innerHTML=counter;
  }
}, false);

$("#video").on(
	"timeupdate", 
  function(event){
  	onTrackedVideoFrame(this.currentTime, this.duration);
});

function onTrackedVideoFrame(currentTime, duration){
    $("#current").text(currentTime); //Change #current to currentTime
    $("#duration").text(duration)
}