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

Randomized HTML5 background video on page load/refresh

本文关键字：加载 刷新 HTML5 背景 视频 随机      更新时间：2023-09-26

我实现了一个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>

由于这个问题的编辑，它不是我在评论中提到的另一个问题的副本。所以这是一个尝试!

这应该是你想要的(这里工作提琴: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%;
}
相关文章：