video controls sandbox

play pause mute volume loop zoom & speed

by trentHarlem

HTML

<script src="https://kit.fontawesome.com/96b5053958.js" crossorigin="anonymous"></script>
<div id='video-container'>
  <video id="video" onclick='playPauseVideo()' autoplay loop muted>
    <source src="https://www.w3schools.com/Html/mov_bbb.mp4" type="video/mp4">
    <source src="https://www.w3schools.com/Html/mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>


<div id='controls'>
  <progress id='progress-bar' min='0' max='100' value='0'>0% played</progress><br>
  <!--   <button id='btnReplay' class='replay' accesskey="R" onclick='replayVideo();'>Replay</button>
   -->
  <button id='btnPlay' class='play' accesskey="P" onclick='playPauseVideo();'><i class="fas fa-play"></i></button>
  <!--   <button id='btnStop' class='stop' accesskey="X" onclick='stopVideo();'>Stop</button>
   --> <button id='btnMute' class='mute' onclick='muteVolume();'><i class="fas fa-volume-up"></i></button>
  <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">

  <button id='btnSet' onclick='settings()'> Settings… </button>

  <div id='setMenu'>

    <legend>Loop Speed & Zoom</legend>

    <button id='btnLoop' title='loop' onclick='Loop(this)'>LOOP</button>
    ...controls will appear here.
    <i class="icon-zoom-in"></i> icon-zoom-in


  </div>
  <!--   <button id='btnFullScreen' class='fullscreen' title='toggle full screen' accesskey="T" onclick='toggleFullScreen();'>[&nbsp;&nbsp;]</button>
   -->
</div>

</div>
<!--   <div>
    <button onclick='getLoopStart()' id="start">Start</button>
    <button id="end">End</button>
    <button id="button">Loop</button>
    <button id="stopButton">Stop Loop</button>
  </div> -->

<!--     <script>
      const video = document.getElementById('video');
      let loopStart
      let loopEnd
    
      function getLoopStart() {
        console.log('get loop start')
        alert(video.currentTime);
        video.currentTime = loopStart;
        /* loopStart = video.currentTime */
        ;
    
...

CSS

/* vid Controls test */
* html,
body {
  transition: all ease-in-out 0.5s;
  background-color: #222;
}

#video-container {
  overflow: hidden;
}

#video {
  width: 100%;
  height: auto;
}

#volume-bar {
  width: 30%;
  vertical-align: middle;
  padding: 0px;
}

progress {
  color: dodgerblue;
  font-size: 12px;
  height: 8px;
  width: 100%;
  border: none;
  margin-right: 10px;
  background: #434343;
  border-radius: 9px;
  vertical-align: middle;
  cursor: ew-resize;
  appearance: none;
}


progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
   appearance: none;
}

progress::-moz-progress-bar {
  color: dodgerblue;
  background: #434343;
}

progress[value]::-webkit-progress-bar {
  background-color: #434343;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

progress[value]::-webkit-progress-value {
  background-color: dodgerblue;
}



input[type=range] {
  -webkit-appearance: none;
  width: 100%;
  margin: 6.8px 0;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4.4px;
  cursor: pointer;
  
 /* box-shadow: 0.9px 0.9px 1.7px #002200, 0px 0px 0.9px #003c00;
  background: #205928;
   */
  background: #222;
  border-radius: 1px;
  border: 1.1px solid dodgerblue;
}

input[type=range]::-webkit-slider-thumb {
  /*   box-shadow: 2.6px 2.6px 3.7px #aaa, 0px 0px 2.6px #ccc; */

  border: 2.5px solid dodgerblue;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: #222;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4px;

  /* display: none; */
}

input[type=range]::-webkit-slider-thumb:hover {
  /* display: inherit; */
  -webkit-appearance: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #222;
}

input[type=range]::-moz-range-thumb {
  border: 2.5px solid dodgerblue;
  height: 9px;
  width: 9px;
  border-radius: 50%;
  background: #222;
  cursor:...

JavaScript

let player = document.getElementById('video');
	let btnPlay = document.getElementById('btnPlay');
	let btnMute = document.getElementById('btnMute');
	let progressBar = document.getElementById('progress-bar');
	let volumeBar = document.getElementById('volume-bar');
	let btnSet = document.getElementById('settings');
	let setMenu = document.getElementById('setMenu');
	let btnLoop = document.getElementById('btnLoop');

	// Update the video volume
	volumeBar.addEventListener("change", function(evt) {
	  player.volume = evt.target.value;
	});
	//document.getElementById('btnFullScreen').disabled = true;

	// Add a listener for the timeupdate event so we can update the progress bar
	player.addEventListener('timeupdate', updateProgressBar, false);

	// Add a listener for the play and pause events so the buttons state can be updated
	player.addEventListener('play', function() {
	  // Change the button to be a pause button
	  changeButtonType(btnPlay, '<i class="fas fa-pause"></i>');
	}, false);

	player.addEventListener('pause', function() {
	  // Change the button to be a play button
	  changeButtonType(btnPlay, '<i class="fas fa-play"></i>');
	}, false);

	player.addEventListener('volumechange', function(e) {
	  // Update the button to be mute/unmute
	  if (player.muted) changeButtonType(btnMute, '<i class="fas fa-volume-mute"></i>');
	  else changeButtonType(btnMute, '<i class="fas fa-volume-up"></i>');
	}, true);

	player.addEventListener('ended', function() {
	  this.pause();
	}, false);

	progressBar.addEventListener("click", seek);


	function seek(e) {
	  var percent = e.offsetX / this.offsetWidth;
	  player.currentTime = percent * player.duration;
	  e.target.value = Math.floor(percent / 100);
	  e.target.innerHTML = progressBar.value + '% played';
	}

	function playPauseVideo() {
	  if (player.paused || player.ended) {
	    // Change the button to a pause button
	    changeButtonType(btnPlay, 'pause');
	    player.play();
	  } else {
	    // Change the button to...