HTML5 Video Controls

by Johan Pantzare

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="http://thinkhouse.ie/assets/master/img/th.mp4">Download</a> the video instead.
    </p>
  </video>
  <!-- Video Controls -->
  <div id="video-controls">
  <button type="button" id="prev">PREV</button>
    <button type="button" id="play-pause">PLAY</button>
    <button type="button" id="next">NEXT</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>

CSS

:-webkit-full-screen {
  width: 100%;
    height: 100%;
}

:-moz-full-screen {
  width: 100%;
  height: 100%;
}

button{
  color:#444;
  background-color:#fff;
}

:-ms-fullscreen {
  width: 100%;
  height: 100%;
}

:full-screen { /*pre-spec */
  width: 100%;
  height: 100%;
}

:fullscreen { /* spec */
  width: 100%;
  height: 100%;
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

/* styling the backdrop*/
::backdrop {
 background: #000000;
  width: 100%;
  height: 100%;
}
::-ms-backdrop {
 background: #000000;
  width: 100%;
  height: 100%;
}

JavaScript

var videoArr=[0,3,5,7,9]
  var counter;
  
  // Video
  var video = document.getElementById("video");

  // Buttons
  var playButton = document.getElementById("play-pause");
  var nextButton = document.getElementById("nextBtn");
  var prevButton = document.getElementById("prevBtn");
  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";
  }
});

// Event listener for the mute button
muteButton.addEventListener("click", function() {
  if (video.muted == false) {
    // Mute the video
    video.muted = true;

    // Update the button text
    muteButton.innerHTML = "Unmute";
  } else {
    // Unmute the video
    video.muted = false;

    // Update the button text
    muteButton.innerHTML = "Mute";
  }
});

// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
    
    console.log("Click that button!!");
  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen(); // Firefox
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen(); // Chrome and Safari
  }
});


// Event listener for the seek bar
seekBar.addEventListener("change", function() {
  // Calculate the new time
  var time = video.duration * (seekBar.value / 100);

  // Update the video time
  video.currentTime = time;
});

// Update the seek bar as the video plays
video.addEventListener("timeupdate",...