YouTubeビデオの再生が終了したことを検出するにはどうすればよいですか?


92

私は大量のyoutube動画が埋め込まれているサイトで作業しています。クライアントは、動画の再生が停止したときにポップアップを表示したいと考えています。

私はyoutube apiを見て、ビデオがいつ終了したかを検出する方法があるようです:

http://code.google.com/apis/youtube/js_api_reference.html

しかし、ビデオはすべてサイトに既にあるため(埋め込みコードを貼り付けることによって手動で追加された何千もの)、そのページで言及されているようなビデオを埋め込むことはできません。

(JavaScriptを使用して)既存のビデオを変更せずにこれらのビデオの終了を検出する方法はありますか?


2
私が提案できる唯一のことは、組み込むために埋め込みエントリをプログラムで変更することですenablejsapi=1。それらがデータベースにある場合、src属性を変更するのはかなり簡単です。それらがHTMLファイルに静的に挿入される場合、いくつかの正規表現が必要になる場合があります。
ダウンロード

回答:


174

これは、youtubeプレーヤーAPIを介して実行できます。

http://jsfiddle.net/7Gznb/

作業例:

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

    <script src="http://www.youtube.com/player_api"></script>

    <script>

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              width: '640',
              height: '390',
              videoId: '0Bmhjf0rKe8',
              events: {
                onReady: onPlayerReady,
                onStateChange: onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {        
            if(event.data === 0) {          
                alert('done');
            }
        }

    </script>

1
これを1ページの複数の動画とどのように統合しましたか?
motoxer4533

@ motoxer4533よく私は同じページで複数のビデオを扱う必要はなく、ページごとに1つだけでした。APIで複数のプレーヤーの作成と個々のエンドポイントの検出が許可されているかどうかは不明です。
TK123 2012

1
その後、セットアップコードを複数回実行するだけでセットアップ複数のvar player1、VaRのplayer2などのvarプレーヤー3 - -それぞれの新しいVARで複数のプレーヤーのためのセットアップには難しいことではありません
codeguy

また、iframe apiを使用して同様のことを行う完全な例は、developers.google.com
youtube /…

3
読みやすくするため、状態を確認するときはYT.PlayerState.ENDEDにアドバイスします。
Bart Burg

-6

あなたがしたいかもしれないことは、以下を実行するすべてのページにスクリプトを含めることです... 1. youtube-iframeを見つけます。あなたはそれを行うことができます...-for.inループでwindow.framesをループしてから、プロパティでフィルタリングします

  1. 現在のページのiframeにjscriptを挿入して、onYoutubePlayerReady must-include-function http://shazwazza.com/post/Injecting-JavaScript-into-other-frames.aspxを追加します

  2. イベントリスナーなどを追加します。

お役に立てれば


1
クロスドメインルールが原因でこれが可能かどうか不明
Asher Garland
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.