加载时随机全屏视频背景(包括 jsfiddle)

Random Fullscreen Video Background on Load (jsfiddle included)

本文关键字:包括 jsfiddle 背景 视频 随机 加载      更新时间:2023-09-26

试图让我的网站显示我将维护的视频文件夹中的随机全屏背景视频。我想继续添加到文件夹(bg1.mp4,bg2.mp4等),并让代码在加载页面时自动选择一个随机视频进行循环。

这是我当前的代码:https://jsfiddle.net/nenr3kyn/2/,它的功能不完全。我有一个特定的视频被选为源文件:

<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">

因为我似乎无法让 html 调用 JavaScript 设置的变量"vid",如下所示:

<source src=vid type="video/mp4">

此外,此代码不允许我简单地将文件添加到文件夹中,并且将我限制在代码中专门列出的视频中。我宁愿让 javascript 能够计算文件夹中当前的所有文件并选择一个随机文件,但也无法让它工作。

有什么想法吗?任何意见都非常感谢。非常感谢!!

不要使用 loop 属性,它不会触发ended事件。

videoPlayer.addEventListener('ended', function(){
       var videoLink = ['link1', 'link2','link3'];
       var nextVid = Math.floor( Math.random() * videoLink.length);
       this.src = videoLink[nextVideo];
       this.play();
    });

希望这会有所帮助