背景视频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

所以基本上你会想在pageload上运行函数（将它包装在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'); 

Answer 2

正如@zmehboob所说，你必须制作一个视频列表来随机挑选一个。

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

下面是一些代码（香草）：

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