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

私はsrc属性を持っているvideoを変更し、私は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>

あなたが<a>タグやcurrent-videoクラスを見ることができないので、私はあなたのCSSを持っていません。私もあなたのビデオファイルを持っていないので、私はデモンストレーションの目的のためにいくつかの公共のビデオをつかんだ。