YouTube JavaScript API not triggering onYouTubeIframeAPIReady

YouTube JavaScript API 於載入完成後會呼叫一次 onYouTubeIframeAPIReady 這個全域方法，只會呼叫一次，但如果其他程式已經先載入了 YouTube JavaScript API 並初始後另外再加載 YouTube JavaScript API 則 onYouTubeIframeAPIReady 這個方法將會被覆蓋，導致最後載入的程式將不會被呼叫

也不知道為什麼 YouTube JavaScript API 不用事件觸發的方式，而且 function 名稱也沒辦法改，使用一些主題或模板，根本不知道有沒有先載入過YouTube JavaScript API，Debug到昏倒

載入 YouTube JavaScript API

為了避免 onYouTubeIframeAPIReady 這方法已被占用，這裡不用這個方法，首先一樣載入 API：

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

建立建構方法

接著建立建構方法取代原 onYouTubeIframeAPIReady 中的程式

var player;
function yt_init(){
    player = new YT.Player('player', {
        videoId: 'ElYDLS_2bFc',
        playerVars: {
            'autoplay': 1,
            'controls': 1,
            'rel': 0
        },
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

計時器重複判斷 YT 是否被初始

接著透過計時器重複判斷 YT 是否被初始，若 YT 已初始就呼叫上方建構方法，如此即可不用依賴 onYouTubeIframeAPIReady 這方法，避免被覆蓋的問題

var checkYT = setInterval(function () {
    if(YT&&YT.loaded){
        
        yt_init();

        clearInterval(checkYT);
    }
}, 100);

https://stackoverflow.com/a/36048501/6784662

如果文章對您很有幫助
請我喝杯咖啡吧

Bitcoin 比特幣錢包：

38ieWXhURt27br9XrDoCeo4eruzKyi8QKs

ann71727

View all posts