JSFiddle - React, Tailwind, and code Playground

by Thomas Gladdines

HTML

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<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>a
        <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;

var playing = false;


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

  $("#play_ball").draggable()
    .bind('mousedown', function(event, ui) {
	  if(playing) {
	  	stopTrackingPlayProgress();
	  }
      //$(event.target.parentElement).append(event.target);
    })
    .bind('drag', function(event, ui) {
      $("#play_ball").attr('cx', ui.position.left);
    });
	$(document).bind('mouseup', function(event) {
	  if($("#play_ball").attr('cx')) {
	  	v[0].currentTime = $("#play_ball").attr('cx') / progressContainer.outerWidth() * v[0].duration;
	  }
	  //playProgressBar.attr("cx", (4 + ((v[0].currentTime / v[0].duration) * 94) + "%"));
	  if(playing) {
	  	trackPlayProgress();
	  }
     // $(event.target.parentElement).append(event.target);
    });

  
  //$("#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.removeAttr('controls');

  handleButtonPresses();


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

    // When the play button is pressed, witch to the "Pause" symbol. 
    v.on('play', function() {
	  console.log("yo");
      //play.title = 'Pause';
      play.html('<span id="pauseButton">&#x2590;&#x2590;</span>');
	  playing = true;
      // Begin tracking video's progress.  
      trackPlayProgress();
    });

    // When the pause button is pressed, switch to the "Play" symbol. 
    v.on('pause', function() {
      //play.title = 'Play';
      play.html('&#x25BA;');
	  playing = false;
      // Video was paused, stop tracking progress. 
     ...