video-player-01

by Nic Fontaine

HTML

<div class='container-vid'>
  <video id="myvideo" 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">
  </video>

  <!-- <div class='vid-play'>
    <i class="fa fa-play-circle"></i>
  </div> -->
  
  <div class='timeline-hover'>
    <div class='timeline'>
      <div id='timeline-bar'></div>
      <div id='timeline-bar-fake'></div>
      <div id='readout'></div>
    </div>
  </div>

</div>

  <div class='controls'>
    <!--<button id="zero"><i class="fa fa-step-backward"></i></button>-->
    <!--<button id="play">play</button>-->
  </div>

  <div id='demo'></div>
  <div id='demo2'></div>

<script async src="https://use.fontawesome.com/dfe288b4db.js"></script>

CSS

button {
  /* display: block; */
  margin-bottom: 10px;
  padding: 12px;
}

.container-vid {
  position: relative;
  width: 800px;
  /*overflow: hidden;*/
}

video {
  width: 100%;
  display: flex; /* FIXES > 100% + EXTRA HEIGHT ISSUE */
}

.timeline {
  position: absolute;
  opacity: 0;
  width: 100%;
  margin: 0;
  height: 20px;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  transition: background 0.1s, height 0.05s ease-in-out;
}

.timeline.show {
  opacity: 1;
}

.container-vid:hover .timeline {
  background: rgba(0,0,0,0.5);
}

.timeline-hover {
  position: absolute;
  bottom: 0;
  right: 0; left: 0;
  height: 40px;
}

.timeline-hover:hover {
  height: 60px;
}

#timeline-bar {
  background: rgba(63,183,166,0.8);
  
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3fb2a0+0,09a4a9+100,2a2b30+100 */
background: #3fb2a0; /* Old browsers */
background: -moz-linear-gradient(left, #3fb2a0 0%, #09a4a9 100%, #2a2b30 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #3fb2a0 0%,#09a4a9 100%,#2a2b30 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #3fb2a0 0%,#09a4a9 100%,#2a2b30 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3fb2a0', endColorstr='#2a2b30',GradientType=1 ); /* IE6-9 */

  box-shadow: inset 2px 2px 7px rgba(255, 255, 255, .3), inset -2px -2px 7px rgba(0, 0, 0, .07);

  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  border-right: 1px solid rgba(255,255,255,0.4);
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  opacity: 0.7;
  transition: opacity 0.1s;
  transform: translateX(-100%);
  position: relative;
  z-index: 1;
}

#timeline-bar:after {
    position: absolute;
    content:"";
    top: -1px;
    right: 0;
    margin-right: -5px;
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid...

JavaScript

var vid = document.getElementById('myvideo'),
  tLine = document.getElementsByClassName('timeline')[0],
  tWidth = tLine.clientWidth,
  tBar = document.getElementById('timeline-bar'),
  tBarFake = document.getElementById('timeline-bar-fake'),
  demo = document.getElementById('demo'),
  
  vidPlaying = false;
var timeWidth = 0;
const fps = 60;
// FRAMES TO MOVE EVERY 1/60 OF A SECOND
var rate;

var now;
var then = Date.now();
const interval = 1000/fps;
var delta;

// CAN'T GET UNTIL VID IS READY
vid.oncanplay = function() {
	var minutes = parseInt(vid.duration / 60, 10);
	var seconds = vid.duration % 60;
  duration = seconds;
  // MOVE VIA DURATION TIME OVER 60FPS
  rate = tWidth/duration/fps;
  demo.innerHTML = 'canplay';
  // HIDE UNTIL READY
  // (NOTE) REPLACE W/ CLASS LOOP
  setTimeout(function() {
 		tLine.classList.add('show'); 
  },500);
  // (NOTE) PUT EVENTLISTENER CALLBACK LOOP HERE, & PASS RATE
  
}

/*var i = setInterval(function() {
	if(vid.readyState > 0) {
		var minutes = parseInt(vid.duration / 60, 10);
		var seconds = vid.duration % 60;
		duration = seconds;
    //DISTANCE PER FPS
    rate = tWidth/duration/fps;
		// demo.innerHTML = duration;
		clearInterval(i);
	}
}, 200);*/

// CTRL - CLICK VID TO PLAY/PAUSE
vid.addEventListener('click',vidToggle,false);

// RAF - CHANGE BAR WIDTH WHILE PLAY
// (NOTE) ADD CLASS INDEX AS INPUT PARAM, FOR CALLBACK LOOP
function tBarProgress(tF) {
	requestAnimationFrame(tBarProgress);
  now = Date.now();
  delta = now - then;

  if (delta > interval) { 
    then = now - (delta % interval);
    // ANIMATION
    if (tF && vidPlaying && timeWidth <= tWidth) {
      timeWidth += rate;
      // MOVE BAR 
      tBar.style.transform = 'translateX(-' + (tWidth-timeWidth) + 'px)';
    }
    else {
      cancelAnimationFrame(tBarProgress);
      // DISABLES IT GETTING STUCK AT 100%
      if (vid.ended) {
        tBar.style.transform = 'translateX(0px)';
      }
    }
  }
  
}

// CLICK TIMELINE TO...