javascript - 每次进入网站时加载并随机播放视频

Question

我一直在使用这个 boostrap 代码片段，在进入网站时加载视频。 http://bootsnipp.com/snippets/featured/ful-screen-video-background

我试图让它在您每次进入网站时加载并随机化视频列表，但我没有让它工作。请帮助我!

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

最好的成绩。

Answer 1

我会保留一系列视频 URL 以及视频的各种选项，然后在加载页面时随机选择一个视频并更新 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!
});

希望这有帮助!