video hover

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="halfway"></div></div>
<div>jump to timestamp on mouseout: <div id="jumpto">0:00</div></div>

<div onmouseover="Play()" onmouseout="Rewind()">
  <video src="https://www.cucostaging.co.uk/side-reversed.mp4" id="video" width="100%" preload>	
</video>							
</div>

CSS

#zoom
{
  position:absolute;
  width:30%;
  height:20%;
  cursor:pointer;
  z-index:5; 
  background-color:#fff; 
  left:35%;
}

JavaScript

var myVideo=document.getElementById("video");
$("#video").on(
  "timeupdate", 
  function(event){
  	onTrackedVideoFrame(this.currentTime, this.duration);
	}
);

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

video.addEventListener("timeupdate", function() {
	/*if (this.currentTime >= 2.000 && this.currentTime <= 8.000) {
  	this.pause();
  }*/
}, false);


function Rewind() { 
  var duration = video.duration;
  var currentTime = video.currentTime;
  var jumpto = duration - currentTime;
  var pause = duration/2;
  document.getElementById("jumpto").innerHTML=jumpto;
  // set the rewind point depending on if we have reached halfway
  if(this.currentTime >= pause) {
    myVideo.currentTime = pause;  
  } else {
    myVideo.currentTime = jumpto;
  }
  // safety net: if the video reached the end before mouseout don't rewind
  if(this.currentTime < duration) {
    myVideo.play();  
  }
}

function Play(){
  var video = document.getElementById('video');
	myVideo.play();
}