页面加载/刷新时的随机 HTML5 背景视频答案

【问题标题】：Randomized HTML5 background video on page load/refresh页面加载/刷新时的随机 HTML5 背景视频
【发布时间】：2015-10-01 17:21:43
【问题描述】：

我已将 HTML5 视频实现为全屏背景视频。每次有人打开页面或刷新页面时，我想让背景视频随机更改为另一个（我将有大约 3 或 4 个视频可供选择。）直到页面刷新或重新打开那个不过，视频会播放。如果有意义，它不会循环播放 3 或 4 个视频。

这个问题被标记为与另一个问题重复，这给了我部分答案。

var videoList = ["video1", "video2", "video3", "video4", "video5"];
videoList.sort(function (a, b) {
return Math.random() > 0.5 ? -1 : 1;

我现在的问题是，如何将这些视频文件“绑定”到 html 视频的来源？

<video autoplay  poster="" id="bgvid" loop>
    <source src="?" type="video/webm">
    <source src="?" type="video/mp4">
</video>

【问题讨论】：

我有 html 视频部分，但我不会编写 javascript，所以我什至不知道从哪里开始。这是我的导演给我的最后一分钟的任务。
我看到有随机背景图片的教程，但找不到任何视频教程，而且它们的翻译似乎不够直接，我无法尝试自定义。
标记为重复：stackoverflow.com/questions/18751995/…
@UncleRico 这是怎么复制的？这是一个视频播放列表。这是一个视频。
@UncleRico 在我进行上述编辑后，您认为您可以帮助我吗？

标签： javascript jquery html video

【解决方案1】：

自编辑问题以来，它与我在 cmets 中提到的另一个问题不重复。所以这里是一个尝试！

这应该是你想要的（在这里工作小提琴：http://jsfiddle.net/bccbx53p/2/）：

HTML（文本覆盖背景视频，最大化右侧面板以查看在文本后面播放的视频）：

<div id="videoplayer" width="600" height="800"></div>

<H1>TEST TEXT OVERLAYING THE BACKGROUND</H1>

JavaScript：

var videoList = ["http://www.w3schools.com/html/mov_bbb.mp4", "http://media.sublimevideo.net/v/next15-sublime_360p.mp4"];
videoList.sort(function(a, b) {return 0.5 - Math.random()});

$("#videoplayer").html("<video id='rawvideo' autoplay poster='' id='bgvid' loop><source src='" + videoList[0] + "' type='video/mp4'></video>");

CSS：

#videoplayer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: -100;
}

#rawvideo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

【讨论】：

为什么是0.5 - Math.random() 而不是Math.random()？
@JohnBoker，这是一段有趣的代码：stackoverflow.com/questions/962802/…
啊我忘了sort方法不是按值排序，而是返回的值是负数、正数还是零。
@UncleRico 感谢您的回复！有没有办法让我继续使用我的视频元素，而不必创建一个视频播放器 div？或者有没有办法确保这些视频是全屏背景视频？
@crarls，要获得全屏背景视频，您只需将适当的 CSS 应用于 div 即可。我会看这里（slicejack.com/…），您只需要正确识别<div> 和<video> 标签。