HTML5 Video Controls

by Flo Fromager

HTML

<script src="http://popcornjs.org/code/dist/popcorn-complete.min.js"></script>
<!-- Hiding HTML5 Video Controls using CSS Pseudo selectors -->
<button>play/pause</button>
<video width="400">
  <source src="http://corrupt-system.de/assets/media/sintel/sintel-trailer.m4v" type="video/mp4">
</video>

CSS

video::-webkit-media-controls {
  display: none;
}


/* Could Use thise as well for Individual Controls 
Documentation: https://gist.github.com/afabbro/3759334 

video::-webkit-media-controls-play-button {}

video::-webkit-media-controls-volume-slider {}

video::-webkit-media-controls-mute-button {}

video::-webkit-media-controls-timeline {}

video::-webkit-media-controls-current-time-display {}
*/

JavaScript

$("button").click(function() {
  //console.log(this); 
  $("video").each(function(){
    if (this.paused) {
      this.play();
    } else {
      this.pause();
    }
  });
});

var $pop = Popcorn("video");

$pop.currentTime(2).capture();