wake-up-neo.com

onYouTubeIframeAPIReady () wird nicht ausgelöst

Ich habe so viele Fragen und das Youtube-API-Zeug durchgesehen, aber für mein Leben kann ich nicht herausfinden, warum das onYouTubeIframeAPIReady nicht funktioniert.

Hier ist mein iframe:

<iframe id="youtube_vid" width="763" height="430" src="https://www.youtube.com/embed/dlJshzOv2cw?theme=light&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>

Und mein Skript:

function callYTapi() {

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

    function onYouTubeIframeAPIReady() {
        console.log('IframeAPI = Ready');
        var player = new YT.Player('youtube_vid', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

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

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PAUSED) {
            console.log("Paused");
        }

        if (event.data == YT.PlayerState.PLAYING) {
            console.log("Playing");
        }

        if (event.data == YT.PlayerState.ENDED) {
            end(); 
        }
    }
}

Ich bekomme das console.log für das geladene Skript, aber nicht für Iframe oder irgendetwas anderes. Irgendwelche Ideen? Vielen Dank

18
JGVM

Die Rückruffunktionen müssen im globalen Bereich liegen. Bewegen Sie einfach onYouTubeIframeAPIReady und die anderen außerhalb von callYTapi.

29
Vinicius Pinto

Glücklicherweise hatte ich nach vielem Experimentieren mit Konsole etwas Konkretes. Ich hatte bis vor einem Tag das gleiche Problem und überlegte, wie ich es tun sollte, wenn ich mich in einem Einzelspielraum befand.

So sieht mein Code aus:

var XT = XT || {};

window.onYouTubeIframeAPIReady = function(){
    setTimeout(XT.yt.onYouTubeIframeAPIReady,500);
}

XT.yt = {

/* load the YouTube API first */
loadApi: function () {

        var j = document.createElement("script"),
            f = document.getElementsByTagName("script")[0];
        j.src = "//www.youtube.com/iframe_api";
        j.async = true;
        f.parentNode.insertBefore(j, f);
        console.log('API Loaded');
    },

/*default youtube api listener*/
onYouTubeIframeAPIReady: function () {
    console.log('API Ready?');
    window.YT = window.YT || {};
    if (typeof window.YT.Player === 'function') {
        player = new window.YT.Player('player', {
            width: '640',
            height: '390',
            videoId: 'nE6mDCdYuwY',
            events: {
                onStateChange: XT.yt.onPlayerStateChange,
                onError: XT.yt.onPlayerError,
                onReady: setTimeout(XT.yt.onPlayerReady, 4000)
            }
        });
    }
},


onPlayerReady: function() {
    player.playVideo(); /* start the video */
    player.setVolume(1); /* set volume to 1 (accepts 0-100) */
},

onPlayerStateChange: function (e) {
    console.log(e.data, YT.PlayerState.PLAYING, e.data === YT.PlayerState.PLAYING);
    var video_data = e.target.getVideoData();

    //do something on video ends
    if(e.data === YT.PlayerState.ENDED)
    this.onPlayerStop();
},

onPlayerStop: function(){
    //console.log('video ended');
},

onPlayerError: function (e) {
    console.log( "youtube: " + e.target.src + " - " + e.data);
},

init: function () {
    this.loadApi();
}

}

XT.yt.init();
5
johnanish

Um ehrlich zu sein, scheint die oben akzeptierte Antwort auf diese Weise für mich zu funktionieren:

API laden (aus der Yt-Dokumentation)

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

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

geben Sie die eingebaute Ready-Funktion von YouTube "onYouTubeIframeAPIReady" im Fenster an

window.onYouTubeIframeAPIReady = this.onYTready;

this.onYTready ist also mein Funktionsname und befindet sich an einer anderen Stelle. Ich kann bestätigen, dass meine onYTready-Funktion die Haltepunkte von logs/debugger in Chrome konsolen kann.

(edit) Sie möchten dies an Ihre Funktion binden, Beispiel:

window.onYouTubeIframeAPIReady = this.onYTready.bind(this);

oder 'this' wird für das Fenster anstelle einer bestimmten Ansicht verwendet, die Sie möglicherweise verwenden.

3
mat
function playIframeVideo(iframe) {
    iframe.videoPlay = true; //init state
    iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
}

function pauseIframeVideo(iframe) {
    iframe.videoPlay = false; //init state
    iframe.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}

$('.vc_video-bg-container').on('click', function () {

    var iframe = $('iframe').get(0); //iframe tag

    if (iframe.videoPlay != true) {
        playIframeVideo(iframe);
    } else {
        pauseIframeVideo(iframe);
    }
});