Stronia Video Player Series III - DEMO

This is the demo for stronia.com's article on video player series part III

by Anshuman Dwibhashi

HTML

Even our progress bars are updating now!!<br/>
<a href="http://jsfiddle.net/anshudwibhashi/UPQd6/3">View code</a>
<br/><br/>

<section id="skin">
    <!--Our custom video player-->
    <video height="360px" id="player" width="640px">
        <source src="http://upload.wikimedia.org/wikipedia/commons/transcoded/f/f6/Videoonwikipedia.ogv/Videoonwikipedia.ogv.480p.webm"></source>
    </video>

    <!--Our custom controls-->
    <!--We haven't covered this in the video HTML5 tutorial-->
    <nav>
        <!--First comes our play/pause button-->
        <div>
            <button type="button" id="playPause">Play</button>
        </div>
        
        <!--Then come our progress bars-->
        <div id="backgroundBar">
            <div id="bufferingBar">
                <div id="progressBar">
                </div>
            </div>
        </div>
        
        <div style="clear:both"></div>
    </nav>
</section>
<br/><br/>
NOTE: The light grey bar is the background bar, the dark grey bar represents how much of the video has been buffered and the black bar is the progress bar

CSS

body{
    text-align:center;
}

#skin{
    width:700px;
    margin:10px auto;
    padding:10px;
    background:linear-gradient(#111,#333);
    border:none;
    box-shadow:0 0 10px 10px rgba(0,0,0,0.3);
    border-radius:10px;
} 

nav{
    margin:5px 0px;
}

/*Our buttons div is called playPause if you remember*/
#playPause{
    width:75px;
    height:25px;
    float:left;
}

#backgroundBar{
    position:relative;
    float:left;
    margin-left:10px;
    width:600px;
    height:25px;
    border-radius:20px;
    background-color:gray;
}

#bufferingBar{
    position:absolute;
    width:0px;
    height:25px;
    background-color:#555;
    border-radius:20px;
}

#progressBar{
    position:absolute;
    width:0px;
    height:25px;
    background-color:black;
    border-radius:20px;
}

JavaScript

function init(){
    var player = document.getElementById("player");
    var playPause = document.getElementById("playPause");
    var backgroundBar = document.getElementById("backgroundBar");
    var bufferingBar = document.getElementById("bufferingBar");
    var progressBar = document.getElementById("progressBar");
    
    playPause.addEventListener("click", pP);
    backgroundBar.addEventListener("click", seek);
}

function pP(){
    if(!player.paused && !player.ended){
        player.pause();
        playPause.innerHTML="Play";
        clearInterval(progressInterval);
    }else{
        player.play();
        playPause.innerHTML="Pause";
        progressInterval = setInterval(updateProgress, 10);
        bufferedInterval = setInterval(updateBuffered, 10);
    }
}

function updateProgress(){
    if(!player.ended){
        var size = parseInt(player.currentTime*600/player.duration);
        progressBar.style.width=size+"px";
    }else{
        progressBar.style.width="600px";
        playPause.innerHTML="Replay";
        clearInterval(progressInterval);
    }
}

function updateBuffered(){
    if(parseInt(player.buffered.end(0))!=parseInt(player.duration)){        
        var size = parseInt(player.buffered.end(0)*600/player.duration);
        bufferingBar.style.width=size+"px";
    }else{
        bufferingBar.style.width="600px";
        clearInterval(bufferedInterval);        
    }
}

init();