Javascript Youtube API包含多个事件的视频

亲爱的社区

我想在我的网站上显示多个视频。默认情况下应禁用扬声器（我使用mute（）-函数）

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

我用一个视频制作了这部电影，效果很好。但不能在一个站点上使用多个视频

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

此部分：

<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%'
})
}

函数onYouTubePlayerAPIReady（）{ var players=document.querySelectorAll（'.video container div'） 对于（变量i=0；i 所以视频显示在我的网站上，但我不知道如何将这些事件添加到每个视频中？我做错了什么

（我猜很多；（……）

谢谢大家!

梅勒妮

嗨，米莱诺

您的

players

变量是您查询的div的节点列表，不包含可寻址的YouTube元素。 您必须将这些youtube播放器对象分配到某个位置以对其进行寻址。（或者可能有其他魔法来找到它们？）

请看一下我的垃圾箱： 这是一个工作设置-当你向下滚动时，你将触发其他玩家。 您可以看看我是如何创建所需对象的，等等

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

}

编辑添加：

呵呵,

不用担心， initialize函数需要使用许多youtube播放器对象在数组中迭代，您只需要与initialize函数中的一个

player

变量对话（当您遵循我的代码时，该变量甚至可能没有设置？）。 看看上面写着“创建yt播放器”的地方。你会看到数组中的每个插槽都塞满了一个播放器对象。然后你必须再次与他们交谈，告诉他们

.mute（）

。 在

forEach

循环中，数组中的当前对象被传递给

yt

变量

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

另一个垃圾箱：

干杯

您的

players

变量是您查询的div的节点列表，不包含可寻址的YouTube元素。 您必须将这些youtube播放器对象分配到某个位置以对其进行寻址。（或者可能有其他魔法来找到它们？）

请看一下我的垃圾箱： 这是一个工作设置-当你向下滚动时，你将触发其他玩家。 您可以看看我是如何创建所需对象的，等等

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

}

编辑添加：

呵呵,

不用担心， initialize函数需要使用许多youtube播放器对象在数组中迭代，您只需要与initialize函数中的一个

player

变量对话（当您遵循我的代码时，该变量甚至可能没有设置？）。 看看上面写着“创建yt播放器”的地方。你会看到数组中的每个插槽都塞满了一个播放器对象。然后你必须再次与他们交谈，告诉他们

.mute（）

。 在

forEach

循环中，数组中的当前对象被传递给

yt

变量

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

另一个垃圾箱：

---

干杯！

哦，我的天哪，我能嫁给你吗？）你真了不起。我现在明白了全部结构。非常感谢你！！！真漂亮，这帮了我很大的忙！哦，我的上帝，我能嫁给你吗你太棒了。我现在明白了全部结构。非常感谢你！！！真漂亮，这帮了我很大的忙！