Video player

by James Doyle

HTML

<div class="player-holder">
    <div class="poster-holder">
        <img src="http://www.operatordtp.pl/img/spiderman.jpg" class="track-image" />
        <img src="http://www.operatordtp.pl/img/overlay.png" width="298" height="196" class="overlay"/>
        <div class="progress-bar-and-controls">
        <div class="progress-bar-container">
            <div class="progress-bar-holder">
                <div class="progress-bar" style="width: 20%;">
                </div>    
            </div>
        </div>
        <div class="controls-and-meta">
            <h2 class="track-title">The Briefcase</h2>
            <h2 class="track-artist">James Horner - <span class="track-desc">The Amazing Spider-Man</span></h2>
            <div class="control-button prev-button">
                <span></span>
            </div>
            <div class="control-button next-button">
               <span></span>                
            </div>
            <div class="audio-slider">
                <span class="audio-slide-box">
                    <span class="audio-slide-box-bg"></span>
                </span>
                <span class="audio-slide-controler">                    
                </span>                
            </div>
            <div class="control-button play-button">      
                <span></span>
            </div>
            <div class="audio-button control-button">
                <span></span>   
            </div>
            <div class="shuffle-button">
                  
            </div>
        </div>
    </div>
    </div>
</div>
<div class="track-list">
    <div class="single-list-track"><span class="track-title">The Briefcase</span> <span class="track-artist">James Horner</span></div>
    <div class="single-list-track"><span class="track-title">The Piano</span> <span class="track-artist">Leszek Możdżer</span></div>
    <div class="single-list-track"><span class="track-title">Something</span> <span class="track-artist">cool,...

CSS

.player-holder.track-intro{
-webkit-animation: none;        
}
.player-holder{
    -webkit-animation: MainMove 0.8s;
    background: #010101;
    margin: 30px auto;
    width: 298px;
    height: 324px;
    border: 1px solid rgba(0,0,0, 0.8);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    position:relative;
    -moz-box-shadow:    0 0 10px rgba(0,0,0, 1);
    -webkit-box-shadow:  0 0 10px rgba(0,0,0, 1);
    box-shadow:         0 0 10px rgba(0,0,0, 1);
    position:relative;
}
.track-list{
overflow: hidden;
    margin: -358px auto 30px;
    width: 298px;
    height: 324px;
    border: 1px solid rgba(0,0,0, 0.8);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    

    position:relative;
    display: none;
margin-top: -358px; background: rgba(0,0,0, 0.8);    
}
.poster-holder{
    width: 298px;
    height: 324px;
    -moz-box-shadow:    inset 0 0 2px rgba(255,255,255, 0.6);
    -webkit-box-shadow:  inset 0 0 2px rgba(255,255,255, 0.6);
    box-shadow:         inset 0 0 2px rgba(255,255,255, 0.6);
}
.image-container{
    height: 196px;
    width: 298px;
    margin:0;
    padding:0;
}
.progress-bar-and-controls{
    position: absolute;
    top:196px;
    left:0;
    width: 100%;
}
.progress-bar-holder{
    height: 6px;
    border: 1px solid #000;
    background: #0f0f0f; /* Old browsers */
    background: -moz-linear-gradient(top,  #111111 0%, #0f0f0f 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111111), color-stop(100%,#0f0f0f)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #111111 0%,#0f0f0f 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #111111 0%,#0f0f0f 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #111111 0%,#0f0f0f 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #111111 0%,#0f0f0f 100%); /* W3C */
}
.progress-bar-container{
...

JavaScript

var $audioSlider    = $('.audio-slider'),
    $audioButton    = $('.audio-button'),
    $audioSlideControler = $('.audio-slide-controler'),
    $audioSlideBoxBg = $('.audio-slide-box-bg'),
    $playerHolder = $('.player-holder'),
    $shuffleButton = $('.shuffle-button'),
    audioSliderHeight = $audioSlider.height();
    
$audioSlider.css('display' , 'none');

$audioButton.on('click', function(e){
    e.stopPropagation();
     if($audioSlider.closest('.active').length){
        $audioSlider.removeClass('active').fadeOut();        
    }else{    
        $audioSlider.addClass('active').fadeIn();
    }  
});
$('.progress-bar-holder').on('click', function(e){
    updatedProgressBarWidth = e.offsetX/$(this).width()*100;
    
    $('.progress-bar').animate({ 'width' :  updatedProgressBarWidth+'%'}, 200);
})

$('.prev-button, .next-button').on('click', function(e){
    e.preventDefault();
    $playerHolder.addClass('track-intro');
    $('.progress-bar-and-controls, .track-image,.overlay').fadeOut().fadeIn();
});
$shuffleButton.on('click', function(){
    
    if($playerHolder.css('opacity') == 1){
         $('.track-list').fadeIn();
         $playerHolder.animate({'opacity':'.7'},300);
        }else{
         $('.track-list').fadeOut();
            
        $playerHolder.animate({'opacity':'1'},300);  
        }
});
        $('.track-list').on('click', function(){
            $(this).fadeOut();
            $playerHolder.animate({'opacity':'1'},300) ;
        });
$audioSlider.on('click', function(e){
    topValue = e.offsetY;
    e.stopPropagation();
    if(topValue > 1 && topValue < 90){
        $audioSlideBoxBg.stop(true,true).animate({ 'height': topValue}, 500);
          $audioSlideControler.stop(true,true).animate({'top': topValue }, 500);
      
                   
    }      
});
$playerHolder.on('click', function(){
     if($playerHolder.find('.active').length){
        $audioSlider.removeClass('active').fadeOut(); 
     }         
});