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

标签 javascript css html video random

尝试让我的网站显示我将维护的视频文件夹中的随机全屏背景视频。我想继续添加到文件夹(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属性,它不会触发ending事件。

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

希望这会有所帮助

关于javascript - 加载时随机全屏视频背景(包括 jsfiddle),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35930786/

相关文章:

javascript - 遍历从 JQuery XML 对象返回的子对象的子对象

javascript - 为什么在iife中使用赋值运算符时 'this'指向 'window' obj?

javascript - 静态大小的外部元素,尤其是在右侧和下方使用 .animate()

javascript - 模态重叠内容并使内容在 Bootstrap 中不可点击?

javascript - 动态添加代码后单击事件不起作用

html - 使用 Safari 的 CSS 计算中缺少 2px

javascript - 在 Vue 中按键交换数组内容

css - bootstrap 3.1.1 在外部单击时崩溃关闭

CSS 显示内联使两行而不是一行

jquery - 单击时放大这些缩略图的最佳方法是什么?图片目前没有链接