Video Sampler

index.html

<video id="sampler" class="video-js" width="800" height="600" preload="auto" control="none">
	  <source src="https://res.cloudinary.com/dyn5qu6bi/video/upload/v1518543431/lols_edhpqb.mp4" type="video/mp4">
</video>
<nav>
    <ul>
        <li data-code="65">a</li>
        <li data-code="83">s</li>
        <li data-code="68">d</li>
        <li data-code="70">f</li>
        <li data-code="74">j</li>
        <li data-code="75">k</li>
        <li data-code="76">l</li>
        <li data-code="186">;</li>
    </ul>
</nav>
<div id="loading">
  <span></span>
  <p>Click anywhere to begin</p>
</div>
<p id="tip">Turn up your speakers and press any of the keys listed below.</p>
<a href="https://www.youtube.com/watch?v=KHZ8ek-6ccc" id="video-link" target="_blank">Click here to watch the original video on YouTube.</a>

script.js

timer = '';
$(document).ready(function() {
	sampler = $("#sampler").get(0);
	sampler.pause();
}).keydown(function(e) {
	var code = e.keyCode;
  keyMap(code);
}).on('mousemove', function(e){
    $('#loading p').css({
       left:  e.pageX,
       top:   e.pageY
    });
});

$('#loading').click(function(){
  $('body').addClass('loaded');
});
function keyMap(code){
  if(code == 65) { //a
		playClip(0, code);
	} 	
	if(code == 83) { //s
		playClip(1, code);
	} 
	if(code == 68) { //d
		playClip(2, code);
	} 
	if(code ==  70) { //f
		playClip(3, code);
	} 
	if(code == 74) { //j
		playClip(4, code);		
	} 	
	if(code == 75) { //k
		playClip(5, code);		
	} 
	if(code == 76) { //l
		playClip(6, code);		
	} 
	if(code == 186) { //;
		playClip(7, code);		
	}  
}
function playClip(count, code){
	var dur = 1;
	var sampler = $("#sampler").get(0);
  $("#sampler").addClass('show');
	$('.triggered').removeClass('triggered');
	$('[data-code='+code+']').addClass('triggered')
	sampler.pause();
	clearTimeout(timer);
	sampler.currentTime = count*dur+0.05;
	sampler.play();
	timer = setTimeout(function(){
		sampler.pause();
    keyMap(code);
		//$('.triggered').removeClass('triggered');
     //$("#sampler").removeClass('show');
	},950);    
}

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/4.12.4/video.js"></script>

style.scss

@import "bourbon";

html{
  height: 100%;
}
body{
  margin:0;
  padding:0;
  background:black;
  height: 100%;
  width: 100%;
  font: 20px/30px sans-serif;
}
video{
  width:100%;
  height: 600px;
  margin: 0 auto;
  position: absolute;
  display: block;
  top: 50%;
  visibility: hidden;
  @include transform(translateY(-50%));
  &.show{
    visibility: visible;
  }
}
nav{
  position: fixed;
  top: 50%;
  width: 100%;
  text-align: center;
  @include transform(translateY(-50%));
  ul{
    list-style: none;
    margin:0;
    padding:0;
    width: 100%;  
    position: relative;
    text-align:center;
    li{
      color: white;  
      display:inline-block;
      background: rgba(0,0,0,0.5);
      padding: 10px 20px;
      margin: 5px;
      border: 2px solid white;
      @include border-top-radius(5px);
      @include border-right-radius(5px);
      @include border-bottom-radius(5px);
      @include border-left-radius(5px);
      @include transform-origin(50% 50%);
      @include transition(0.05s ease-in-out);
      &.triggered{
        background: white;
        color: black;
      }
      &:nth-child(4){
        margin-right: 50px;
      }
    }  
  }
}
#tip,a#video-link{
  text-decoration: none;
  color: white;
  opacity: 0.2;
  position: absolute;
  display:block;
  font-size: 80%;
  left:0;
  width: 100%;
  text-align: center; 
}
#tip{
  top: 20px;
}
a#video-link{
  bottom: 20px;
  &:hover{
    opacity: 1;
    text-decoration: underline;
  }
}
#loading{
   position: fixed; 
  background: rgba(0,0,0,0.7);
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  span{
    color: white;
    position: absolute;
    display:block;
    top: 45%;
    text-align: center;
    left: 0;
    width: 100%;
    font-size: 100px;
    line-height:0;
    @include animation-name(spin);
    @include animation-duration(4000ms);
    @include animation-iteration-count(infinite);
    @include animation-timing-function(linear);  
    @include transform-origin(50% 50%);
    @include transform(translateY(-50%));
  }
  p{
    color: white;
    text-align: center;
    position: fixed;
    left: 50%;
    top: 50%;
    font-size: 80%;
    @include transform(translateY(50%) translateX(-50%));
  }
}
.loaded{
  #loading{
    display: none;
  }
}
@keyframes spin {
    from {
      transform:rotate(0deg);
    }
    to {
      transform:rotate(360deg);
    }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/4.12.4/video-js.css" rel="stylesheet" />

video-sampler.markdown

Video Sampler

A Pen by Daniel Givens on CodePen.

License.