Youtube api 事件仅适用于第一个元素

Question

我正在制作一个带有 youtube 视频的滑块，我想静音所以我做了这个：

window.onYouTubePlayerAPIReady = function() {
player = new YT.Player('video', {
    events: {
        'onReady': onPlayerReady
    }
});
}

function onPlayerReady(event) {
    event.target.mute();
}

这行得通！但仅限于第一个视频。检查jsfiddle。如果您暂停第二个视频，您会看到第一个视频被静音。我尝试循环事件但没有运气

JSfiddle

Answer 1

您需要为每个视频应用此设置。

您还需要为 iframe 元素使用唯一的 id 值。

所以在将第一个 id 更改为 video 和第二个 video2 之后，脚本

window.onYouTubePlayerAPIReady = function() {
    player = new YT.Player('video', {
        events: {
            'onReady': onPlayerReady
        }
    });
    player2 = new YT.Player('video2', {
        events: {
            'onReady': onPlayerReady
        }
    });
}

function onPlayerReady(event) {
    event.target.mute();
}

现在有效

在http://jsfiddle.net/gaby/mre4dvbe/2/更新演示

---

更新版本 cmets之后

window.onYouTubePlayerAPIReady = function() {
  var videos = document.querySelectorAll('.yt-video');

  [].forEach.call(videos, function(video) {
    new YT.Player(video, {
      events: {
        'onReady': onPlayerReady
      }
    });
  });
}

function onPlayerReady(event) {
  event.target.mute();
}

这适用于任意数量的视频（共享同一类yt-video）

http://jsfiddle.net/gaby/mre4dvbe/5/的演示