5

iframe/HTML5 API を介して Youtube 動画を制御するための JavaScript コードのバグを特定するのに苦労していました。

メイン ドキュメント ページのデモ コードに戻りました。

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>
4

2 に答える 2

2

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

さらに、参考までに、このうさぎの穴に私を導いたより大きな問題については、次のアドバイスに従う必要があることがわかりました: https : //stackoverflow.com/a/14952334/2308190 jQuery がロードされた状態で呼び出されます。

于 2013-11-01T17:50:12.850 に答える
1

最初の YouTube iframe が正しく読み込まれ、その後の iframe が読み込まれないという状況がありました。

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

于 2014-10-09T00:09:52.433 に答える