web-dev-qa-db-ja.com

vimeoビデオの再生が停止したときにイベントが発生しますか？

Vimeoビデオの再生が終了したら、イベントを発生させることができるかどうか疑問に思っていました。

現在、オーバーレイにVimeoを埋め込んでいますが、ビデオが停止したら削除したいと思います。これが理にかなっていることを願っています！

私は実際に役立つコードを持っていませんが、ビデオにイベントリスナーを追加し、ビデオが終了したらイベントを発生させることができるかどうか、そしてこれをどのように行うかを知りたいですか？

ありがとうライアン

htmlvideojqueryvimeo
20
Ryano

Vimeoが新しい Video Player API をリリースしたため、以前の回答は廃止されました。

重要：必ず削除?api=1iframeのURLから。これは、Froogaloopライブラリを使用するときに以前は必要でしたが、現在は必要ありません。そのままにしておくと、「終了」、「シーク」などのイベントが発生することはありません。

新しいスクリプトを含めます。

<script src="https://player.vimeo.com/api/player.js"></script>

次に、次の例を使用します。

$(document).ready(function(){

    var iframe = $('#container iframe');
    var player = new Vimeo.Player(iframe);

    player.on('ended', function() {
        console.log('Finished.');
    });

});
22
Concept211

まず、Vimeoの 'FrogaloopライブラリへのパスをHTMLに含める必要があります（Jqueryインクルードの後）：

<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>

次に、Vimeoビデオを（再びHTMLに）埋め込む必要があります。

<iframe id="PLAYER1" src="https://player.vimeo.com/video/76979871?api=1&player_id=PLAYER1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

ここで、「api = 1」はAPIをオンにします。これは、パフォーマンスのためにデフォルトでオフになっています。また、player_id = 'PLAYER1'はiframeのIDです。

次に、JavaScriptファイルで次のものが必要です。

$(function() {

    //Gets the iframe by id
    var iframe = $('#PLAYER1');
    //Creates a player var using the iframe
    var player = $f(iframe);

    // When the player is ready/loaded, add a finish event listener
    player.addEvent('ready', function() {
        //Adds an event 'finish' that executes a function 'onFinish' when the video has ended.
        player.addEvent('finish', onFinish);
    });

    //Define the onFinish function that will be called
    function onFinish(id) {
        console.log('THE VIDEO HAS FINISHED PLAYING');
    }

});

次に、ビデオを再生して、コンソール出力を確認します。

ここにリンクがあります ドキュメントの適切な部分へ。

APIドキュメントを紹介してくれた@Raptorに感謝します。

8
dirtigr00vz

http://developer.vimeo.com/player/js-api

このページ、特にイベントリスナーの部分をチェックしてください。さらにヘルプが必要な場合は、コードを記述できると確信しています。

5
Raptor