YouTube API更改事件未觸發

我已經嘗試了JSFiddle，本地服務器和生產服務器，並且我無法弄清楚我的事件處理程序出了什麼問題。它永遠不會起火。此外，當我在谷歌瀏覽器上運行我沒有錯誤，當我在Safari上運行，我得到：YouTube API更改事件未觸發

封閉起源「http://www.youtube.com」的框架訪問與出身「http://jsfiddle.net」的框架。協議，域和端口必須匹配。

我錯過了什麼？

代碼：

<script src="http://www.youtube.com/player_api"></script> 

<iframe 
    id="player" 
    width="426" 
    height="240" 
    src="http://www.youtube.com/embed/21eGxOKUxeM?enablejsapi=1&origin=*" 
    frameborder="0" 
    allowfullscreen></iframe> 

<script> 
    function player_state_changed(state) { 
     alert('state changed');   
    } 
    document.getElementById('player').addEventListener(
     'onStateChange', player_state_changed 
    ); 
</script>

Example in JS Fiddle

來源

2014-01-15 Justin

我發現了這個問題。我會在一分鐘內回答。 – m59

嘗試解決方案提到[這裏]（http://stackoverflow.com/questions/17078094/youtube-iframe-player-api-onstatechange-not-firing）。 –

@Justin - 響應您的評論，這裏的一些代碼，一個簡短的解釋。有兩件事情需要注意的...首先，我通常加載的iFrame API庫這樣的：

<script> 
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。在此功能中，您可以創建綁定的玩家對象。如果您嘗試在回調函數外執行此操作，您A）有可能在加載iframe API庫之前創建播放器對象，這意味着它無法觸發任何播放器功能，並且B）無法綁定到已經存在的元素存在於頁面上，因爲它們可能尚未加載。它看起來像這樣：

var player; 
function onYouTubeIframeAPIReady() { 
    player = new YT.Player("ytplayer", { 
    events: { 
     'onStateChange': onPlayerStateChange 
    } 
    }); 
} 

function onPlayerStateChange(event) { 
    if (event.data == YT.PlayerState.PLAYING) { 
    alert("now playing ..."); 
    } 
} 
</script>

這是假設我已經給我的iframe YouTube播放器的ID，而我已經附加「enablejsapi = 1？」的iframe的src屬性的URL。

這裏是一個工作小提琴：http://jsfiddle.net/jlmcdonald/PQy4C/261/

來源

2014-01-15 22:14:25 jlmcdonald

在Firefox 42.0a2或Chrome 45.0.2454.99 m上，鏈接的提琴不適用於我。我檢查了YouTube文檔，並且您的方法與他們一致。真的很奇怪，它不起作用。 –

自從發佈此答案以來的18個月中，YouTube開始強制要求將iframe的src屬性的URL添加爲「enablejsapi = 1」參數......否則，iframe會將該影片加載到iframe API不能綁定到。我已經編輯了上面的答案，包括將小提琴鏈接更改爲一個演示此功能的新提琴。 – jlmcdonald

非常感謝！它現在適用於Chrome，但不適用於Firefox，這與我在自己的網站上獲得的內容一致。（我在Firefox中得到了'onReady'事件，但是我發現的很多解決方法都沒有修復'onStateChange'。）我不明白爲什麼Google無法知道如何在現代瀏覽器中發佈事件2015年，所以我希望只有一些簡單的我們錯過了！ –

我能得到它，包括通過JavaScript的視頻，而不是一個的工作。不過不知道爲什麼它不會，如果我有增加自己的工作......但這樣做的工作：

http://jsfiddle.net/Mm88p/4/

<div id="player"></div> 

<script src="https://www.youtube.com/player_api"></script> 
<script> 
// YouTube API 
player = new YT.Player('player', { 
    height: '240', 
    width: '426', 
    videoId: '21eGxOKUxeM',   
    events: {  
     'onStateChange': onPlayerStateChange 
    } 
    }); 

function onPlayerStateChange(state) {     
    alert('state changed');   
} 
</script>

來源

2014-01-15 05:13:18 Justin

不錯，你打敗了我。另一種方式是竊聽:) – m59

它工作得很好，將iframe API綁定到現有的iframe - 但是，您不能像使用舊的AS3/Javascript API一樣添加事件偵聽器。相反，您仍然創建一個YT.Player對象並將它傳遞給iframe的id（或者將其引用到iframe的DOM引用）。您省略了高度，寬度和videoId參數，但包含了要綁定到偵聽器的events參數。 – jlmcdonald

@jlmcdonald你可以用代碼/ JSFiddle發佈答案嗎？儘管我可能不理解你，但我無法完成它的工作。這是我根據你的評論嘗試的：http://jsfiddle.net/Mm88p/3/ – Justin

YouTube API更改事件未觸發

回答

相關問題