Question

我已将HTML5视频实施为全屏背景视频。每当有人打开页面或刷新页面时，我都希望将背景视频随机更改为另一个（我将有大约3或4个可以选择的视频。）直到页面刷新或但是重新开放只是一个视频会播放。如果有意义的话，它不会循环播放3或4个视频。

这个问题被标记为另一个问题的副本，这给了我部分答案。

root

我现在的问题是，我如何打造＆＃39;这些视频文件是html视频的来源吗？

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

Answer 1

自编辑问题以来，它与我在评论中提到的其他副本不重复。所以这是一次尝试！

这应该是你想要的（在这里工作：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%;
}

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

1 个答案: