web-dev-qa-db-ja.com

HTML5 <video>コールバック？

私はクライアント用のサイトで作業しており、彼らは彼らのビデオコンテンツのいくつかの配信方法としてHTML5のビデオタグを使用することに固執しています。現在、Internet Explorer Flashフォールバックを処理するために http://videojs.com/ から少し助けを借りて、それを実行しています。

ビデオの再生が完了したら（長さがすべて異なる）、ビデオをフェードアウトし、ビデオの代わりに写真をフェードアウトします---後のポスターフレームのように考えますビデオ。

これも可能ですか？現在再生中の映画のタイムコードをJavascriptまたは他の方法で取得できますか？ Flowplayer（ http://flowplayer.org/demos/scripting/grow.html ）にはonFinish関数があることを知っていますが、HTML5ビデオメソッドの代わりに使用すべきルートはありますか？ IEユーザーがFlashプレーヤーを取得するという事実には、2つの別個のソリューションが必要ですか？

どんな入力でも大歓迎です。現在、サイトでjQueryを使用しているので、可能な限りソリューションをその領域に保持したいと思います。ありがとう！

javascriptjqueryvideohtml5html5-video
32
Andrew

ここで仕様のイベントの完全なリストを表示できます 。

例えば：

$("video").bind("ended", function() {
   alert("I'm done!");
});

JQueryの他の要素と同じように要素のイベントにバインドできます...コメントの質問に関しては、IEに配信する要素に関係なく、はい、提供するイベントに対応する別個のハンドラーが必要です。

タイムコードに関する他の質問については、timeupdateイベントは再生中に発生し、durationchangeイベントは全体の継続時間が変化したときに発生します。上記のendedイベントで示したように、バインドして使用できます。 timeupdateを使用すると、おそらくcurrentTimeプロパティが必要になり、durationchangeを使用すると、durationプロパティが必要になります。これらはそれぞれDOMから直接取得できます次のようなオブジェクト：

$("video").bind("durationchange", function() {
   alert("Current duration is: " + this.duration);
});
66
Nick Craver

ビデオタグに関連付けられたOnEndedイベントがあります。ただし、現在のバージョンのGoogle Chromeでは機能しません。

HTML 5 Video OnEndedイベントが発生しない

そしてまた見なさい

HTML5ビデオの終了を検出

汎用ソリューションの場合（フォールバックを使用したビデオタグをサポート）

http://camendesign.com/code/video_for_everybody または http://www.kaltura.org/project/HTML5_Video_Media_JavaScript_Library または http：// www。 mediafront.org/

3
Eric J.

このコードを使用しました。基本的にビデオをリロードし、ポスターを再び表示します。最後の画像をポスターと同じにしたいとします。ページに動画が1つしかないので、動画タグを使用するとうまくいきます。ページのロード時に自動再生するようにビデオを設定しているため、リロード後に一時停止を追加しました。

<script type="text/javascript">
    var video= $('video')[0]; 
    var videoJ= $('video');        
    videoJ.on('ended',function(){
        video.load();     
        video.pause();
    });
</script>
1
Novice Guy