HTML 5 video or audio playlist

you could load next clip in the onend event like that

<script type="text/javascript">var nextVideo = "path/of/next/video.mp4";var videoPlayer = document.getElementById('videoPlayer');videoPlayer.onended = function(){    videoPlayer.src = nextVideo;}</script><video id="videoPlayer" src="path/of/current/video.mp4" autoplay autobuffer controls />

More information here

I created a JS fiddle for this here:

http://jsfiddle.net/Barzi/Jzs6B/9/

First, your HTML markup looks like this:

<video id="videoarea" controls="controls" poster="" src=""></video><ul id="playlist">    <li movieurl="VideoURL1.webm" moviesposter="VideoPoster1.jpg">First video</li>    <li movieurl="VideoURL2.webm">Second video</li>    ...    ...</ul>

Second, your JavaScript code via JQuery library will look like this:

$(function() {    $("#playlist li").on("click", function() {        $("#videoarea").attr({            "src": $(this).attr("movieurl"),            "poster": "",            "autoplay": "autoplay"        })    })    $("#videoarea").attr({        "src": $("#playlist li").eq(0).attr("movieurl"),        "poster": $("#playlist li").eq(0).attr("moviesposter")    })})​

And last but not least, your CSS:

#playlist {    display:table;}#playlist li{    cursor:pointer;    padding:8px;}#playlist li:hover{    color:blue;                        }#videoarea {    float:left;    width:640px;    height:480px;    margin:10px;        border:1px solid silver;}​

I optimized the javascript code from cameronjonesweb a little bit. Now you can just add the clips into the array. Everything else is done automatically.

<video autoplay controls id="Player" src="http://www.w3schools.com/html/movie.mp4" onclick="this.paused ? this.play() : this.pause();">Your browser does not support the video tag.</video><script>var nextsrc = ["http://www.w3schools.com/html/movie.mp4","http://www.w3schools.com/html/mov_bbb.mp4"];var elm = 0; var Player = document.getElementById('Player');Player.onended = function(){    if(++elm < nextsrc.length){                  Player.src = nextsrc[elm]; Player.play();    } }</script>