Ezhno Ezhno - 14 days ago 5
HTML Question

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.digitalifts.com/screenfiles/video1.mp4','http://screen.digitalifts.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);

Answer

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>
Comments