JSFiddle - React, Tailwind, and code Playground

by Thomas Gladdines

HTML

<body>
  <div id="player">
    <video id="vid" controls>
      <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
    </video>
    <div id="videoControls">
      <button id="play" title="Play">&#x25BA;</button>
      <div id="progress">
        <svg xmlns="http://www.w3.org/2000/svg" id="draw_here" height="100" width="100%">
          <line id="play_bar" x1="5%" y1="15" x2="100%" y2="15" style="stroke:#7E7F81;stroke-width:2" />
          <circle id="play_ball" cx="4%" cy="15" r="13" fill="#B0C4DE" />
        </svg>
        <span id="spacer"></span>
      </div>
      <button id="instructorBtn" title="Instructor">!</button>
    </div>
  </div>
</body>

CSS

* PROGRESS BAR */

#progress {
  position: absolute !important;
  left: 7%;
  height: 70%;
  width: 90%;
  cursor: pointer;
  z-index: 4;
}
#progress_box {
  height: 95%;
  width: 100%;
  border: 1px solid #292929;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: #303030;
  /* Old browsers */
  background: -moz-linear-gradient(top, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #303030 0%, #545454 49%, #545454 51%, #7e7e7e 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#303030', endColorstr='#7e7e7e', GradientType=0);
  /* IE6-9 */
  -webkit-box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
  -moz-box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
  box-shadow: 0 1px 0 #292929, 0 -1px 0 #292929;
  margin: 2px 0 0 5px;
  padding: 2px;
  overflow: hidden;
  z-index: 4;
}
#play_progress {
  display: block;
  height: 40%;
  width: 100%;
  background-color: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), color-stop(.5, white), to(#e3e3e3));
  background: -moz-linear-gradient(top, #e3e3e3, white 50%, #e3e3e3);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  z-index: 4;
}
#play_time {
  float: right;
  margin: 7px 0 0 5px;
  font-size: 10px;
  font-weight: normal;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1;
  z-index: 4;
}
#spacer {
  display: block;
  width: 100%;
  height: 30%;
}
#sliderVideo {
  position: absolute;
  top: 50px;
  bottom: 50px;
  right: 1%;
}

JavaScript

var v = $("#vid");
var b = $("#progress");
var x = $("#draw_here");

var vidTimer;
var s;


//wait for video and tracks to load
var myVideoPlayer = $('#vid');
myVideoPlayer.on('loadedmetadata', function() {

  $("#play_ball").draggable()
    .bind('mousedown', function(event, ui) {
      $(event.target.parentElement).append(event.target);
    })
    .bind('drag', function(event, ui) {
      event.target.attr('x', ui.position.left);
    });

  
  //$("#play_ball").draggable({
  //  axis: "x",
  //  containment: 'parent'
  //});

  var videoControls = $('#videoControls'),
    play = $('#play'),
    playProgressInterval = false,
    progressContainer = $("#progress"),
    playProgressBar = $("#play_ball");


  // Get rid of the default controls
  v.attr('controls', "");

  handleButtonPresses();


  function handleButtonPresses() {
    // When the play button is clicked, playor pause the video.
    play.on('click', playPause, false);

    // When the play button is pressed, witch to the "Pause" symbol. 
    v.on('play', function() {
      play.title = 'Pause';
      play.html('<span id="pauseButton">&#x2590;&#x2590;</span>');

      // Begin tracking video's progress.  
      trackPlayProgress();
    }, false);

    // When the pause button is pressed, switch to the "Play" symbol. 
    v.addEventListener('pause', function() {
      play.title = 'Play';
      play.html('&#x25BA;');

      // Video was paused, stop tracking progress. 
      stopTrackingPlayProgress();
    }, false);


    // When the video has concluded, pause it. 
    v.on('ended', function() {
      this.currentTime = 0;
      this.pause();
    }, false);


    v.on('touchstart', function(e) {
      var sDate = new Date();
      sTime = sDate.getTime();;
      var touchobj = e.changedTouches[0]
      console.log(touchobj.target) // returns element touch point landed on
        // var xPos =
        // var yPos = 
        // console.log("position is"+e.PageX + ", " + e.PageY);

      //...