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
如果沒有使用 YTPlayer 一樣可以解決這個問題,可參考此篇