每次进入网站时加载和随机播放视频 [英] Load and shuffle videos each time you enter site

问题描述

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

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

最好的评论.

推荐答案

我会保留一组视频 URL 以及视频的各种选项，然后在页面加载和更新时随机选择一个视频html 的数据属性.

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

希望这会有所帮助！

这篇关于每次进入网站时加载和随机播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！