2016-09-17 2 views
-1

Im Moment habe ich ein Blog, das Hintergrundmusik abgespielt wird, wenn Sie die Seite mit einem youtube iframe laden:Ärger mit Youtube iframe API

<iframe id="background-music" width="0" height="0" src="https://www.youtube.com/embed/VOR8reYWvx8?rel=1&autoplay=1&enablejsapi=1" xframeborder="0" allowfullscreen></iframe> 

ich die youtube iframe api als auch manuell importiert haben:

<script src="http://url_to_script/iframe_api.js"></script> 

Ich habe andere Songs auf meinem Blog und ich möchte den Hintergrund-Song pausieren, wenn ich einen der anderen Songs dort spiele. Ich habe den folgenden Code, nach den Anweisungen auf https://developers.google.com/youtube/iframe_api_reference#Examples, aber es funktioniert überhaupt nicht.

$(".tumblr_audio_player").contents().find('.play_button').click(function() 
       console.debug(YT); 

       player = new YT.player("background-music", { 
        events: { 
         'onReady': function() { console.log("player is ready") }, 
         'onStateChange': function() { console.log("player has changed state"); } 
        } 
       }); 
       player.stopVideo(); 

Ich bin mir nicht sicher, was ich falsch mache. Ich weiß nicht, ob onReady und onStateChange erforderlich sind (ich brauche sie nicht), aber es funktioniert nicht ohne den zweiten Objektparameter, also bin ich mir nicht sicher, was ich tun soll.

+0

ich noch nie gesehen habe 'xframeborder =„0“' vor, in der Regel ist es 'frameborder =„0“', Anmerkung: das ist kein fix , nur eine Beobachtung. Bitte geben Sie eine [MCVE] an. – zer00ne

+0

Nun, ich habe einen Fehler gefunden: Es sollte "new YT.Player (...)" anstelle von "new YT.player (...)" lauten. Jetzt heißt es, dass player.stopVideo() (oder pauseVideo) keine Funktionen sind ... – user3822741

+0

Ich habe keine Ahnung was das ist: '$ (". Tumblr_audio_player "). Contents(). Find ('. Play_button') .click (function() console.debug (YT); 'ohne ein [mcve] Ich habe keine Möglichkeit, einen Fix zu testen, also was auch immer ich tue, um zu raten. Viel Glück. – zer00ne

Antwort

0

Nun, ich habe herausgefunden, was los ist. Der Code ist größtenteils korrekt, jedoch benötigt die Initialisierung des YT.Player-Objekts Zeit, für die der onReady-Callback genau bestimmt ist.

Es stellt sicher, dass das YT-Objekt initialisiert wird, bevor Sie etwas tun. Wenn Sie pauseVideo in den onReady-Rückruf einfügen, funktioniert es ordnungsgemäß. Also meine ursprüngliche Frage zu beantworten, onReady ist unbedingt erforderlich:

player = new YT.Player("background-music", 
{ events: { 
     onReady: function() { 
      player.stopVideo(); 
     } 
    } 
});