背景影片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');