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.

https://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes — Jamil Noyda, Oct 11 '20 at 05:23

score 70 · Accepted Answer · edited Feb 04 '14 at 00:43

70

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

edited Feb 04 '14 at 00:43

Litestone

529
7
22

answered Mar 31 '10 at 10:39

markcial

9,041
4
31
41

will this not just play 2 files, how about playing say 10 audio files – defau1t Apr 23 '12 at 12:29
2

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 – DanTheMan Apr 22 '14 at 21:21
2

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: Fiddle: http://jsfiddle.net/P38aV/ – cameronjonesweb Jun 04 '14 at 04:38
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. – Roko C. Buljan Feb 11 '22 at 20:59

Maziar Barzi · Answer 2 · 2012-10-19T17:40:43.740

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

well, this is not playlist but rather manual selection of tracks — Josef Vancura, May 27 '20 at 13:02

Taurus · Answer 3 · 2019-05-06T13:08:03.560

6

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>

edited May 06 '19 at 13:08

answered Nov 29 '16 at 10:21

Taurus

105
1
11

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 Apr 15 '19 at 04:12
also, you gotta add `videoPlayer.play()` for the next song to autoplay in Microsoft Edge. – Ronnie Royston Apr 15 '19 at 04:43
Can't use the "loop" attribute in the video element unfortunately. – Jay Oct 03 '19 at 00:12

score 3 · Answer 4 · answered May 01 '11 at 21:34

3

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

answered May 01 '11 at 21:34

brendan

29,308
20
68
109

score 2 · Answer 5 · answered Jun 02 '12 at 17:53

2

jPlayer is a free and open source HTML5 Audio and Video library that you may find useful. It has support for playlists built in: http://jplayer.org/

answered Jun 02 '12 at 17:53

yagoogaly

99
1
3

score 2 · Answer 6 · answered Nov 30 '19 at 22:40

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.

score 1 · Answer 7 · answered Mar 31 '10 at 10:33

There's no way to define a playlist using just a <video> or <audio> tag, but there are ways of controlling them, so you can simulate a playlist using JavaScript. Check out sections 4.8.7, 4.8.9 (especially 4.8.9.12) of the HTML5 spec. Hopefully the majority of methods and events are implemented on modern browsers such as Chrome and Firefox (latest versions, of course).

score 1 · Answer 8 · edited Aug 21 '12 at 22:50

1

Yep, you can simply point your src tag to a .m3u playlist file. A .m3u file is easy to construct -

#hosted mp3's need absolute paths but file system links can use relative paths
http://servername.com/path/to/mp3.mp3
http://servername.com/path/to/anothermp3.mp3
/path/to/local-mp3.mp3

-----UPDATE-----

Well, it turns out playlist m3u files are supported on the iPhone, but not on much else including Safari 5 which is kind of sad. I'm not sure about Android phones but I doubt they support it either since Chrome doesn't. Sorry for the misinformation.

edited Aug 21 '12 at 22:50

Shi

4,178
1
26
31

answered Jul 11 '10 at 05:05

Marcus Pope

2,293
20
25

3

This is not actually true. The HTML5 specs don't support m3u playlist files, however there is a jquery plugin http://plugins.jquery.com/plugin-tags/m3u that adds in the support. – jhleath Nov 27 '10 at 19:30

score 0 · Answer 9 · answered Aug 04 '16 at 20:54

I wasn't satisfied with what was offered, so here's my proposal, using jQuery :

            <div id="playlist">
                <audio id="player" controls preload="metadata" volume="1">
                  <source src="" type="audio/mpeg">
                  Sorry, this browser doesn't support HTML 5.0
                </audio>
                <ul></ul>
            </div>

            <script>
                var folder = "audio";
                var playlist = [
                    "example1.mp3",
                    "example2.mp3"
                ];
                for (var i in playlist) {
                    jQuery('#playlist ul').append('<li>'+playlist[i]+'</li>');
                }

                var player = document.getElementById('player');
                var playing = playlist[0];
                player.src = folder + '/' + playing;

                function display(id) {
                    var list = jQuery('#playlist ul').children();
                    list.removeClass('playing');
                    jQuery(list[id]).addClass('playing');
                }

                display(0);

                player.onended = function(){
                    var ind_next = playlist.indexOf(playing) + 1;

                    if (ind_next !== 0) {
                        player.src = folder + '/' + playlist[ind_next];
                        playing = player.src;
                        display(ind_next)
                        player.play();
                    }
                }
            </script>

You only have to edit the playlist array, and you're done

score 0 · Answer 10 · answered Apr 10 '20 at 23:36

To add to the current answers, here is a playlist of videos which works with separate subtitle files. At the end of the playlist, it will go to endPage

<video id="video" controls autoplay preload="metadata">
   <source src="vid1.mp4" type="mp4">
   <track id="subs" label="English" kind="subtitles" srclang="en" src="sub1.vtt" default>
</video>

<script type="text/javascript">
var endPage = "duckduckgo.com";
var playlist = [
    { 
        'file': 'vid2.mp4',
        'subtitle': 'sub2.vtt'
    },{
        'file': 'vid3.mp4',
        'subtitle': 'sub3.vtt'
    }
]
var i = 0;
var videoPlayer = document.getElementById('video');
var subtitles = document.getElementById('subs');
videoPlayer.onended = function(){
    if(i < playlist.length){
        videoPlayer.src = playlist[i].file;
        subtitles.src = playlist[i].subtitle;
        i++;
    } else {
        console.log("We are leaving")
        document.location.href = endPage;
    }
}
</script>

score 0 · Answer 11 · answered Oct 11 '20 at 05:24

0

You can add an event listener with 'ended' as the first param

Like this :

https://stackoverflow.com/a/2880950/6839331

answered Oct 11 '20 at 05:24

Jamil Noyda

3,321
2
21
26

score -1 · Answer 12 · answered Jun 28 '10 at 14:48

-1

It has been done there : http://www.jezra.net/projects/pageplayer

answered Jun 28 '10 at 14:48

Laurent Debricon

4,307
2
24
26

HTML 5 video or audio playlist

12 Answers12

Linked

Related