Viafoura - Video Player

by darcyclarke

HTML

<script src="http://darcyclarke.me/fi/jquery-ui-1.8.13.custom.min.js"></script>
<script src="https://raw.github.com/janl/mustache.js/master/mustache.js"></script>
<a href='#' onclick='Viafoura.publish("videos-load", [event, this, 89])' class='vf-play-all'>Play All Videos</a>

CSS

.vf-clearBoth {
 clear: both;
 width: 100%;
 display: block;
}
.cf:before,
.cf:after {
    content:"";
    display:table; 
}
.cf:after { clear:both; }
.cf { zoom:1; }

.vf-overlay {
 position: absolute;
 width: 100%;
 height: 100%;
 left: 0;
 top: 0;
 background: #000;
 opacity: 0.5; 
 z-index: 1;
}

.vf-popup {
 z-index: 999; 
  position: relative;
}
.vf-video-conversation {
    padding: 3%;
    width: 800px;
    margin: 25px auto 0;
    background: #fff;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5);
    box-shadow: 0 0 10px rgba(0,0,0,0.5); 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.vf-video-conversation video {
    float: left;
    width: 125px;
    height: auto;
    margin: 50px 0 0 15px;
}

.vf-video-conversation video.vf-active {
    margin: 0;
    width: 640px;
    height: auto;
}

.vf-videos {
  position: relative; 
  height: 480px;
  display: block;
  overflow: hidden;
}

.vf-videos .vf-inner {
  position: absolute; 
  width: 1600px;
  height: 480px;
}

.vf-video-options {
    font-family: sans-serif;
    font-size: 12px;
    height: 34px;
    width: 100%;
    display: block; 
    clear: both;
    margin: 5px 0 0 0;
    float: left;
    background: #000;
    border-bottom: 1px solid #5a5a5a;
}

.vf-video-options a {
    color: #fff;
    text-decoration: none;
}

.vf-play {
    margin: 10px 0 0 2%;
    display: block;
    float: left;
}

.vf-timeline {
    height: 4px;
    width: 70%;
    display: block;
    background: #fff;
    float: left;
    margin: 15px 0 0 2%;
}

.vf-points {
  margin: 0 0 0 0;
}

.vf-point {
 background: #ccc;
 height: 10px;
 width: 10px;
 display: block;
 -webkit-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
 transform:rotate(45deg);
 float: left;
 margin: -10px 0 0 -5px;
 position: absolute;
}

.vf-point.vf-blue {
 background: #83c2d1;
    -webkit-box-shadow: 1px 1px 0 #2a525c; 
 -moz-box-shadow: 1px 1px 0 #2a525c; 
...

JavaScript

(function(){
    
    /*************************************************************/
    /* Defaults
    /*************************************************************/
    
    var Viafoura = VF = {};
    Viafoura.subscriptions = {};
    Viafoura.queue = [];
    Viafoura.cache = {};
    Viafoura.videos = [];
    Viafoura.videos_loaded = 0;
    Viafoura.player = {};
    Viafoura.player.elapsed = 0;
    Viafoura.player.duration = 0;
    Viafoura.player.volume = 5;
    Viafoura.player.playing = false;
    Viafoura.player.ended = false;
    Viafoura.player.current_video = {};
    Viafoura.player.current_video_id = 0;
    
    /*************************************************************/
    /* Templates
    /*************************************************************/
    
    Viafoura.tmpl = {};
    Viafoura.tmpl.video_overlay = "<div class='vf-overlay' onclick='Viafoura.publish(\"overlay-close\", [event, this])' style='display:none;'></div><div class='vf-popup' style='display:none;'><div class='vf-video-conversation vf-video-paused'><div class='vf-videos'><div class='vf-inner cf'></div></div><div class='vf-video-options'><a href='#' class='vf-icon vf-play' title='Play Video' onclick='Viafoura.publish(\"video-play\", [event, this]);'>Play Video</a><div class='vf-timeline'><div class='vf-points'></div><div class='vf-progress-bar'></div></div><div class='vf-duration'></div></div><div class='vf-clearBoth'></div></div></div>";
    Viafoura.tmpl.video_point = "<a href='#' class='vf-point' style='background-color:{{color}};margin-left:{{margin}};'></a>";
    
    /*************************************************************/
    /* Temporary Video Data
    /*************************************************************/
    Viafoura.videos.push($('<video autobuffer="autobuffer" onclick="Viafoura.publish(\'video-change\',[event,this])" width="160" height="120"><source src="http://s3.amazonaws.com/s3.viafoura.net/community.mmabay.co.uk/588332.fmt3.mp4"...