3

YouTube のiFrame 埋め込み JS プレーヤー APIを使用すると、特定のイベントにコールバックを追加できます。動画の最後にある関連動画が選択されたときのコールバックを追加したい。

より具体的には、埋め込みでビデオを表示すると、最後に埋め込み内の関連ビデオが表示されます。それらのいずれかが選択されたときにいくつかのコードを実行したい。これはどのように達成できますか？onStateChange があることがわかりますが、関連する動画に関連する状態はありません。YT.PlayerState.PLAYING に onStateChange を追加してから、再生中の動画と元の動画を比較して、何らかの形で異なるかどうかを確認する必要がありますか?

4

2 に答える 2

1

私は基本的に私が説明した方法でそれをやった。使用したコードは次のとおりです。

started = false;

var onYouTubeIframeAPIReady = function(id) {
  var player = new YT.Player('player', {
    videoId: id,
    events: {
      'onStateChange': function (event) {
        if (event.data == 1) { // The video started playing
          started = true;
        }
        if (started && event.data == -1) {
          // Video had already started playing before and is now in
          // "unstarted" state so it must be a new video.
          var video_url = event.target.i.videoUrl;
          var video_id = video_url.replace('http://www.youtube.com/watch?v=', '').replace('&feature=player_embedded', '');
          window.location = '#/view/' + video_id;
        }
      }
    }
  });
}

基本的に、ビデオの再生が開始されたら、「開始」変数を true に設定します。次に、ビデオが「開始されていない」状態になった場合、「開始済み」が true の場合、再生を開始したばかりの新しいビデオであることがわかります。その場合は、event.target オブジェクトからそのビデオ ID を取得し、必要に応じて処理します。

誰かがコンテキストを見たい場合は、私の完全なコミットがここにあります。 http://toogl.esで実際に動作しているのを見ることができます。

于 2013-02-01T15:44:39.783 に答える
1

それは私にとって合理的な解決策のように思えます。

言及する価値がある唯一の点は（あなたが指摘したことです）、ビデオの変化がユーザーが関連するビデオをクリックしたことによるものかどうかを判断できないことですが、プレーヤーと動的にやり取りしていない場合は、以前の VideoID を比較するだけで十分です。

コールバック/イベント処理作業の一部を簡素化する jQuery プラグインに興味がある場合は、https ://github.com/nirvanatikku/jQuery-TubePlayer-Plugin を確認してください。

于 2013-01-31T17:54:27.023 に答える