javascript - Youtube API 多个带有事件的视频

Question

亲爱的社区!

我想在我的网站上显示多个视频。默认情况下应禁用扬声器(我使用静音()功能)。

当用户滚动并且视频进入浏览器视口(viewport)时，视频应该开始自动播放。

我用一个视频构建了这个 - 效果非常好。但不能在一个网站上使用多个视频..

请帮助我在我的代码中遗漏了什么？

这是 html 部分:

<div class="video-container">
<div data-id="olBOo_S5AHY"></div>
</div>

<div class="video-container">
<div data-id="3IXKIVZ9T-U"></div>
</div>

<div class="video-container">
<div data-id="LAQDcnwwspQ"></div>
</div>

这是 js 部分:

function onYouTubePlayerAPIReady() {

var players = document.querySelectorAll('.video-container div')

for (var i = 0; i < players.length; i++) {
    new YT.Player(players[i], {
        width: 600,
        height: 400,
        videoId: players[i].dataset.id, 
         events: {
         onReady: initialize
        }


    });
}
}

function initialize(){

players[i].mute(); // I know that players[i] is wrong..

var waypoints = jQuery('.video-container').waypoint(function() {


    if( players[i]) { // I know that players[i] is wrong..
       var fn = function(){ 
        players[i].playVideo();  // I know that players[i] is wrong..
       }
       setTimeout(fn, 1000);
    }

}, {
  offset: '50%'
})
}

所以视频显示在我的网站上，但我不知道如何将这些事件添加到每个视频中？我做错了什么

(我猜很多；(....)

谢谢!

梅兰妮

Answer 1

Hej 米勒诺伊，

您的players变量是您查询的div的nodeList - 并且不包含可寻址的YouTube元素。 您必须将这些 YouTube 播放器对象分配到某个位置来解决它们。 (或者可能有其他魔法可以找到它们？)

看看我的垃圾箱:http://jsbin.com/hozaluzaho 这是一个有效的设置 - 当你向下滚动时，你将触发其他玩家。 你可以看看我是如何创建需要的对象等等。

// get .player nodes
var playerDivs = document.querySelectorAll(".player");

// nodelist to array to use forEach();
var playerDivsArr = [].slice.call(playerDivs);

var players = new Array(playerDivsArr.length);
var waypoints = new Array(playerDivsArr.length);

// when youtube stuff is ready
function onYouTubeIframeAPIReady() {

  // create yt players
  playerDivsArr.forEach(function(e, i) { // forEach ...
    players[i] = new YT.Player(e.id, {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: { /* no events set */ }
    })
  })

  // create waypoints
  $(".player").each(function(i, e) {
    waypoints[i] = new Waypoint({
      element: e,
      handler: function() {
        players[i].playVideo();
      }
    })
  });

}

编辑添加:

又来了，

不用担心， 初始化函数需要迭代包含许多 youtube 播放器对象的数组，您只是在初始化函数中与一个 player 变量对话(当您遵循我的代码时，该变量甚至可能没有设置？)。 查看上面显示创建 yt 玩家的位置。您会看到数组 players[] 的每个槽都填充了一个玩家对象。然后你必须再次与他们每个人交谈以告诉他们.mute()。 在 forEach 循环中，数组中的当前对象被移交给 yt 变量。

function initialize() {
  players.forEach(function(yt, i) {
    yt.mute();
  });
}

另一个垃圾箱: http://jsbin.com/ficoyo/edit?html,output

干杯!