2013-11-01 18 views
5

iframe/HTML5 APIを使用してYouTube動画を制御するJavaScriptコードのバグを特定できませんでした。YouTube iFrame APIの動作が非一貫性/非決定性

私はメインのドキュメントページ上のデモ・コードに戻った

https://developers.google.com/youtube/iframe_api_reference

...そして私の驚きに、私はそこからデモ・コードを使用する場合でも、同じ一貫性のない動作を確認し、何も変えないでください。

動作は、このページを読み込むときにプレーヤーが自動再生する(コードの意図)と、そうでない場合があります。常に読み込みに成功します。また、6秒後には、コメントに反して決して停止しないように見えます。

ブレークポイントは、少なくともonPlayerReady()が必ずしも呼び出されていないことを確認します。 onPlayerReady()にブレークポイントを設定すると、通常は到達せず、プレイヤーが自動再生に成功する時間に達するだけです。

もちろん、この動作は、インターネット接続の速度と信頼性に依存している可能性があります。私はちょうどそれをテストしました - 24 Mbps、それはかなり一貫しているようです。

私はhtmlに面白い変更を加えると、自動的に読み込むときにページが表示されることがありますが、常にそうとは限りません。ときには、オートプレイやonPlayerReadyブレークポイントがヒットしていない状態で、数秒ごとに5回ずつリロードしてから、6回目にして、自動再生します。

Mac OS 10.8.4でChrome v30.0.1599.101を使用しています。

私はコードがベータ版で流通していることは知っていますが、まだ生産レベルにはなっていませんが、試してみたいことがあると思っていました。

上記のAPIリファレンスページに掲載されているコードが変更された場合は、FYIのコードを使用してください。繰り返しますが、私は単一の文字を変更していません。

<!DOCTYPE html> 
<html> 
    <body> 
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> 
    <div id="player"></div> 

    <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', { 
      height: '390', 
      width: '640', 
      videoId: 'M7lc1UVf-VE', 
      events: { 
      'onReady': onPlayerReady, 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 

     // 4. The API will call this function when the video player is ready. 
     function onPlayerReady(event) { 
     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> 

答えて

1

私は、サーバーから配信する場合、それがどのように機能するかから少しあらゆる方法で異なる動作になりその、ローカルでページを開きました。コンテンツがローカルのときは、ブラウザクライアント自体が異なる方法でキャッシュするような処理を行います。同じページをサーバーに置くと、毎回動作するようになりました。

さらに、このラビビトールを私に導いた大きな問題として、私はこのアドバイスに従う必要があることを知りました:https://stackoverflow.com/a/14952334/2308190 ... jQueryをロードして私のYouTubeコールバック関数を呼び出すには。

+0

これで一貫性のない動作が発生するのは、dropbox:http://dl.dropboxusercontentです。com/u/1035381/abbreviator/youtubetest.html。通常は6秒間の再生(正しい動作ではない)から再生され、時には6秒以上前に再生され、停止せずに再生されます(正しい動作でもありません)。これはWin 7のChrome 30.0.1599.101 m(この日付の時点で「最新」) –

+0

実際のプロジェクトでは、YouTubeが提供するデモコードよりも複雑ですが、 API jsコードはonYouTubeIframeAPIReadyボタンを呼び出します。ページを読み込んだときに正しく表示されることもあります。コードが変更されない場合もあります。これはWin 7、Chrome 30.0.1599.101 m(この日付の時点で「最新」) –

1

私の最初のYouTube iframeが正しく読み込まれ、それ以降のものが正しく読み込まれない場合がありました。

この問題は、<div>がDOMに追加される前に新しいYT.Playerを作成することによって発生しました。最初にYouTube APIを読み込む必要があったため、この問題はYT.Playerを初めて作成したときには発生しませんでした。これにより、マイクロ秒の遅延が発生し、残りのコードが実行されたため、YouTube APIのロードが完了する前に<div>がDOMに追加されました。

関連する問題