How to build a HTML 5 video playlist

1. HTML

<video id="videoarea" controls="controls" poster="http://html5videoformatconverter.com/data/images/screen.jpg" src="http://html5videoformatconverter.com/data/images/happyfit2.mp4"></video>

<ul id="playlist">
    <li data-url="http://html5videoformatconverter.com/data/images/happyfit2.mp4" data-poster="http://html5videoformatconverter.com/data/images/screen.jpg">Happy Fit</li>
    <li data-url="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4">Sintel</li>          
    <li data-url="http://html5example.net/static/video/html5_Video_VP8.webm">Resident Evil</li>      
    <li data-url="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm">Big Buck Bunny</li>
</ul>

2. CSS

<style type='text/css'>
    #playlist {
        margin:0;
        padding:0;
        list-style:none;
        float:left;
    }
    #playlist li {
        cursor:pointer;
        background:#ffffff;
        border-bottom: 1px solid #C9C9C9;
        padding: 13px 8px;
    }
    #playlist li:nth-child(odd) {
        background-color: #F8F8F8;
    }

    #playlist li:hover{
        color:blue;                        
    }
    #videoarea {
        
        float:left;
        width:640px;
        height:480px;
        margin:10px;    
        border:1px solid silver;
    }
  </style>

3. jQuery

<script type='text/javascript'>
$(window).load(function(){
    $(function() {
        $("#playlist li").on("click", function() {
            $("#videoarea").attr({
                "src": $(this).attr("data-url"),
                "poster": "",
                "autoplay": "autoplay"
            })
        })
      
    })
});

</script>

Working Demo