HTML 5 video or audio playlist

Question

Can I use a  lt video gt  or  lt audio gt  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

User · Answer

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

User · Answer

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    lt video autoplay controls id  Player  src  http   www w3schools com html movie mp4  onclick  this paused   this play     this pause     gt Your browser does not support the video tag  lt  video gt    lt script gt  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  lt  nextsrc length                     Player src   nextsrc elm   Player play              lt  script gt

User · Answer

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

User · Answer

It has been done there   http   www jezra net projects pageplayer

User · Answer

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    lt audio id  audio  controls gt       lt source src      gt   lt  audio gt    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

User · Answer

You can add an event listener with  ended  as the first param Like this   https   stackoverflow com a 2880950 6839331

User · Answer

you could load next clip in the onend event like that   lt script type  text javascript  gt  var nextVideo    path of next video mp4   var videoPlayer   document getElementById  videoPlayer    videoPlayer onended   function        videoPlayer src   nextVideo     lt  script gt   lt video id  videoPlayer  src  path of current video mp4  autoplay autobuffer controls   gt    More information here

User · Answer

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   lt video id  video  controls autoplay preload  metadata  gt      lt source src  vid1 mp4  type  mp4  gt      lt track id  subs  label  English  kind  subtitles  srclang  en  src  sub1 vtt  default gt   lt  video gt    lt script type  text javascript  gt  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  lt  playlist length           videoPlayer src   playlist i  file          subtitles src   playlist i  subtitle          i          else           console log  We are leaving           document location href   endPage           lt  script gt

User · Answer

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

User · Answer

There s no way to define a playlist using just a  lt video gt  or  lt audio gt  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

User · Answer

I wasn t satisfied with what was offered  so here s my proposal  using jQuery                  lt div id  playlist  gt                   lt audio id  player  controls preload  metadata  volume  1  gt                     lt source src    type  audio mpeg  gt                    Sorry  this browser doesn t support HTML 5 0                  lt  audio gt                   lt ul gt  lt  ul gt               lt  div gt                lt script gt                  var folder    audio                   var playlist                          example1 mp3                        example2 mp3                                     for  var i in playlist                        jQuery   playlist ul   append   lt li gt   playlist i    lt  li gt                                        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                                                         lt  script gt    You only have to edit the playlist array  and you re done

User · Answer

I created a JS fiddle for this here    http   jsfiddle net Barzi Jzs6B 9   First  your HTML markup looks like this    lt video id  videoarea  controls  controls  poster    src    gt  lt  video gt    lt ul id  playlist  gt       lt li movieurl  VideoURL1 webm  moviesposter  VideoPoster1 jpg  gt First video lt  li gt       lt li movieurl  VideoURL2 webm  gt Second video lt  li gt                   lt  ul gt    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

[javascript] HTML 5 video or audio playlist

Examples related to javascript

Examples related to html

Examples related to audio

Examples related to video