Laden und mischen Sie Videos jedes Mal, wenn Sie die Website aufrufen

Question

Ich habe dieses Boostrap-Snippet verwendet, das beim Betreten der Website ein Video lädt. http://bootsnipp.com/snippets/featured/ful-screen-video-background

Ich versuche, jedes Mal, wenn Sie die Website betreten, eine Liste von Videos zu laden und randomisieren, aber ich bekomme es nicht zur Arbeit. Helfen Sie mir bitte!

HTML:

<section class="content-section video-section"><div class="pattern-overlay"><a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=fdJc1_IBKJA',containment:'.video-section', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a></div></section> 

JS:

$(document).ready(function() { 

$(".player").mb_YTPlayer(); }); 

Beste Reagrds.

Answer 1

Ich würde ein Array der Video-URLs, sowie die verschiedenen Optionen für das Video behalten, dann ein Video nach dem Zufallsprinzip auswählen, wenn die Seite geladen ist und die Daten-Eigenschaft des HTML aktualisieren.

Javascript:

var vids = ["https://www.youtube.com/watch?v=fdJc1_IBKJA", 
    "https://www.youtube.com/watch?v=xaDZvw9ot3E", 
    "https://www.youtube.com/watch?v=3WWlhPmqXQI"]; // create your list of youtube videos 

var currVid = vids[Math.floor(Math.random()*(vids.length-1))]; // this will grab a random video from the array. 

var opts = { // keep all the options in an object 
    videoURL: currVid, // set the video to display 
    containment:'.video-section', 
    quality:'large', 
    autoPlay:true, 
    mute:true, 
    opacity:1 
} 

$(document).ready(function(){ 
    document.getElementById("bgndVideo").dataset.property = JSON.stringify(opts); // change to this 

    $(".player").mb_YTPlayer(); // play! 
}); 

Hoffentlich hilft das!