wake-up-neo.com

Wie stummschaltest du einen eingebetteten Youtube-Player?

Ich experimentiere mit dem Youtube-Player, kann ihn jedoch nicht standardmäßig stumm schalten.

function onPlayerReady() {
    player.playVideo();
    // Mute?!
    player.mute();
    player.setVolume(0);
}

Wie kann ich es von Anfang an stumm schalten?

Fiddle


Update:

JavaScript Player API ist veraltet .
Verwenden Sie stattdessen iframe Embeds .

20
Jonathan

Es stellt sich heraus, dass player.mute() gut funktioniert. Es brauchte nur den Parameter enablejsapi=1. Der erste Test in der Geige hat nicht funktioniert, da bei der Spielerinitiation ein Fehler aufgetreten ist. Folgendes funktioniert.

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

Fiddle

Dank an Gagandeep Singh und Anton King für den Hinweis auf enablejsapi=1

24
Jonathan

Alle obigen Antworten haben aus irgendeinem Grund bei mir nicht funktioniert. Es könnte seltsam sein wordpress theme, dass ich Methoden bei der Youtube API verwenden oder abwerten musste, ich bin mir nicht sicher. Die einzige Möglichkeit, den Player zu stumm zu schalten, bestand darin, den folgenden Code in das Tag einzufügen.

// Loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replaces the 'ytplayer' element with an <iframe> and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('ytplayer', {
        height: '390',
        width: '640',
        videoId: 'YOUR_VIDEO_ID',
        playerVars: {
          autoplay: 1,
          controls: 1,
          disablekb: 1,
          hl: 'ru-ru',
          loop: 1,
          modestbranding: 1,
          showinfo: 0,
          autohide: 1,
          color: 'white',
          iv_load_policy: 3,
          theme: 'light',
          rel: 0
        },
        events: {
            'onReady': onPlayerReady,
        }
    });
  }

function onPlayerReady(event){
    player.mute();
}
<div id="ytplayer"></div>
8
Artem Kiselev

Es ist wichtig zu beachten, dass YouTube-APIs dies innerhalb Ihres Markups direkt in einem <script> - Tag oder über einen standardmäßigen document.onLoad() systemeigenen Listener und nicht als benannte Funktion ausführen.

Andernfalls wird die Funktion onYouTubeIframeAPIReady() nicht nativ an das DOM gebunden.

2
Paul Kane

Versuchen Sie den folgenden Code

var youtubeplayer = iframe.getElementById('ytplayer');
youtubeplayer .setVolume(0);

Und unten ist Ihre Geige aktualisierte Version,

HINWEIS: Die Video-URL muss enablejsapi = 1 enthalten

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

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

    var player;

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

    function onPlayerReady(event) {
        player.playVideo();
        // Mute?!
        //player.mute(); instead of this use below
        event.target.mute();
        //player.setVolume(0);
    }

DEMO Hoffe das hilft ...

1
Anto King