LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit ultrices elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur augue magna, posuere id tortor vel, condimentum consectetur lacus. Pellentesque dui est, ornare vitae semper et, dapibus ut lacus. Etiam sed porta dui. Phasellus non nisl eget dolor commodo imperdiet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium lorem nec tortor elementum, et aliquam erat feugiat. Duis interdum enim vitae justo cursus pulvinar eu ac nulla. Donec consectetur vehicula turpis. Nunc laoreet tincidunt elit ultrices elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur augue magna, posuere id tortor vel, condimentum consectetur lacus. Pellentesque dui est, ornare vitae semper et, dapibus ut lacus. Etiam sed porta dui. Phasellus non nisl eget dolor commodo imperdiet.

A video player ui written in CSS

Also spent a bit of time writing a jquery plugin to make the UI function, too.

I especially like the subtle animation when you hit the "replay" button as the movie ends.

  • It's responsive,
  • has left/right keyboard support when you've activated the seeker,
  • shift key increases skip time
  • dragging/clicking support for seeking,
  • a custom loader animation
  • pretty sure it works in >= ie9
CSS
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400);
article.video {
  position: relative;
  display: block;
  width: 100%;
  margin: 10px auto;
  background: #343b4a;
  font-size: 13px;
  border-radius: 3px;
  overflow: hidden;
  font-family: Arial;
}
article.video video {
  cursor: pointer;
  width: 100%;
  opacity: 0;
}
article.video video.visible {
  opacity: 1;
  transition: opacity 1s ease-out 0.8s;
}
article.video .control-bar {
  width: 100%;
  height: 2.2em;
  padding-bottom: 1px;
  position: absolute;
  bottom: -2.2em;
  left: 0;
  transition: bottom 0.3s ease-out;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
}
article.video .control-bar .button-bar {
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(to bottom, rgba(52, 59, 74, 0.8) 0%, rgba(34, 41, 58, 0.8) 100%);
  border-radius: 3px;
  z-index: 2;
}
article.video .control-bar .button-bar i {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: 100;
  color: white;
  position: absolute;
  width: 2em;
  height: 1.6em;
  line-height: 1.6em;
  text-align: center;
  top: 50%;
  margin-top: -0.75em;
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  z-index: 2;
}
article.video .control-bar .button-bar i:hover {
  opacity: 1;
}
article.video .control-bar .button-bar i.hidden {
  opacity: 0;
  z-index: 1;
}
article.video .control-bar .button-bar i.play,
article.video .control-bar .button-bar i.pause,
article.video .control-bar .button-bar i.replay {
  width: 2.5em;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
article.video .control-bar .button-bar i.fullscreen {
  left: auto;
  right: 0.3em;
}
article.video .control-bar .button-bar .volume {
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: 100;
  color: white;
  position: absolute;
  width: 2em;
  height: 1.6em;
  line-height: 1.6em;
  text-align: center;
  top: 50%;
  margin-top: -0.75em;
  opacity: 0.6;
  cursor: pointer;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  z-index: 2;
  overflow: hidden;
  left: 2.3em;
  font-size: 1.2em;
  transition: all 0.8s ease-out;
}
article.video .control-bar .button-bar .volume.shift {
  width: 7.5em;
  transition: all 0.2s ease-in;
}
article.video .control-bar .button-bar .volume .toggle {
  left: 0;
}
article.video .control-bar .button-bar .volume .rail {
  position: absolute;
  left: 2.5em;
  top: 0;
  width: 3em;
  height: 100%;
  margin-top: 0;
  overflow: hidden;
}
article.video .control-bar .button-bar .volume .rail .grip {
  position: absolute;
  width: 0.4em;
  height: 1em;
  margin-left: -0.2em;
  left: 100%;
  top: 50%;
  margin-top: -0.5em;
  background: white;
}
article.video .control-bar .button-bar .volume .rail .audible,
article.video .control-bar .button-bar .volume .rail .inaudible {
  position: absolute;
  width: 100%;
  height: 0.3em;
  left: 0;
  top: 50%;
  margin-top: -0.15em;
  background: #2bffdf;
}
article.video .control-bar .button-bar .volume .rail .inaudible {
  background: #ccc;
}
article.video .control-bar .button-bar .time {
  color: #eee;
  font-size: 0.8em;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  position: absolute;
  left: 7em;
  height: 2.2em;
  line-height: 2.8em;
  opacity: 0.9;
  transition: all 0.7s ease-in 0.2s;
}
article.video .control-bar .button-bar .time.shift {
  left: 13em;
  transition: all 0.2s ease-out;
}
article.video .control-bar .seek {
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.2);
  top: -2px;
  opacity: 0.5;
  transition: all 0.2s ease;
  cursor: pointer;
  z-index: 7;
}
article.video .control-bar .seek .buffer {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  z-index: 8;
}
article.video .control-bar .seek .watched {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  z-index: 8;
  background: #2bffdf;
  overflow: visible!important;
}
article.video .control-bar .seek .watched:before,
article.video .control-bar .seek .watched:after {
  content: "";
  position: absolute;
  right: 10px;
  height: 100%;
  width: 10px;
  background: #5effe7;
  border-radius: 2px;
  box-shadow: 0 0 2px #5effe7;
}
article.video .control-bar .seek .watched:after {
  right: 0px;
  box-shadow: 0px 0 3px 0px #91ffee;
  background: #91ffee;
}
article.video .control-bar .seek .watched .handle {
  position: absolute;
  display: block;
  right: -2px;
  top: -1px;
  width: 0px;
  height: 0px;
  border: 2px solid white;
  z-index: 9;
  background: transparent;
  border-radius: 100%;
  transition: all 0.3s ease;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8), 0 0 4px 1px #91ffee;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -ms-user-select: none;
  user-select: none;
}
article.video .control-bar .seek .watched .handle.active {
  background: #666;
}
article.video .control-bar .seek .watched .handle:after {
  content: "";
  width: 26px;
  height: 22px;
  position: absolute;
  left: 50%;
  margin-left: -13px;
  top: 50%;
  margin-top: -15px;
}
article.video .control-bar .seek:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 100%;
  bottom: -5px;
  left: 0;
  z-index: 6;
}
article.video .control-bar .seek:hover {
  height: 6px;
  top: -6px;
}
article.video.active .control-bar {
  bottom: 0;
  transition: bottom 0.05s ease-out;
}
article.video.active .control-bar.active .seek:hover .handle {
  top: -3px;
}
article.video.active .control-bar.active .seek .handle {
  width: 4px;
  height: 4px;
  right: -5px;
  top: -6px;
  border-width: 5px;
  transition: all 0.1s ease;
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.8), 0 0 4px 0px #91ffee;
}
article.video.active .seek {
  opacity: 1;
}
article.video .loading {
  position: absolute;
  width: 100%;
  text-align: center;
  left: 0;
  top: 50%;
  height: 100px;
  margin-top: 20px;
  color: white;
  font-size: 0.8em;
  opacity: 0.1;
  transition: all 0.4s ease;
}
article.video .loading.hidden {
  opacity: 0;
  top: 120%;
  height: 0;
}
article.video .loading:hover,
article.video .loading.error {
  opacity: 1;
}
article.video .large-play {
  text-align: center;
  display: block;
  width: 50px;
  height: 50px;
  font-family: "FontAwesome";
  font-style: normal;
  font-weight: 100;
  font-size: 3em;
  color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -25px;
  margin-left: -25px;
  cursor: pointer;
  opacity: 0.8;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  transition: 0.3s ease;
}
article.video .large-play.hidden {
  top: 45%;
  opacity: 0;
}
article.video .spinner {
  display: block;
  overflow: visible;
  text-indent: -999em;
  position: absolute;
  border-radius: 100% 0;
  z-index: 2;
  background: #fff;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 2px;
  margin-left: -10px;
  margin-top: -10px;
  box-shadow: 0px 0px 3px 2px rgba(43, 255, 223, 0.4), 0 0 5px 3px rgba(43, 255, 223, 0.4) inset;
  border: none;
  transform-origin: 9px 9px;
  animation: spin 13s cubic-bezier(0.435, -0.165, 0.56, 1.17) infinite;
  transition: top 1s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
article.video .spinner.hidden {
  top: 120%;
}
article.video .spinner:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 0;
  z-index: 10;
  background: #fff;
  top: 0px;
  left: 0px;
  width: 5px;
  height: 3px;
  transform: rotate(140deg);
  box-shadow: 0px 0px 3px 2px rgba(43, 255, 188, 0.4), 0 0 5px 2px rgba(43, 255, 188, 0.4) inset;
  animation: spin2 17s linear infinite;
  transform-origin: 9px 9px;
}
article.video .spinner:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 0;
  z-index: 10;
  background: #fff;
  top: 0px;
  left: 0px;
  width: 6px;
  height: 4px;
  transform: rotate(70deg);
  box-shadow: 0px 0px 5px 3px rgba(43, 252, 255, 0.4), 0 0 5px 1px rgba(43, 252, 255, 0.4) inset;
  animation: spin2 13s linear infinite;
  transform-origin: 9px 9px;
}
@media screen and (max-width: 800px) {
  article.video {
    font-size: 12px;
  }
}
body,
html {
  background: #222;
  color: #222;
}
.intro {
  font-family: "Source Sans Pro", Arial, Helvetica;
  color: #ddd;
  width: 50%;
  margin: 30px auto;
  font-size: 1.6em;
  font-weight: 100;
}
.intro p {
  margin: 8px auto;
}
.intro h2,
.intro h3 {
  margin: 8px auto;
}
.demo-container {
  width: 50%;
  margin: auto;
  background: #eee;
  padding: 20px;
  font-family: "Redacted";
  font-size: 14px;
  color: #ccc;
  line-height: 1.2;
}
@font-face {
  font-family: 'FontAwesome';
  src: url('https://netdna.bootstrapcdn.com/font-awesome/3.1.1/font/fontawesome-webfont.eot?v=3.1.0');
  src: url('https://netdna.bootstrapcdn.com/font-awesome/3.1.1/font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), url('https://netdna.bootstrapcdn.com/font-awesome/3.1.1/font/fontawesome-webfont.woff?v=3.1.0') format('woff'), url('https://netdna.bootstrapcdn.com/font-awesome/3.1.1/font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), url('https://netdna.bootstrapcdn.com/font-awesome/3.1.1/font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
  font-weight: normal;
  font-style: normal;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(360deg);
  }
  14% {
    transform: rotate(470deg);
  }
  18% {
    transform: rotate(490deg);
  }
  20% {
    transform: rotate(520deg);
  }
  22% {
    transform: rotate(540deg);
  }
  26% {
    transform: rotate(940deg);
  }
  30% {
    transform: rotate(1080deg);
  }
  40% {
    transform: rotate(1340deg);
  }
  45% {
    transform: rotate(1440deg);
  }
  55% {
    transform: rotate(1500deg);
  }
  56% {
    transform: rotate(1500deg);
  }
  86% {
    transform: rotate(3220deg);
  }
  100% {
    transform: rotate(3600deg);
  }
}
@keyframes spin2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(3600deg);
  }
}
JS
// I was going to create a video player UI
// based off of youtube. however I couldn't
// handle it just being css layout...
// so i took a while (sheeesh) and made a plugin.
// however, it's definitely not bulletproof.


