Javascript：連續播放網站背景視頻？

Question

我正在設計具有視頻背景的着陸頁。我想自動播放一系列背景視頻剪輯（當序列用完時循環回＃1，儘管我還沒有嘗試整合這種皺紋）。我從一個有聲望的webdev博客中抽取了一些示例代碼並對其進行了修改，但目前無效（我的第一個視頻只播放了一次，但讓位給它的海報圖像，而不是下一個剪輯）。下面的相關html和js。非常感謝！

<div id="video-box"> 
    <video class="landing-video" autoplay muted poster="./resources/media/images/Two-Swimmers.jpg"> 
     <source src="./resources/media/video/Two-Swimmers.mp4" type="video/mp4" /> 
    </video> 

    <div class="video-playlist"> 
     <a href="./resources/media/video/Two-Swimmers.mp4" class="current-video"></a> 
     <a href="./resources/media/video/Snow.mp4"></a> 
     <a href="./resources/media/video/Keep_Running.mp4"></a> 
     <a href="./resources/media/video/Motorcycle.mp4"></a> 
     <a href="./resources/media/video/Surfer.mp4"></a> 
     <a href="./resources/media/video/Beach-Ball.mp4"></a> 
    </div> 
</div> 
<script type="text/javascript" src="video.js"></script> 

的Video.js代碼：

(function() { 

var videoPlayer = document.getElementById('video-box'), 
    video = videoPlayer.getElementsByClassName('landing-video')[0], 
    playlist = videoPlayer.getElementsByClassName('video-playlist')[0], 
    source = video.getElementsByTagName('source'), 
    linkList = [], 
    videoDirectory = './resources/media/video/', 
    currentVideo = 0, 
    allLinks = playlist.children, 
    linkNumber = allLinks.length, 
    i, filename; 

function playVideo(index) { 
    allLinks[index].classList.add('current-video'); 
    currentVideo = index; 
    source[0].src = videoDirectory + linkList[index] + '.mp4'; 
    video.load(); 
    video.play(); 
} 

for (i = 0; i < linkNumber; i++) { 
    filename = allLinks[i].href; 
    linkList[i] = filename.match(/([^\/]+)(?=\.\w+$)/)[0]; 
} 

video.addEventListener('ended', function() { 
    allLinks[currentVideo].classList.remove('current-video'); 
    nextVideo = currentVideo + 1; 
    if (nextVideo >= linkNumber) { 
     nextVideo = 0; 
    } 
    playVideo(nextVideo); 
    }); 

}()); 

Answer 1

我改變video具有src屬性，以及我在ended事件處理程序使用的setAttribute。

var video = document.querySelector('video'); 
 
var links = document.querySelectorAll('.video-playlist > a'); 
 
var i = 0; 
 
video.addEventListener('ended', function() { 
 
    i++; 
 
    if (i >= links.length) { 
 
    current = 0; 
 
    } 
 
    var a = links.item(i); 
 
    a.className = 'current-video'; 
 
    video.setAttribute('src', a.href); 
 
\t video.play(); 
 
});

<div id="video-box"> 
 
    <video class="landing-video" autoplay muted src="https://www.w3schools.com/html/mov_bbb.mp4"> 
 
    </video> 
 

 
    <div class="video-playlist"> 
 
     <a href="https://www.w3schools.com/html/mov_bbb.mp4" class="current-video"></a> 
 
     <a href="https://upload.wikimedia.org/wikipedia/commons/transcoded/8/82/FSN_nuclear_fission.theora.ogv/FSN_nuclear_fission.theora.ogv.480p.webm"></a> 
 
     <a href="https://upload.wikimedia.org/wikipedia/commons/transcoded/3/32/Open_research.ogv/Open_research.ogv.480p.webm"></a> 
 
    </div> 
 
</div>

我沒有你的CSS，所以你不能看到<a>標籤或current-video類。我也沒有你的視頻文件，所以我抓了一些公開的視頻進行演示。