Html 5 Video or Audio Playlist

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

html5 video playlist - without javascript?

The browser will select the first source it is capable of playing. The point of having multiple sources is so that you can provide the same video at different encodings and bitrates.

Currently it is not possible to create a playlist just using markup. The only way I can think of which might simulate it would be to use the :target pseudo class in CSS:

<style>
video { display:none; }
video:target { display: inline-block; }
</style>
<ul>
    <li><a href="#one">First video</a></li>
    <li><a href="#two">Second video</a></li>
</ul>
<video controls id="one">
    <source src="/media/uploads/2010/09/1527/7_bbc-radio-1-hq.mov"></source>
</video>
<video controls id="two">
    <source src="/media/uploads/2010/10/1557/7_costa-monkeys.mov"></source>
</video>

Where this falls down is that users will have to stop and start the videos manually, as well as click the links to navigate between them.

HTML5/JavaScript audio playlist

1) JavaScript code is using jQuery (those $(...) statements), so it must be imported:

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  </head>
<body>
...

2) The audio HTML element (the real "player") is missed:

<body>
  <audio id="audio" preload="auto" tabindex="0" controls="" >
    <source src="http://www.codenamejupiterx.com/song/soundtest.mp3">
  </audio>
...

3) The code play only TWO songs. To play THREE:

...
len = tracks.length; //"-1" removed
...

4) The code play again and again the three songs. To stop it:

audio[0].addEventListener('ended',function(e){
    current++;
    if(current < len){
      link = playlist.find('a')[current];   
      run($(link),audio[0]);
    }
});

Html 5 Video or Audio Playlist