Youtube API 多个带有事件的视频

Question

亲爱的社区！

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

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

我用一个视频制作了这个 - 就像一个魅力一样。但不是在一个站点上有多个 Vido..

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

这是 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 Milenoi，

您的 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 变量交谈（当您遵循我的代码时甚至可能没有设置？）。 看看上面写着create yt players的地方。您会看到数组players[] 的每个插槽都填充了一个播放器对象。然后您必须再次与他们每个人交谈以告诉他们.mute()。 在forEach 循环中，数组中的当前对象被移交给yt 变量。

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

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

干杯！