Stronia Video Player Series II - DEMO

This is the demo for stronia.com's article on video player series part II http://www.stronia.com/2014/07/video-player-series-i.html

by Anshuman Dwibhashi

HTML

Our video player doesn't yet work, we're simply styling it yet...<br/><a href="http://jsfiddle.net/anshudwibhashi/2RfQD/4/">View code</a><br/><br/>

<section id="skin">
    <!--Our custom video player-->
    <video height="360px" id="player" width="640px">
        <source src="http://www.w3schools.com/html/movie.mp4"></source>
        <source src="http://www.w3schools.com/html/movie.ogg"></source>
    </video>

    <!--Our custom controls-->
    <!--We haven't covered this in the video HTML5 tutorial-->
    <nav>
        <!--First comes our play/pause button-->
        <div id="playPause">
            <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>

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.1);
    border-radius:10px;
} 

nav{
    margin:5px 0px;
}

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