web-dev-qa-db-ja.com

JQueryでVimeoビデオを停止する方法

YouTubeビデオを非表示にすると、再生が停止します。ただし、Vimeoビデオの場合はそうではありません。 Vimeoビデオを停止する別の方法はありますか？

javascriptjqueryvimeo
35
Justin Meltzer

まず、iFrameにIDを追加します。次に、これをJavaScriptのウィンドウを閉じるクリック機能に追加します。

var $frame = $('iframe#yourIframeId');

// saves the current iframe source
var vidsrc = $frame.attr('src');

// sets the source to nothing, stopping the video
$frame.attr('src',''); 

// sets it back to the correct link so that it reloads immediately on the next window open
$frame.attr('src', vidsrc);
53
Deborah

Vimeoには JavaScript API があり、ビデオプレーヤーの多くのプロパティとメソッドにアクセスして呼び出すことができます（ビデオの一時停止や完全なアンロードを含む）。また、 API Playground といくつかの GitHubの例 もあります。

[編集]

Universal Embed Codeを使用していることを述べたので、Webサイトからの注意事項を以下に示します。

Universal Embed Codeでは、プレーヤーと対話する唯一の方法は window.postMessage を使用することです。 postMessageは比較的新しい開発であるため、Internet Explorer 8以降、Firefox 3以降、Safari 4以降、Chrome、およびOpera 9以降。

PostMessageに伴う複雑さのために、すべてのハードワークを行うJSミニライブラリを作成しました！ ダウンロードページ で見つけることができます。または 下 でいくつかの例を見ることができます。

11
Michelle Tilley

sRC属性を復元するには、クリアする前に次を使用します。

var source = $('iframe#yourVideoId').attr('src');

次のSRC属性のクリア：

$('iframe#yourVideoId').attr('src','');

前のSRC属性のコールバック：

$('iframe#yourVideoId').attr('src',source);
6
pirios
    var vidUrl = $("iframe#video-frame").attr('src');


    //Basically stops and starts the video on modal open/close
    $('#video').on('hidden.bs.modal', function (e) {
        $("iframe#video-frame").attr('src','');
    });

    $('#video').on('show.bs.modal', function (e) {
        $("iframe#video-frame").attr('src', vidUrl);
    })
4
user2194405

Davidの方針に沿った別の答え... jQueryを使用してiFrameのSRC属性をクリアできます。

$('iframe#targetID').attr('src','');

これをVimeoビデオとライトボックスエフェクトで使用しています。ライトボックスが再びトリガーされたら、ビデオURLをiFrame SRCに追加してから表示します。

3
Nathan J

最近、モーダルが閉じられたときにBootstrapモーダル内にあるVimeoビデオを一時停止する必要がありました。

Vimeoビデオはiframeに埋め込まれました。

これは私のために働いたものです：

$("#my-bootstrap-modal").on('hidden.bs.modal', function (e) {
    var div = document.getElementById("my-bootstrap-modal");
    var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
    iframe.postMessage('{"method":"pause"}', '*');
});
1
johna

VimeoプレーヤーAPIを使用してみてください： http://developer.vimeo.com/player/js-api#methods

APIをオンにしてください。例： http://player.vimeo.com/video/VIDEO_ID?api=1

1
Muzahid

Vimeo javascript APIを使用すると、次のことができます

player.unload()

https://github.com/vimeo/player.js#unload-promisevoid-error

0
trushkevich