背景視頻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>