9

次のコードで iFrame Youtube API を使用しています。このビューを Ajax で呼び出してレンダリングし、ページ内の div.yt-player に追加します。初めてビューを呼び出したときは機能しますが、ビデオを閉じて (div.yt-player が空になります)、ビューを呼び出す別のリンクをクリックすると、ビデオがまったく読み込まれません (空白)。私は苦労してきましたが、なぜそれが起こるのか、特に初めて機能することはまだわかりません。どんな種類の助けも大歓迎です..ありがとう。

PS: HTML と JavaScript の両方がビューによってレンダリングされます。

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

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

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '486',
      width: '864',
      videoId: '#{@media['youtube_url']}',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      },
      playerVars: {
        'showinfo': 0,
        'iv_load_policy': 3,
        'color': 'white',
        'fs': 1,
        'autoplay': 1,
        'vq': 'hd720'
      }
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function stopVideo() {
    player.stopVideo();
  }
4

2 に答える 2

2

問題をデバッグしました。onYouTubeIframeAPIReady() は、YouTube API が初めて読み込まれたとき (たとえば、ユーザーがページを更新してビューへのリンクをクリックしたとき) にのみ呼び出され、Ajax でビューを呼び出しているため、起動されませんでした。以下の時間まで。

そこで、コードの最初のブロックを条件付きでラップして置き換えました。

  if (typeof youtube_api_init == 'undefined') {
    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

と

if (typeof youtube_api_init != 'undefined') {
  onYouTubeIframeAPIReady();
}

スクリプトの最後で、ブラウザーの youtube_api_init を設定して、YouTube API が既に読み込まれていることを記憶します。

var youtube_api_init = 1;

PS: 初めて試したとき、変数 yt_api_init を youtube_api_init の代わりに呼び出しましたが、YouTube が API で既に使用している名前であるために機能しませんでした...

于 2013-04-11T11:35:38.450 に答える