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

我更改了app.hash.js以获得video属性，并在src事件处理程序中使用了setAttribute。

＆＃13;

ended

＆＃13;

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);
	video.play();
});

＆＃13;

我没有您的CSS，因此您无法看到<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>类。我也没有你的视频文件所以我抓了一些公开的视频用于演示目的。

Javascript：播放系列中的网站背景视频？

1 个答案: