背景视频HTML5 [英] Background Videos HTML5

问题描述

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

I want to create a background with differents videos, when the user refresh the page change to other video.

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

Now i have this, maybe with javascript i can do it but i don't know how.

   <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>

推荐答案

所以基本上你要运行这个功能pageload（将其包装在document.ready中）。

So basically you'll want to run the function at pageload (wrap it in document.ready).

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

You will want a srcsList array which will hold all your video sources (don't include the file extension).

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

You want to select a random number limited by the number of sources you have.

最后，您将更新mp4和webm来源的src，以便他们参考新的随机src。

Finally you will update the src for your mp4 and webm sources so they reference the new random 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');

这篇关于背景视频HTML5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！