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类。我也没有你的视频文件，所以我抓了一些公开的视频进行演示。