HTML5 Video Playlist: A Brief Kludge

mario

How to create a sequential video playlist using JavaScript and the HTML5 <video> tag, despite the world conspiring against you!

More...

X'o'Lore

Darn it, I feel a strong desire to try and improve this. Probably with an array. Yet I should be doing my own work.

mario

Do it! DOOOOOOO IIIIIIIIIIT

Apathy

I smell delicious procrastination.

X'o'Lore

This worked in chrome for me:

<script type="text/javascript">

   function myEndedListener(){
      var myVideo = document.getElementsByTagName('video')[0];
      myVideo.addEventListener('ended',myNewSrc,false);
   }

   var position = 0;
   var videoList=new Array("videoplaylisttest1.m4v",
                           "videoplaylisttest2.m4v",
                           "videoplaylisttest3.m4v");

   function myNewSrc() {
      var myVideo = document.getElementsByTagName('video')[0];
      if(++position >= videoList.length) {
         position = 0;
      }
      myVideo.src=videoList[position];
      myVideo.load();
      myVideo.play();
   }

</script>

It is infinitely expandable and cycles back to the beginning when it's done. It'd probably work in other browsers like opera and firefox if they supported the codec in your test videos. Hopefully they settle on a standard codec at some point for this stuff.

mario

Awesome! I was just going off of the buggy code from the sample but figured there had to be a simpler way to accomplish the task.