$(document).ready( function() {
    $('article.video').siPlayer(true);
});

// i did learn some things though.
// and i remember why i hate working
// with html5 apis ;(


$.fn.siPlayer = function( autoplay ) {
    
    return $(this).each( function(k,v) {
                
        var $player = $(v);
        var $video = $player.find('video');
        var src = $video.get(0).currentSrc;
        
        var _video = $video.get(0);
        
        // a few options we will need.
        
        var o = {
            
            duration: 0,
            seek: null,
            isPaused: true,
            isFinished: false,
            position: 0,
            loadingText: "Patience, Padawan...",
            shift: null
            
        };
        
        // create and store all the elements we need 
        // for controlling the video.
        
        var $el = {
            
            controls:               $('
').addClass('control-bar'), buttons: $('
').addClass('button-bar'), play: $('').addClass('play').html(""), pause: $('').addClass('pause hidden').html(""), replay: $('').addClass('replay hidden').html(""), volume: $('
').addClass('volume'), toggle: $('').addClass('toggle').html(''), rail: $('
').addClass('rail'), audible: $('
').addClass('audible'), inaudible: $('
').addClass('inaudible'), grip: $('
').addClass('grip'), time: $('').addClass('time'), total: $('').addClass('total'), divider: $('').html(' / '), current: $('').addClass('current'), fullscreen: $('').addClass('fullscreen').html(""), seek: $('
').addClass('seek'), buffer: $('
').addClass('buffer'), watched: $('
').addClass('watched'), handle: $('').addClass('handle'), largePlay: $('').addClass('large-play').html(""), spinner: $('').addClass('spinner'), loading: $('
') .addClass('loading') .text( o.loadingText ) .attr('title', o.loadingText +' retrieving video data') }; // all the helper functions used in the plugin var funcs = { init: function() { o.duration = _video.duration; if( o.duration > 0 ) { funcs.setTime(); funcs.getBuffered(); funcs.clearLoading(); } // bind the events funcs.ui(); events(); // auto play after timer, because won't play // right away for some reason. if( autoplay ) { setTimeout( function() { $el.play.trigger('mouseup.play'); },1000); } else { setTimeout(function() { $el.largePlay.removeClass('hidden'); },800); } }, ui: function() { $player.append( $el.controls ); $el.controls.append( $el.buttons , $el.seek ); $el.buttons.append( $el.play , $el.pause , $el.replay , $el.volume , $el.time , $el.fullscreen ); $el.volume.append( $el.toggle , $el.rail ); $el.rail.append( $el.inaudible , $el.audible , $el.grip ); $el.seek.append( $el.buffer , $el.watched ); $el.watched.append( $el.handle ); $el.time.append( $el.current , $el.divider, $el.total ); $video.addClass('visible'); }, fullscreen: function() { if($player.get(0).requestFullScreen) { $player.get(0).requestFullScreen(); } else if($player.get(0).mozRequestFullScreen) { $player.get(0).mozRequestFullScreen(); } else if($player.get(0).webkitRequestFullScreen) { $player.get(0).webkitRequestFullScreen(); } }, loadFail: function() { $el.loading .addClass('error') .text("I've got a bad feeling about this..."); // we're proceeding but it'll // probably be a problem... probably. funcs.init(); }, getPos: function( time ) { time = time || _video.currentTime; var pixels = ( $el.seek.width() / o.duration ) * time; return { time: time , pixels: pixels }; }, toHHMMSS: function( secs ) { var secs = parseInt(secs, 10); var hours = Math.floor(secs / 3600); var minutes = Math.floor((secs - (hours * 3600)) / 60); var seconds = secs - (hours * 3600) - (minutes * 60); if (hours < 10) {hours = "0"+hours;} if (minutes < 10) {minutes = ""+minutes;} if (seconds < 10) {seconds = "0"+seconds;} var time; if( hours === "00" ) { time = minutes+':'+seconds; } else { time = hours+':'+minutes+':'+seconds; } return time; }, setTime: function() { var current = funcs.toHHMMSS( funcs.getPos().time.toString() ); var total = funcs.toHHMMSS( o.duration.toString() ); $el.current.text( current ); $el.total.text( total ); }, setVolume: function( e ) { if( !$(e.target).is( $el.grip ) ) { if( $(e.target).is( $el.rail ) || $(e.target).is( $el.rail.find("*") ) ) { var x = e.offsetX || e.originalEvent.layerX; var perc = Math.floor( x / $el.rail.width() * 100); $el.grip.css({ left: + perc + "%" }); var vol = _video.volume; if( perc > 1 && perc < 99 ) { vol = perc/100; } _video.volume = vol; if( perc < 3 ) { funcs.toggleMute( true ); } else { funcs.toggleMute( false ) } } } }, toggleMute: function( on ) { if( on !== undefined ) { if( on ) { $video.prop('muted', false); $el.toggle.html(''); } else { $video.prop('muted', true); $el.toggle.html('') } } if( $video.prop('muted') ) { $video.prop('muted', false); $el.toggle.html(''); //if( _video.volume < 5 ) { _video.volume = 10; } } else { $video.prop('muted', true); $el.toggle.html(''); } }, reachEnd: function() { _video.pause(); o.isPaused = true; o.isFinished = true; o.handleFocus = false; $el.play.addClass('hidden'); $el.pause.addClass('hidden'); $el.replay.removeClass('hidden'); $el.largePlay.removeClass('hidden'); clearTimeout(o.seek); }, play: function() { _video.play(); o.isPaused = false; $el.play.addClass('hidden'); $el.largePlay.addClass('hidden'); $el.pause.removeClass('hidden'); funcs.clearLoading(); clearTimeout(o.seek); o.seek = setInterval( function() { var w = funcs.getPos(); $el.watched.width( w.pixels ); if( w.time >= o.duration ) { funcs.reachEnd(); } funcs.setTime(); funcs.getBuffered(); }, 100 ); }, pause: function() { _video.pause(); o.isPaused = true; $el.pause.addClass('hidden'); $el.replay.addClass('hidden'); $el.play.removeClass('hidden'); $el.largePlay.removeClass('hidden'); clearTimeout(o.seek); }, replay: function() { o.isFinished = false; o.isPaused = false; $el.pause.addClass('hidden'); $el.replay.addClass('hidden'); $el.play.removeClass('hidden'); $el.largePlay.removeClass('hidden'); $el.watched.animate({ 'width': '0' }, { duration: 330 , complete: function() { _video.currentTime = 0; $el.play.trigger('mouseup.play'); } }); }, seek: function( x , time ) { x = x || 0; if( !time ) { var perc = x / $el.seek.width() * 100; var pos = o.duration / 100 * perc; _video.currentTime = pos; } else { _video.currentTime = x; } funcs.setTime(); var w = funcs.getPos(); $el.watched.width( w.pixels ); if( o.isFinished ) { funcs.pause(); o.isFinished = false; } if( w.time >= o.duration ) { funcs.reachEnd(); } }, handleDrag: function(x) { if( !o.isPaused ) { funcs.pause(); o.resume = true; } var perc = x / $el.seek.width() * 100; var pos = o.duration / 100 * perc; var w = funcs.getPos(pos); $el.watched.width( w.pixels ); funcs.seek( x ); }, getBuffered: function() { var buffered = 0; if( _video.buffered.length > 0 ) { buffered = _video.buffered.end(0); $el.buffer.width( funcs.getPos( buffered ).pixels ); } return buffered; }, clearLoading: function() { $el.spinner.addClass('hidden'); $el.loading.addClass('hidden'); $video.removeClass('hidden'); setTimeout(function() { $el.spinner.remove(); $el.loading.remove(); },1000); } }; var events = function() { var t; $(window).on({ 'keydown': function(e) { if( o.handleFocus ) { var seek = 0; if( e.keyCode === 39 ) { seek = 0.1; } else if (e.keyCode === 37 ) { seek = -0.1; } if( e.shiftKey ) { seek = seek * 10; } funcs.pause(); var time = funcs.getPos().time + seek; funcs.seek( time , true ); } } }); $player.on({ 'mousedown.player': function(e) { var $what = $el.seek.add( $el.handle ).add( $el.seek.find("*") ); if( $(e.target).is( $what ) ) { o.handleDragging = true; o.handleFocus = true; } else { o.handleFocus = false; } }, 'mouseup.player': function(e) { o.handleDragging = false; if( o.resume ) { funcs.play(); o.resume = false; } }, 'mousemove.player': function(e) { if( o.handleDragging ) { // FF won't expose offsetX, so we get layerX. var x = e.offsetX || e.originalEvent.layerX; // when mouse is over the handle, it has a // different offsetX, so we need to calculate if( $(e.target).is($el.controls.find("*")) ) { if( $(e.target).is( $el.time.add( $el.time.find("*") ) ) ) { x += $el.time.get(0).offsetLeft; } else if( $(e.target).is( $el.volume.add( $el.volume.find("*") ) ) ) { x += $el.volume.get(0).offsetLeft; } else { x += e.target.offsetLeft; } } o.lastDrag = x; funcs.handleDrag(x); } }, 'mouseleave.player': function(e) { if( o.handleDragging ) { var x; if( o.lastDrag > $player.width()*0.5 ) { x = $player.width(); } else if( o.lastDrag < $player.width()*0.5 ) { x = 0; } o.lastDrag = x; o.handleDragging = false; funcs.handleDrag(x); } } }); $video.on({ 'mouseenter.video': function (e) { // set the class active, so the CSS can // show the controls bar. clearTimeout(t); $player.addClass('active'); }, 'mouseleave.video': function (e) { // remove the class after short duration clearTimeout(t); t = setTimeout(function () { $player.removeClass('active'); $el.controls.removeClass('active'); }, 700); }, 'mousemove.video': function (e) { // while we are moving around the player // is always active. $player.addClass('active'); // but if we stop (outside of the control bar) we // want the player to be inactive. clearTimeout(t); t = setTimeout(function () { $player.removeClass('active'); $el.controls.removeClass('active'); }, 2000); }, 'click.video': function() { if( o.isFinished ) { $el.replay.trigger('mouseup.replay'); } else if( o.isPaused ) { $el.play.trigger('mouseup.play'); } else { $el.pause.trigger('mouseup.pause'); } } }); $el.handle.on({ 'mouseover': function(e) { $el.handle.addClass('active'); }, 'mouseout': function(e) { $el.handle.removeClass('active'); }, 'mousedown': function(e) { o.handleFocus = true; } }); $el.controls.on({ 'mouseenter.controls': function (e) { // make sure the controls are always // active when we are on them. clearTimeout(t); $player.addClass('active'); $el.controls.addClass('active'); }, 'mouseleave.controls': function (e) { // remove the class after short duration clearTimeout(t); t = setTimeout(function () { $player.removeClass('active'); $el.controls.removeClass('active'); }, 700); } }); $el.play.on({ 'mouseup.play': function(e) { funcs.play(); } }); $el.largePlay.on({ 'click.play': function() { if( o.isFinished ) { $el.replay.trigger('mouseup.replay'); } else if( o.isPaused ) { $el.play.trigger('mouseup.play'); } else { $el.pause.trigger('mouseup.pause'); } } }); $el.pause.on({ 'mouseup.pause': function(e) { funcs.pause(); } }); $el.replay.on({ 'mouseup.replay': function(e) { funcs.replay(); } }); $el.volume.on({ 'mouseup.volume': function(e) { if( $(e.target).is( $el.toggle ) ) { funcs.toggleMute(); } }, 'mousedown.volume': function(e) { if( !$(e.target).is( $el.toggle ) ) { funcs.setVolume( e ); } }, 'mouseenter.volume': function(e) { clearTimeout(o.shift); $el.time.addClass('shift'); $el.volume.addClass('shift'); }, 'mouseleave.volume': function(e) { o.shift = setTimeout( function() { $el.time.removeClass('shift'); $el.volume.removeClass('shift'); },1000); } }); $el.fullscreen.on({ 'mouseup': function(e) { funcs.fullscreen(); } }); $el.seek.on({ 'mouseup.seek': function(e) { // dont seek if we clicked the handle if( !$(e.target).is( $el.handle ) ) { // FF won't expose offsetX, so we get layerX. var x = e.offsetX || e.originalEvent.layerX; funcs.seek(x); } } }); }; // we have to stop the other events being bound until this // event has completed, or we'll have major issues. // so it sits out of the events() setup. $el.loading.appendTo( $player ); $el.spinner.appendTo( $player ); $el.largePlay.appendTo( $player ).addClass("hidden"); var loop = 0; var ready = setInterval( function() { var state = _video.readyState; loop++; if( state > 1 ) { clearInterval( ready ); // save the length (time) of the video. o.duration = _video.duration; funcs.setTime(); funcs.getBuffered(); funcs.init(); } if( state < 1 && loop > 30 ) { clearInterval( ready ); funcs.loadFail(); } }, 500 ); }); };
Host Instantly Drag and Drop Website Builder

 

Description

HTML5 Video Player styled in CSS. Also spent a little bit of time to make a plugin for playing the video.
Term
Mon, 11/27/2017 - 22:04

Related Codes

Pen ID
Pen ID
Pen ID