背景影片HTML5

Question

当用户刷新页面更改为其他视频时，我想使用不同的视频创建背景。

现在我有了这个，也许可以使用javascript我可以做到，但我不知道如何。

   <video loop="loop" preload="auto" muted="" autoplay="" poster="/templates/smartone/images/video/fondo.jpg" id="bgvid">
<source src="/templates/smartone/images/video/fondo1.mp4" type="video/mp4">  
<source src="/templates/smartone/images/video/fondo1.webm" type="video/webm">
</video>

Answer 1

正如@zmehboob所说，您必须制作一个视频列表以随机选择一个。

为此，我使用的object包含用于创建source元素的不同可用类型，然后在迭代其对source元素的扩展之前，为src选择一个随机对象。

这是一些代码（Vanilla）：

 // first create the list with extensions as parameters var videoList = { 'http://media.w3.org/2010/05/sintel/trailer': ['mp4', 'ogv'], 'http://media.w3.org/2010/05/bunny/movie': ['mp4', 'ogv'] }; function create_BG_Video() { //create the video element and its source var el = document.createElement('video'); var source = document.createElement('source'); // here is the magic that takes a random key in videoList object var k = randomKey(videoList); //iterate through each extension to make a new source type for (m in videoList[k]) { source.src = k + '.' + videoList[k][m]; var type; //as ogg video may be with a '.ogv' extension, we have to watch for it (videoList[k][m] == 'ogv') ? type = 'ogg': type = videoList[k][m]; source.type = "video/" + type; el.appendChild(source); } el.className = 'bg_video'; el.width = window.innerWidth; el.height = window.innerHeight; el.setAttribute('autoplay', 'true'); //Set it as the first element in our body document.body.insertBefore(el, document.body.childNodes[0]); } // if it is the only used instance, it could be placed at start of the function var randomKey = function(obj) { // Get all the keys in obj (here videoList) var k = Object.keys(obj) // Here '<< 0' is equivalent to Math.floor() return k[k.length * Math.random() << 0]; }; window.onload = create_BG_Video; 

 html, body { margin: 0; width: 100%; height: 100%; } .bg_video { height: 100%; width: 100%; margin: 0; top: 0; position: fixed; z-index: -999; background: #000; } #content { margin-top: 15%; color: #FFF; } 

 <div id='content'> <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing.</p> <img src="http://lorempixel.com/300/200" /> </div> 

Answer 2

因此，基本上，您将需要在页面加载时运行该函数（将其包装在document.ready中）。

您将需要一个srcsList数组，该数组将保存所有视频源（不包括文件扩展名）。

您想选择一个随机数，该数量受您拥有的来源数量限制。

最后，您将为mp4和webm源更新src，以便它们引用新的随机src。

var srcsList = ["/templates/smartone/images/video/fondo1", "/templates/smartone/images/video/fondo2", "/templates/smartone/images/video/fondo3"];
var randomInt = Math.floor(Math.random() * srcsList.length);
var randomSrc = srcsList[randomInt];
$('[type="video/mp4"]').attr('src', randomSrc + '.mp4');
$('[type="video/webm"]').attr('src', randomSrc + '.webm');