JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HTML5 Video Player</title>
  <script src="../_scripts/jquery-1.5.1.min.js"></script>
  <script src="player_DONE.js"></script>
  <link href="player_DONE.css" rel="stylesheet" type="text/css" />
</head>
<body>

  <video id="my_video" width="480" height="300" preload="none" poster="../_video/podcast-poster.jpg">
    <source src="../_video/podcast.mp4" type="video/mp4" />
    <source src="../_video/podcast.webm" type="video/webm" />
    <source src="../_video/podcast.ogv" type="video/ogg" />
    <p>Your browser does not support HTML5 video.</p>
  </video>

  <div id="video_controls">
    <div id="play_toggle" class="player-button">Play</div>
    <div id="progress">
      <div id="load_progress"></div>
      <div id="play_progress"></div>
    </div>
    <div id="time">
      <span id="current_time">00:00</span> / 
      <span id="duration">00:00</span>
    </div>
  </div>

</body>
</html>

CSS

#video_controls {
  width: 480px;
  height: 30px;
  background-color: #333;
  color: #fff;
  font-family: Verdana, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
}

#video_controls div {
  float: left;
  height: 30px;
  line-height: 30px;
}

.player-button {
  width: 50px;
  text-align: center;
  cursor: pointer;
}

#progress {
  position: relative;
  background: #555;
  width: 310px;
}

#play_progress {
  position: absolute;
  background: #6C3;
}

#load_progress {
  position: absolute;
  background: #69C;
}

#time {
  width: 120px;
  text-align: center;
}

JavaScript

$(function(){

  // Stop if HTML5 video isn't supported
  if (!document.createElement('video').canPlayType) {
    $("#video_controls").hide();
    return;
  }

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

  // Play/Pause ============================//
  $("#play_button").bind("click", function(){
    video.play();
  });

  $("#pause_button").bind("click", function(){
    video.pause();
  });

  $("#play_toggle").bind("click", function(){
    if (video.paused) {
      video.play();
      $(this).html("Pause");
    } else {
      video.pause();
      $(this).html("Play");
    }
  });

  // Play Progress ============================//
  $(video).bind("timeupdate", function(){
    var timePercent = (this.currentTime / this.duration) * 100;
    $("#play_progress").css({ width: timePercent + "%" })
  });

  // Load Progress ============================//
  $(video).bind("progress", function(){
    updateLoadProgress();
  });
  $(video).bind("loadeddata", function(){
    updateLoadProgress();
  });
  $(video).bind("canplaythrough", function(){
    updateLoadProgress();
  });
  $(video).bind("playing", function(){
    updateLoadProgress();
  });
  
  function updateLoadProgress() {
    if (video.buffered.length > 0) {
      var percent = (video.buffered.end(0) / video.duration) * 100;
      $("#load_progress").css({ width: percent + "%" })
    }
  }
  
  // Time Display =============================//
  $(video).bind("timeupdate", function(){
    $("#current_time").html(formatTime(this.currentTime));
  });
  $(video).bind("durationchange", function(){
    $("#duration").html(formatTime(this.duration));
  });
  
  function formatTime(seconds) {
    var seconds = Math.round(seconds);
    var minutes = Math.floor(seconds / 60);
    // Remaining seconds
    seconds = Math.floor(seconds % 60);
    // Add leading Zeros
    minutes = (minutes >= 10) ? minutes : "0" + minutes;
    seconds = (seconds >= 10) ? seconds : "0" + seconds;
    return minutes + ":" + seconds;
 ...