背景视频播放列表

Question

我有本教程的视频背景设置：https://slicejack.com/video-background-playlist/。 我无法让播放列表正常工作。谁能帮我？ 播放列表中有两个视频可以播放，但只有第一个可以播放。 所有视频都托管在github上。 我在代码笔上进行了设置：https://codepen.io/SEGACD32XMODEL1/pen/xxbwRdB?editors=1000

<div id="video-player" class="fullscreen-bg">
<video class="fullscreen-bg__video" autoplay muted poster="img/BLUE_DOTS.jpg" preload>
<source src="https://robocop79.github.io/video/I Got a Boner! - Spongebob.mp4" 
type="video/mp4">
</video>
<div class="fullscreen-bg__playlist">
<a href="https://robocop79.github.io/video/I Got a Boner! - Spongebob.mp4" class="current- 
video"></a>
<a href="https://robocop79github.io/video/ps2rsod.mp4"></a>
<a href="video/RED_DOTS.mp4"></a>
</div>
</div>
<script>
( function() {
/* Variables */
var videoPlayer = document.getElementById( 'video-player' ),
video = videoPlayer.getElementsByClassName( 'fullscreen-bg__video' )[0],
playlist = videoPlayer.getElementsByClassName( 'fullscreen-bg__playlist' )[0],
source = video.getElementsByTagName( 'source' ),
linkList = [],
videoDirectory = '/video/',
currentVideo = 0,
allLinks = playlist.children,
linkNumber = allLinks.length,
i, filename;
/**
* Load and play video
* @param  int index Video index
*/
function playVideo( index ) {
allLinks[index].classList.add( 'current-video' );
currentVideo = index;
source[2].src = videoDirectory + linkList[index] + '.ogv';
source[1].src = videoDirectory + linkList[index] + '.webm';
source[0].src = videoDirectory + linkList[index] + '.mp4';
video.load();
video.play();
}
// Save all video sources from playlist
for ( i = 0; i < linkNumber; i++ ) {
filename = allLinks[i].href;
linkList[i] = filename.match( /([^/]+)(?=.w+$)/ )[0];
}
/**
* Play next video
*/
video.addEventListener( 'ended', function () {
allLinks[currentVideo].classList.remove( 'current-video' );
nextVideo = currentVideo + 1;
if ( nextVideo >= linkNumber ) {
nextVideo = 0;
}
playVideo( nextVideo );
} );
} () );
</script>
<style>
* {
box-sizing: border-box
}
body {
margin: 0;
padding: 0;
color: #fff;
}
.content {
margin: 20px auto;
width: 100%;
max-width: 960px;
padding: 30px 40px;
background: rgba(0,0,0,0.35);
}
h1 {
margin: 0 0 20px 0;
padding: 0;
font-size: 50px;
text-align: center;
}
p {
margin: 0 0 30px 0;
font-size: 22px;
line-height: 1.4;
}
p:last-child {
margin-bottom: 0;
}
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fullscreen-bg__playlist {
display: none;
}
@media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%;
}
}
@media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%;
}
}
@media (max-width: 767px) {
.fullscreen-bg {
background: url('../img/BLUE_DOTS.jpg') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
}
</style>

Answer 1

在视频标签下添加这些

<source src="https://robocop79.github.io/video/I Got a Boner! - Spongebob.mp4" 
type="video/mp4">
<source src="https://robocop79.github.io/video/I Got a Boner! - Spongebob.ogv" 
type="video/mp4">
<source src="https://robocop79.github.io/video/I Got a Boner! - Spongebob.webm" 
type="video/mp4">

---

或者只在JS代码中保留这个

source[0].src = videoDirectory + linkList[index] + '.mp4';