Question

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

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

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

这个有效！但仅限于第一个视频。检查jsfiddle。如果您暂停第二个视频，则可以看到第一个视频已静音。我尝试循环活动但没有运气

JSfiddle

Answer 1

您需要为每个视频应用此功能。

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

因此，将第一个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/

更新演示评论后

更新版本

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/

演示

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

1 个答案: