HTML 5 video or audio playlist

Question

Can I use a <video> or <audio> tag to play a playlist, and to control them?

My goal is to know when a video/song has finished to play and take the next and change its volume.

Solution 1

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

Solution 2

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;
}​

Solution 3

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>

Solution 4

You should take a look at Popcorn.js - a javascript framework for interacting with Html5 : http://popcornjs.org/documentation

Solution 5

Try this solution, it takes an array of soundtracks and plays all of them, playlist-style, and even loops the playlist. The following uses a little Jquery to shorten getting the audio element. If you do not wish to use Jquery, replace the first line of the javascript with var audio = document.getElementById("audio"); and it will work the same.

Javascript:

var audio = $("#audio")[0];
var tracks = {
    list: ["track_01.mp3", "track_02.mp3", "track_03.mp3"], //Put any tracks you want in this array
    index: 0,
    next: function() {
        if (this.index == this.list.length - 1) this.index = 0;
        else {
            this.index += 1;
        }
    },
    play: function() {
        return this.list[this.index];
    }
}

audio.onended = function() {
    tracks.next();
    audio.src = tracks.play();
    audio.load();
    audio.play();
}

audio.src = tracks.play();

HTML:

<audio id="audio" controls>
    <source src="" />
</audio>

This will allow you to play as many songs as you want, in playlist style. Each song will start as soon as the previous one finishes. I do not believe this will work in Internet Explorer, but it's time to move on from that ancient thing anyways!

Just put any songs you want into the array tracks.list and it will play all of them one after the other. It also loops back to the first song once it's finished with the last one.

It's shorter than many of the answers, it accounts for as many tracks as you want, it's easily understandable, and it actually loads the audio before playing it (so it actually works), so I thought I would include it here. I could not find any sound files to use in a running snippet, but I tested it with 3 of my own soundtracks on Chrome and it works. The onended method, which detects the ended event, also works on all browsers except Internet Explorer according to caniuse.

NOTE: Just to be clear, this works with both audio and video.

View more solutions

Comments

[jhleath]

This is not actually true. The HTML5 specs don't support m3u playlist files, however there is a jquery plugin plugins.jquery.com/plugin-tags/m3u that adds in the support.

[defau1t]

will this not just play 2 files, how about playing say 10 audio files

[DanTheMan]

I think all you'd have to do is create an array of URLs (let's call it myArray), create a var i = 1, initially set nextVideo to myArray[0], and under videoPlayer.src = nextVideo; put nextVideo = myArray[i]; i++; That way every time the current video finishes, the next video will load, and the next url will be ready. PS. sorry for the complete lack of formatting, I'm at work and just wanted to answer this quickly

[cameronjonesweb]

For those who wish to loop to the first video after the second one finishes here is a very simple adaptation of the above answer: <script> var nextVideo = ["path/of/current/video.mp4","path/of/next/video.mp4"]; var curVideo = 0; var videoPlayer = document.getElementById('videoPlayer'); videoPlayer.onended = function(){ if(curVideo == 0){ videoPlayer.src = nextVideo[1]; curVideo = 1; } else if(curVideo == 1){ videoPlayer.src = nextVideo[0]; curVideo = 0; } } </script> Fiddle: jsfiddle.net/P38aV

[Ronnie Royston]

if u add the following, u can simply list all your multimedia files in your array (vs having the first one coded in as a src attr on the element. if(!audioPlayer.src){ audioPlayer.src = nextSong[currentSong]; }

[Ronnie Royston]

also, you gotta add videoPlayer.play() for the next song to autoplay in Microsoft Edge.

[Jay]

Can't use the "loop" attribute in the video element unfortunately.

[Josef Vancura]

well, this is not playlist but rather manual selection of tracks

[Roko C. Buljan]

You never just use onended. It will override any other onended listener assigned by you or other third party libraries. Always use videoPlayer.addEventListener("ended", cb) to add an additional event listener, not override it.