如何在自动播放时将多个 youtube 视频静音？答案

【问题标题】：How to mute multiple youtube videos when they are autoplaying?如何在自动播放时将多个 youtube 视频静音？
【发布时间】：2017-02-15 06:30:00
【问题描述】：

如何在多个 youtube 视频自动播放时将其静音？

我的代码：

    <iframe id="ytplayer0" src="https://www.youtube.com/embed/ab0TSkLe-E0?controls=1&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

    <script>
    // http://jsfiddle.net/BFDKS/966/
    // http://stackoverflow.com/questions/24868226/how-do-you-mute-an-embedded-youtube-player
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('ytplayer0', {
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady() {
        player.playVideo();
        // Mute!
        player.mute();
    }
    </script>

    <iframe id="ytplayer1" src="https://www.youtube.com/embed/QVGeilNsJFU?controls=1&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

    <script>
    var tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('ytplayer1', {
            events: {
                'onReady': onPlayerReady
            }
        });
    }

    function onPlayerReady() {
        player.playVideo();
        // Mute!
        player.mute();
    }
    </script>

结果：

它只会静音并自动播放第二个...

有什么想法吗？

jsfiddle

【问题讨论】：

标签： javascript youtube youtube-api

【解决方案1】：

您可能想要创建两个播放器，但onYouTubeIframeAPIReady 只会被调用一次。申请this method，你可以这样做：

Javascript（<head></head>）：

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var players = new Array();
var players_attr = new Array();

players_attr["ytplayer0"] = {
  events: {
    'onReady': onPlayer1Ready
  }
};
players_attr["ytplayer1"] = {
  events: {
    'onReady': onPlayer2Ready
  }
};

function onYouTubeIframeAPIReady() {
  for (key in players_attr) {
    players[key] = new YT.Player(key, players_attr[key]);
  }
}

function onPlayer1Ready() {
  players["ytplayer0"].playVideo();
  players["ytplayer0"].mute();
}

function onPlayer2Ready() {
  players["ytplayer1"].playVideo();
  players["ytplayer1"].mute();
}

HTML：

<iframe id="ytplayer0" src="https://www.youtube.com/embed/ab0TSkLe-E0?controls=1&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

<iframe id="ytplayer1" src="https://www.youtube.com/embed/QVGeilNsJFU?controls=1&showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

players 数组包含玩家对象
players_attr数组包含球员属性

两个数组的键都是玩家名，例如ytplayer0 & ytplayer1

你可以找个小提琴here

【讨论】：