Mehrere YouTube-Videos gleichzeitig stummschalten

Question

Ich versuche eine Webseite zu erstellen, die die YouTube-Iframe-API verwendet, um mehrere Videos anzuzeigen, die beim Laden automatisch gestartet werden. Ich möchte, dass 3 der 4 Videos stumm abgespielt werden, aber das vierte Video mit dem Audio abgespielt wird. Schließlich versuche ich, eine Stumm-/Un-Stummschaltung und Pause/Start-Taste zu erstellen, mit der ich alle 4 Videos gleichzeitig steuern kann.

Ich habe mit dem Code für die Audio-Funktion gespielt und nicht sicher, warum es nicht funktioniert. Im Moment benutzen 3 der 4 Videos die API, so dass ich sie alle auf einmal kontrollieren kann, und das letzte Video ist ein eigener iframe, der autoplayt.

Hier ist der Code, wenn jemand mit ihm spielen, um möchten:

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(); 
     } 

Vielen Dank im Voraus.

Answer 1

bitte an Ihren Code ändern:

Von:

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

Um

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

Base auf dem sample code von Google gegeben. Das Ereigniselement befindet sich außerhalb des playerVars-Elements. Hier ist die link für die unterstützte Liste von Parametern int playerVars Element.

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 
     } 
    }); 
} 

Siehe dieses jsfiddle als Beispiel.