Fi - Video Player

by darcyclarke

HTML

<script src="http://darcyclarke.me/fi/jquery-ui-1.8.13.custom.min.js"></script>
<div class="video-player paused">
    <h2>Bamboo Dockby Wacom</h2>
    <div class="video">
    
        <!-- options -->
        <div class="options">
            
            <a href="#" class="play" title="Play Video">Play Video</a>
            
            <!-- timeline -->
            <div class="timeline">               
                <div class="progress-bar"></div>
            </div>
            <!-- /timeline -->
            
            <!-- time-duration -->
            <div class="times"></div>
            <!-- /time-duration -->
            
            <!-- volume-levels -->
            <div class="volume">
                <a href="#" class="level_1" title="Volume 10%">Volume 20%</a>
                <a href="#" class="level_2" title="Volume 40%">Volume 40%</a>
                <a href="#" class="level_3" title="Volume 60%">Volume 60%</a>
                <a href="#" class="level_4" title="Volume 80%">Volume 80%</a>
                <a href="#" class="level_5" title="Volume 100%">Volume 100%</a>                
            </div>
            <!-- /volume-levels -->
            
        </div>
        <!-- options -->
            
        <div class="wrapper"></div>
        
    </div>
    <!-- /video-container -->
    
    <!-- video-meta -->
    <div class="meta">
        <a href="#" title="Fi" class="username">Fi</a>
        <span class="divider"></span>
        <a href="#" title="Uploaded Date" class="date">Uploaded <strong>6 months ago</strong></a>
    </div>
    <!-- video-meta -->
    
</div>

CSS

body {
 font-family: sans-serif;
 background: #000;  
 color: #fff;
}
a {
 text-decoration: none;   
}
strong {
 font-weight: bold;   
}
h2 {
 font-size: 22px; 
 font-weight: 200;
 letter-spacing: -1px;
}
.video-player {
   width: 640px;
   margin: 0 auto;
}

.video-player h2 {
    margin: 0 0 10px 15px;   
}

.video-player .wrapper {
  height: 360px;
  display: block;  
  overflow: hidden;
}

.video-player .wrapper video {
    margin: -60px 0 0 0;
}

.video-player .options {
 position: absolute; 
 display: block;
 height: 40px;
 width: 620px;
 margin: 310px 0 0 10px;
 background: #000;
 opacity: 0;
 -webkit-transition: opacity 0.25s ease-in;
 -moz-transition: opacity 0.25s ease-in;
 -o-transition: opacity 0.25s ease-in;
 background: -webkit-gradient(linear, left top, left bottom, from(#212121), to(#000000));
 background: -moz-linear-gradient(top,  #212121,  #000000);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#212121', endColorstr='#000000');  
}

.video-player:hover .options {
   opacity: 1;
}

.video-player.paused .options{
   opacity: 1;     
}

.video-player .options .play {
    background: transparent url(http://darcyclarke.me/fi/video_sprite.png) no-repeat -14px -105px;
    width: 22px;
    height: 1px;
    float: left;
    display: block;
    padding: 29px 0 0 0;
    text-index: -9999px;
    overflow: hidden;
    margin: 9px 0 0 15px;
}

.video-player .options .play:hover {
    background-position: -14px -142px;    
}

.video-player .options .play.pause {
 background-position: -12px -176px;   
}

.video-player .options .play.pause:hover {
 background-position: -12px -211px;   
}

.video-player .options .timeline {
    display: block;
    width: 430px;
    float: left;
    margin: 16px 0 0 12px;
}

.video-player .options .timeline .progress-bar {
    height: 7px;
    width: 430px;
    position: absolute;
    display: block;
    -webkit-border-radius: 10px;
    -mox-border-radius: 10px;
    border-radius: 10px;
    background:...

JavaScript

var App = {};
    App.cache = {},
    App.cache.video = $('<video poster="http://ugc.kontain.com/video/20110514/prod_8b8bce6a-d944-413e-9815-3e233154d39d/tb_640x480.jpg" autobuffer="autobuffer" width="640" height="480" src="http://ugc.kontain.com/video/20110514/prod_8b8bce6a-d944-413e-9815-3e233154d39d/2c855a66-ae2f-484e-8483-2f9d7805317d.mp4"></video>');
    App.cache.times = $(".times");
    App.player = {},
    App.player.playing = false;
    App.player.volume = 3;
    App.asTime = function(theTime){
      theTime = Math.round(theTime), secs = (theTime % 60) + "" , mins = (parseInt(theTime / 60)) + "";
      if(secs.length < 2) secs = "0" + secs;
      if(mins.length < 2) mins = "0" + mins;
      return mins + ":" + secs;   
    };
    
// * done
    $(".play").bind("click", function(e){
      var el = $(this), container = el.parents(".video-player");
      e.preventDefault();
        if (App.cache.video[0].paused) {
          container.removeClass("paused");
          el.addClass("pause").text("Pause Video").attr("title","Pause Video");
          if (App.cache.video[0].ended) App.cache.video[0].currentTime = 0;
            App.player.playing = true;
            App.cache.video[0].play();
        } else {
          App.player.playing = false;
          container.addClass("paused");
          el.removeClass("pause").text("Play Video").attr("title","Play Video");
          App.cache.video[0].pause();
        } 
    });
// * done

    $(".volume a").bind("click", function(e){
        var num = parseFloat(this.className.replace(/[A-Za-z#\_\/!]/g, ''));
        App.player.volume = App.cache.video[0].volume =  num * 2 / 10;
        $(".volume a").slice(0, num).addClass("selected");
        $(".volume a").slice(num, $(".volume a").length).removeClass("selected");
    });
    
    App.cache.video.bind("loadedmetadata", function(e){
        
        $(".progress-bar").slider({
            value: 0,
            step: 0.01,
            orientation: "horizontal",
        ...