如何将容器中的所有Youtube视频静音

Question

我在容器中有多个youtube视频嵌入，启用了自动播放但我的问题是如何使用javascript或任何

来静音所有视频

<div id="video-container">

<iframe width="300" height="200" src="https://www.youtube.com/embed/o_nfdzMhmrA?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br><br>
<iframe width="300" height="200" src="https://www.youtube.com/embed/aBqU0LDd3WY?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br><br>
<iframe width="300" height="200" src="https://www.youtube.com/embed/ihc964sRt8M?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

</div>

我以FIDDLE为例，但我不知道该怎么做

Answer 1

为每个iframe分配ID，为每个iframe设置player并在播放器准备就绪时将视频静音：

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_list = ["ytplayer0", "ytplayer1", "ytplayer2"];

function onYouTubeIframeAPIReady() {
  for (item in players_list) {
    players[players_list[item]] = new YT.Player(players_list[item], {
      events: {
        'onReady': onPlayerReady
      }
    });
    players[players_list[item]].name = players_list[item];
  }
}

function onPlayerReady(event) {
  players[event.target.name].playVideo();
  players[event.target.name].mute();
}

<div id="video-container">

  <iframe id="ytplayer0" width="300" height="200" src="https://www.youtube.com/embed/o_nfdzMhmrA?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
  <br>
  <br>
  <iframe id="ytplayer1" width="300" height="200" src="https://www.youtube.com/embed/aBqU0LDd3WY?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
  <br>
  <br>
  <iframe id="ytplayer2" width="300" height="200" src="https://www.youtube.com/embed/ihc964sRt8M?wmode=transparent&autohide=1&autoplay=1&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

</div>

Here是一个有效的jsfiddle

Answer 2

<强> HTML

<iframe id="ytplayer" type="text/html" src="https://www.youtube-nocookie.com/embed/zJ7hUvU-d2Q?rel=0&enablejsapi=1&autoplay=1&controls=0&showinfo=0&loop=1&iv_load_policy=3" frameborder="0" allowfullscreen></iframe>

的 JS

 var player;

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

function onPlayerReady(event) {
player.mute();
player.playVideo();
 }