rts_55 rts_55 - 2 months ago 17
Javascript Question

Javascript: Play website background videos in series?

I'm designing a landing page with video background. I'd like to auto-play a series of background video clips (looping back to #1 when the sequence runs out, although I haven't tried to integrate this wrinkle yet). I pulled some sample code off a reputable webdev blog and adapted it, but currently to no effect (my initial video plays once with the desired effect, but gives way to its poster image, rather than the next clip). Relevant html and js below. Help much appreciated!

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

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

I changed video to have a src attribute, and I used setAttribute in the ended event handler.

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

I don't have your CSS so you can't see the <a> tags or the current-video class. I also don't have your video files so I grabbed some public videos for demonstration purposes.