CODEWITHSUNDEEP
javascripthtml
B.T
B.T

Reputation: 551

Javascript - Automatic video playlist

I'd like to know how could I achieve a video playlist without any buttons or control that would simply play an array of videos and would start again when the last is over.

I found this piece of code about a clickable playlist : http://jsfiddle.net/e8CbF/ but I really don't know how to make it automatic. Also, the array is coming from a PHP variable, how I can I use it inside this code ? 

function loadVids(vidsArray){
 for(var a=0,b,f=document.createDocumentFragment();b=vidsArray[a];++a){
  var c=document.createElement('div');
  c.textContent=b;
  f.appendChild(c);
 }
 d.appendChild(f);
}
var video=document.createElement('video'),vids=['http://screen.alifts.com/screenfiles/video1.mp4','http://screen.alifts.com/screenfiles/video2.mp4'], /* Is it there that I should put the php array ? */
d=document.createElement('div');
d.onclick=function(e){if(e.target.parentNode==this){
 video.src=e.target.textContent;
 video.play();
}} 
document.body.appendChild(video);
document.body.appendChild(d);
loadVids(vids);

Upvotes: 0

Views: 956

Answers (1)

Jonas Wilms
Jonas Wilms

Reputation: 138257

Your code is a total mess. So i completely rewrite it.

<video src="" id="player"/>

<script>
var video=counter=0;

videos=['<?php echo join("';'",$array);?>'];

window.onload=()=>{
    //get the video frame
    video=document.getElementById("player");
    //if the video ended, play next.
   video.addEventListener("ended",play,false);
    //start
    play();
}

var play=()=>{
    //add the video src
    video.src=videos[counter];
    //play next video next time
    counter++;
    if(counter==videos.length){
         counter=0;
    }
};
</script>

Upvotes: 1

Related Questions