2013-12-10 42 views
16

特にAPIをテストするために新しいページを作成しました。コピーして自分の例を貼り付ける場合YouTube API onPlayerReadyが起動しない

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

var player; 
    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('player', { 
     height: '390', 
     width: '640', 
     videoId: 'M7lc1UVf-VE', 
     events: { 
     'onReady': onPlayerReady, 
     'onStateChange': onPlayerStateChange 
     } 
    }); 
    } 

すべてが動作します。今

私は<div id="player"></div>を削除し、代わりにそれはもはや機能し

<iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GuVq-TZ7AJM?enablejsapi=1" frameborder="0"></iframe> 

と交換していません。 onPlayerReadyまたはonPlayerStateChangeには決して入りません。奇妙なことは昨晩働いていて今日はそうではないということです。それが役に立った場合に備えて私は完全なコードを添付しています。

<!DOCTYPE html> 
<html> 
    <body> 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/GuVq-TZ7AJM?enablejsapi=1" frameborder="0"></iframe> 


    <script> 
     // 2. This code loads the IFrame Player API code asynchronously. 
     var tag = document.createElement('script'); 

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

     // 3. This function creates an <iframe> (and YouTube player) 
     // after the API code downloads. 
     var player; 
     function onYouTubeIframeAPIReady() { 

     player = new YT.Player('player', { 
      events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 

     // 4. The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
     alert('test'); 
     event.target.playVideo(); 
     } 

     // 5. The API calls this function when the player's state changes. 
     // The function indicates that when playing a video (state=1), 
     // the player should play for six seconds and then stop. 
     var done = false; 
     function onPlayerStateChange(event) { 
     if (event.data == YT.PlayerState.PLAYING && !done) { 
      setTimeout(stopVideo, 6000); 
      done = true; 
     } 
     } 
     function stopVideo() { 
     player.stopVideo(); 
     } 
    </script> 
    </body> 
</html> 

答えて

14

issue 5670パー:;のにsrc=属性

クイックフィックスはorigin=http://www.example.com(あなたがあなたのサイトのために、適切なhttp://または https://を使用してくださいサーバーの完全なドメインと を置き換える)に追加することです プレーヤーのiframe要素。 origin= 属性の値がホストドメインとURLスキームと正確に一致することを確認してください。例えば。

<iframe 
    type="text/html" 
    width="640" 
    height="480" 
    src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1&origin=https://www.example.com" 
    frameborder="0"> 
</iframe> 
+1

これはFFでは私にとってはまだ機能しません。 ChromeとSafariでは正常に動作しますが、FFではreadyStateとstateChangesは起動しません。私はできること全てを試した。私は最終的に空のDIVを作成し、そこに 'YT.Player'を直接初期化してしまいました。 –

3

今日の私たちのアプリの1つでもこの問題が発生しましたが、内部的な変更/コードプッシュの結果として考えられます。似た何かが

<div id="ytplayer"></div> 

ためのjsスクリプトはdiv要素を交換せて

<iframe id="ytplayer" ... src="http://www.youtube.com/embed/wQ78D6zoVKo"></iframe> 

を交換することによりYouTube iframe player API - OnStateChange not firing私は私の問題解決

c.f 6月に起こりました。

あなたの質問にヒントがあったので、ありがとう。

+1

これはあなたのために働いてうれしいです。残念ながら、WordPressで行われるので、jsスクリプトをdivに置き換えることはできません。 – Melonheadjr44

+0

これは私のためには機能しません。私は既に持っていました:

chow

+2

これは内部のYouTube APIの問題であり、私たちはすべてまとめて私たちの心を失いませんでした@ io2が正しいと思っています:)ここではバグトラッカーの問題へのリンクです: https://code.google.com/p/gdata-issues/issues/detail?id=5672&q=onReady&colspec=API%20ID%20Type%20Status%20Priority%20Stars%20Summary –

3

修正が最後に投稿されました:ここhttps://code.google.com/p/gdata-issues/issues/detail?id=5670#c6

は、上記のリンクの答えの直接の引用です:

クイックフィックスが原点に追加することです= http://www.example.com ( をサーバーのフルドメインに置き換えてください;あなたのサイトにhttp://またはhttps:// を適切に使用してください)を、プレーヤーの iframe要素のsrc =属性。 origin =属性の値 がホストドメインとURLスキームと正確に一致することを確認してください。例えば。私は現在、 起源かどうかを把握するために、エンジニアリングチームと働いている

<iframe 
    type="text/html" 
    width="640" 
    height="480" 
    src="https://www.youtube.com/embed/VIDEO_ID?enablejsapi=1&origin=https://www.example.com" 
    frameborder="0"> 
</iframe> 

は=前方またはこの新しい 要件を元に戻すことができるかどうかを移動する必要しようとしているが、これはすぐに修正です。当分の間、破損と高度なコミュニケーションの欠如についての謝罪 。

あなたはあなたのためのiframe要素 を作成するためにYT.Player()コンストラクタを使用している場合、これは問題-それができないされ、明示的にiframe要素を含めている 開発者向けのエッジ例ビットです一環として、 のページのHTML。

私は上記の修正を実装し、私のために働いた。

+0

デスクトップ上で動作しますが、iosやアンドロイドのイベントでは起動しません。これはいつもうまくいった。 – Toniq

関連する問題