web-dev-qa-db-ja.com

HTML5ビデオを閉じるときに停止

オーバーレイにjQueryツールを使用しています。オーバーレイ内には、HTML5ビデオがあります。ただし、オーバーレイを閉じても、ビデオは再生され続けます。オーバーレイを閉じたときにビデオを停止する方法はありますか？ここに私が持っているコードがあります：

$("img[rel]").overlay({ onClose: function() { <stop the video somehow> }, mask: { color: '#000', opacity: 0.7 }});

使ってみた

$('video').pause();

しかし、これもオーバーレイを一時停止しました。

jqueryhtml5html5-video
17
HWD

問題は、選択したjqueryセレクターにある可能性があります$("video")はセレクターではありません

右側のセレクターは、videoタグに対してid要素を置くことができます。
ビデオ要素は次のようになります。

_<video id="vid1" width="480" height="267" oster="example.jpg" durationHint="33"> 
    <source src="video1.ogv" /> 
    <source src="video2.ogv" /> 
</video> 
_

次に、$("#vid1")でhash mark（＃）、jqueryのidセレクターで選択できます。ビデオ要素が関数で公開されている場合、HtmlVideoElement（HtmlMediaElement）にアクセスできます。この要素はビデオ要素を制御します。動画要素にpause()メソッドを使用します。

VideoElement here のリファレンスを確認してください。
フォールバックリファレンスがあることも確認してください here 。

8
Myra

ページ内のすべての映画タグの再生を停止したい場合、jQueryのこの小さなスニペットが役立ちます。

$("video").each(function () { this.pause() });
27
Ulrik H. Kold

異なるブラウザでビデオを開始する

Opera 12

window.navigator.getUserMedia(param, function(stream) {
                            video.src =window.URL.createObjectURL(stream);
                        }, videoError );

Firefox Nightly 18.0の場合

window.navigator.mozGetUserMedia(param, function(stream) {
                            video.mozSrcObject = stream;
                        }, videoError );

Chrome 22

window.navigator.webkitGetUserMedia(param, function(stream) {
                            video.src =window.webkitURL.createObjectURL(stream);
                        },  videoError );

異なるブラウザでビデオを停止する

Opera 12

video.pause();
video.src=null;

Firefox Nightly 18.0の場合

video.pause();
video.mozSrcObject=null;

Chrome 22

video.pause();
video.src="";
11
Alain Saurat

次は私のために働く：

$('video')[0].pause();
9
jantoine

誰かがすでに答えを持っています。

$（ 'video'）は、ビデオ項目の配列を返します。それは完全に有効なセレターです！

そう

$("video").each(function () { this.pause() });

働くでしょう。

7
George

JQM + PhoneGapアプリの場合、次のように機能しました。

以下は、これを機能させるために行かなければならない最低限のものでした。ユーザーが戻るボタンを押したときにajaxリクエストを生成している間にバッファリングが原因で実際​​に失速していました。ビデオをChromeとブラウザでAndroidで一時停止すると、ブラウザはバッファリングを続けました。非非同期ajaxリクエストは、バッファリングが完了するのを待たずに止まります。します。

これをbeforepagehideイベントにバインドすると修正されました。

 $("#SOME_JQM_PAGE").live("pagebeforehide", function(event)
 {
           $("video").each(function () 
           { 
               logger.debug("PAUSE VIDEO");
               this.pause();
               this.src = "";
           });
 });

これにより、ページ上のすべての動画タグがクリアされます。

重要な部分はthis.src = "";です。

3
Halsafar

Firefoxでの私の経験では、ビデオ要素に 'id'属性を追加すると、Firefoxが完全にクラッシュします...バグレポートを提出するように頼みます。 id要素を削除すると、正常に機能します。これがすべての人に当てはまるかどうかはわかりませんが、それが役立つ場合に備えて自分の経験を共有したいと思いました。

2
Jase in ATL

コーディング時間を節約するには、埋め込みビデオiframe用にすでに最適化されているjqueryプラグインを使用します。

Vimeoのmoogaloop APIをjqueryツールに統合しようとして数日を費やしましたが、うまくいきませんでした。少数の簡単なオプションについては、 このリスト を参照してください。

1
Matth

これを試して：

if ($.browser.msie)
{
   // Some other solution as applies to whatever IE compatible video player used.
}
else
{
   $('video')[0].pause();
}

しかし、$。browserは非推奨であると考えてください。しかし、同等のソリューションは見つかりませんでした。

0
DustyDigits