立即靜音自動播放多個YouTube視頻

Question

我試圖製作一個使用YouTube iframe API的網頁來顯示多個視頻，這些視頻在加載時自動開始播放。我希望4個視頻中的3個開始靜音播放，但第4個視頻要與音頻播放。 最後，我試圖創建一個靜音/取消靜音和暫停/開始按鈕，允許我同時控制所有4個視頻。

我一直在玩音頻功能的代碼，不知道爲什麼它不工作。現在，4個視頻中有3個使用api，因此我可以一次控制所有視頻，最後一個視頻是自己的iframe。

下面的代碼，如果任何人想要玩它：

HTML：

<div class="no-sound"> 
    <div data-id="EI0ib1NErqg"></div> 
</div> 
<div class="no-sound"> 
    <div data-id="fV6O722O_ew"></div> 
</div> 
<div class="no-sound"> 
    <div data-id="cKxRvEZd3Mw"></div> 
</div> 

<div id="sound"> 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/g95_9Qd7o9Y?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe> 
</div> 

的JavaScript：

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; 
function onYouTubePlayerAPIReady() { 
    var players = document.querySelectorAll('.no-sound div') 
    for (var i = 0; i < players.length; i++) { 
     new YT.Player(players[i], { 
      playerVars: { 
       'autoplay': 1, 
       'modestbranding': 1, 
       'controls': 1, 
        events: { 
       'onReady': onPlayerReady 
        } 
      }, 
      videoId: players[i].dataset.id 
     }); 
    } 

} 

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

預先感謝您。

Answer 1

請更改代碼：

來源：

new YT.Player(players[i], { 
    playerVars: { 
     'autoplay': 1, 
     'modestbranding': 1, 
     'controls': 1, 
     events: { 
     'onReady': onPlayerReady 
     } 
    }, 
    videoId: players[i].dataset.id 
}); 

要

new YT.Player(players[i], { 
    playerVars: { 
     'autoplay': 1, 
     'modestbranding': 1, 
     'controls': 1}, 
     events: { 
     'onReady': onPlayerReady 
    }, 
    videoId: players[i].dataset.id 
}); 

此基礎上通過谷歌提供的sample code。事件元素在playerVars元素之外。這裏是link支持參數int playerVars元素的列表。

function onYouTubeIframeAPIReady() { 
    var player; 
    player = new YT.Player('player', { 
     videoId: 'M7lc1UVf-VE', 
     playerVars: { 'autoplay': 1, 'controls': 0 }, 
     events: { 
      'onReady': onPlayerReady, 
      'onPlaybackQualityChange': onPlayerPlaybackQualityChange, 
      'onStateChange': onPlayerStateChange, 
      'onError': onPlayerError 
     } 
    }); 
} 

查看這個jsfiddle作爲例子。