Load and shuffle videos each time you enter site

问题

I've been using this boostrap snippet that loads a video when entering site. http://bootsnipp.com/snippets/featured/ful-screen-video-background

I'm trying to make it load and randomize a list of videos each time you enter the site, but I'm not getting it to work. Help me pls!

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(); });

Best Reagrds.

回答1:

I would keep an array of the video URL's, as well as the various options for the video, then select one video at random when the page is loaded and update the data-property of the html.

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!
});

Hopefully this helps!

来源：https://stackoverflow.com/questions/38511665/load-and-shuffle-videos-each-time-you-enter-site

标签

javascript

html

twitter-bootstrap