Stronia Video Player Series I - DEMO

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

by Anshuman Dwibhashi

HTML

Our video player doen't yet work, we're simply styling it.<br/><a href="http://jsfiddle.net/anshudwibhashi/CM72X/11/">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>