2

AJAX を使用して、Youtube ビデオのビデオ ID を動的に変更しています。私の AJAX 呼び出しはほぼ瞬時に行われますが、次のビデオのコンテンツを取得するために Youtube でリクエストを発行するときに遅延があることに気付きました。その結果、YouTube からの応答を待っているので、YouTube プレーヤーを非表示にしたいと考えています。

私の質問は、JavaScript を介して YouTube 動画の読み込みが完了したことをどのように検出するのですか?

<iframe id="ytplayer" class="hide" type="text/html" width="840" height="470" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen>

編集 - 私のAJAXの仕組み:

ユーザーが私のウェブサイトのビデオ ボタンをクリックすると、モーダルが表示されます。私の AJAX は、モーダルの読み込み中にデータベースからビデオ ID を取得し、#ytplayerの src 属性を変更してこのビデオ ID を含めます。その後、モーダルがページにレンダリングされますが、まだ Youtube からの応答を待っています。

4

3 に答える 3

0

私がやっていることは、ビデオがロードされたときに背景をビデオとブレンドして、トランジションをよりスムーズにすることです。

    // set up iframe player, use global scope so YT api can talk
    window.player;
    window.onYouTubeIframeAPIReady = function () {
        player = new YT.Player('tubular-player', {
            width: options.width,
            height: Math.ceil(options.width / options.ratio),
            videoId: options.videoId,
            playerVars: {
                controls: 0,
                showinfo: 0,
                modestbranding: 1,
                wmode: 'transparent'
            },
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    window.onPlayerReady = function (e) {
        resize();
        if (options.mute)
            e.target.mute();
        e.target.seekTo(options.start);
        e.target.playVideo();
    }

    window.onPlayerStateChange = function (state) {
        if (state.data === 0 && options.repeat) { // video ended and repeat option is set true
            player.seekTo(options.start); // restart
        }
        if (state.data == YT.PlayerState.PLAYING) { // video ended and repeat option is set true
            $(".initial-video-image").fadeTo(1000, 0);
        }
    }
于 2014-10-14T14:48:42.713 に答える
0

どのようにロードしているかはわかりませんが、AJAX にはネイティブ コールバックがあります。

$.ajax({
  url: 'myYouTubeData.html',
  success: function(){
    alert('success');
  },
  error: function(){
    alert('failure');
  }
});
于 2013-03-06T23:30:35.273 に答える
0

iframe APIを使用している場合は、おそらくplayer.getPlayerState():Number同じページで Events API を使用するか、または使用できます。おそらく、を使用onStateChangeしてリッスンし、YT.PlayerState.ENDEDCSS でプレーヤーを非表示にします。YT.PlayerState.PLAYINGまたはのような他の状態に切り替わるとYT.PlayerState.BUFFERING、再び表示できます。

于 2013-03-06T23:34:42.780 に答える