jQuery YTPlayer 占用 YouTube JavaScript API 的onYouTubeIframeAPIReady function

YouTube JavaScript API 於載入完成後會呼叫一次 onYouTubeIframeAPIReady 這個全域方法,只呼叫一次,如果已經使用了 jQuery YTPlayer 另外再加載 YouTube JavaScript API 則,onYouTubeIframeAPIReady 這個 function 將會被覆蓋,不管誰覆蓋誰,總之就是有個會被覆蓋,導致另一段初始的程式將不會被呼叫

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

幸好 YTPlayer 算有良心的,沒有霸佔這個方法, YouTube JavaScript API 呼叫 YTPlayer的 onYouTubeIframeAPIReady 後會發送一個 YTAPIReady 事件,偵聽這個事件,可以將本來在自己的 onYouTubeIframeAPIReady 要做的事改在事件觸發後執行,以下如以下代碼:

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

如此一來,兩個 onYouTubeIframeAPIReady 都正確被執行拉


https://github.com/pupunzi/jquery.mb.YTPlayer/issues/163

https://vector.cool/youtube-javascript-api-not-triggering-onyoutubeiframeapiready/

如果沒有使用 YTPlayer 一樣可以解決這個問題,可參考此篇

https://vector.cool/youtube-javascript-api-not-triggering-onyoutubeiframeapiready/

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

Bitcoin 比特幣錢包:

18fCwNnEJ7UfMNS3GcUczPNa72NMsWcvaU



ann71727

相關文章:

READ  Google Map JavaScript API 語言切換

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料