javascript - 自动播放和循环播放一系列视频，并随每个视频更改 CSS

Question

首先，我是一名代码新手，我很感激我的无知可能不会受到过分欢迎。尽管如此，如果您愿意放纵并帮助我，我将不胜感激。

所以，似乎在前几年，为了回应其他人，人们表达了 http://stackoverflow.com/questions/17521012/html5-video-loop-src-change-on-end-play-function-not-working作为对我问题第一部分的回答。上述答案的代码:

<video id="homevideo" width="100%" autoplay onended="run()">
    <source src="app/video1.mp4" type='video/mp4'/>
</video>

&

video_count =1;
videoPlayer = document.getElementById("homevideo");

function run(){
        video_count++;
        if (video_count == 4) video_count = 1;
        var nextVideo = "app/video"+video_count+".mp4";
        videoPlayer.src = nextVideo;
        videoPlayer.play();
   };

但是，要对此进行扩展，如果视频不遵循 video[number].mp4 命名约定，将如何构造它？我应该说，我找到并尝试了提供的解决方案 here最初，但出于某种原因它只会循环播放第一个视频而不会播放其他视频。

最后，另外，我希望每个视频都附加一个预定义的 CSS 更改。例如，当播放特定视频时，父元素的背景颜色将更改为指定的颜色。数组中的每个视频都会发生同样的情况，每个视频都有一个预定义的颜色，背景颜色将变为该颜色。

如果有人能够提供解决方案，并简要解释一下，以便我有希望学习，那就太好了!

非常感谢大家。

Answer 1

只需创建一个包含与您的视频匹配的类的数组:

var example = ['foo', 'bar', 'faz', 'video4'];

然后在循环中设置它，在 var nextVideo 之后(您已经有了那个计数器，只需重复使用它)；

var videoPlayer.classList = example[video_count-1]; // -1 as you count from 1->4, but the array 0->3