Javascript - 自動視頻播放列表

Question

我想知道如何在沒有任何按鈕或控件的情況下實現視頻播放列表，只需播放一組視頻並在最後一次結束時再次開始。

我發現這段關於可點擊播放列表的代碼片段：http://jsfiddle.net/e8CbF/ 但我真的不知道如何使它自動化。此外，該數組來自一個PHP變量，我該如何在代碼中使用它？

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 1

你的代碼是一團糟。所以我完全重寫它。

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