JSFiddle - React, Tailwind, and code Playground

by Snj

HTML

<video src="http://192.168.0.106/Bjorklven-v2.mp4" id="video" width="63%" preload="auto" muted controls>
</video>
<div id="cursor">X</div>

CSS

body {
    background:rgb(200,220,200);
}

div {
    width:30px;
    height:30px;
    background:red;
    position:absolute;
    top:250;
    left:260;
}

JavaScript

//http://corrupt-system.de/assets/media/sintel/sintel-trailer.webm
$(document).ready(function(e) {

	var seekBar = document.getElementById("seek-bar");
	var v = document.getElementsByTagName("video")[0];
  var vv = $('video')
  

  var globalID;
  var seekTime = 0;
  var currentTime = 0;
  var frameNumber = 0;
  var videoDuration = 0;
  
  vv.on('loadedmetadata', function(e) {
      $(this).prop("muted", true);
      currentTime = Math.floor(v.currentTime);
      console.log('loaded + v.currentTime: ' + v.currentTime)
  })

  vv.on('durationchange', function(e) {
      videoDuration = v.duration
      console.log('videoDuration: ' + videoDuration)
  });
    function scrollPlay() {
  	v.currentTime = frameNumber;
    //window.requestAnimationFrame(scrollPlay);
  }
  
  vv.on('mousemove', function(e) {
    //console.log(e.clientX)
    //currentTime = Math.floor(e.clientX) * playbackConst;
    var frameNumber = e.clientX -7 // * videoDuration
    console.log(frameNumber)
    //requestAnimationFrameID = requestAnimationFrame(scrollPlay);
    //v.currentTime = frameNumber / 100;
  });
  
  
  /*vv.on('mouseente', function (e) {
  		globalID = window.requestAnimationFrame(scrollPlay);
      var frameNumber = e.clientX // * videoDuration
      console.log(frameNumber)
      console.log('mouseente');
  });
  
  vv.on('mouseover', function (e) {
    	//globalID = window.requestAnimationFrame(scrollPlay);
      var frameNumber = e.clientX // * videoDuration
    	console.log(frameNumber)
      console.log('mouseon');
  }, false);*/
  
	vv.on('mouseout', function (e) {
    	//cancelAnimationFrame(globalID);
      console.log('mouseout');
  });
  

  v.addEventListener("seeked", function() {
    console.log('Seeked done! :: videoDuration = ' + currentTime)
    //window.cancelAnimationFrame(globalID);
    //currentTime = Math.floor(v.currentTime);
  });
	  // Event listener for the seek bar
  seekBar.addEventListener("change", function() {
    var seekTime = v.duration *...