Custom Controls for HTML5 Videos

http://blog.teamtreehouse.com/building-custom-controls-for-html5-videos

by Mukul kant

HTML

<div id="video-container">
    
    <!-- Video -->
    <video id="video" width="640" height="365">
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        <p>
          Your browser doesn't support HTML5 video.
          <a href="videos/mikethefrog.mp4">Download</a> the video instead.
        </p>
    </video>
        
      <!-- Video Controls -->
      <div id="video-controls">
        <button type="button" id="play-pause">Play</button>
        <input type="range" id="seek-bar" value="0">
        <button type="button" id="mute">Mute</button>
        <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
        <button type="button" id="full-screen">Full-Screen</button>
      </div>
        
</div>

JavaScript

window.onload = function() {

  // Video
  var video = document.getElementById("video");

  // Buttons
  var playButton = document.getElementById("play-pause");
  var muteButton = document.getElementById("mute");
  var fullScreenButton = document.getElementById("full-screen");

  // Sliders
  var seekBar = document.getElementById("seek-bar");
  var volumeBar = document.getElementById("volume-bar");

}


// Event listener for the play/pause button
playButton.addEventListener("click", function() {
  if (video.paused == true) {
    // Play the video
    video.play();

    // Update the button text to 'Pause'
    playButton.innerHTML = "Pause";
  } 
  else {
    // Pause the video
    video.pause();

    // Update the button text to 'Play'
    playButton.innerHTML = "Play";
  }
});