2017-03-30 14 views
1

私はReactJSを使ってWebアプリケーションを構築しています。これにより、従業員はさまざまなビデオトレーニングセッションを閲覧し、それらに関するクイズに関する質問に答えることができます。 HTML5ビデオ要素を使用してデバイス間の互換性を最大限に高めたいと思っていますが、ユーザーはいつでも動画をスクラブして最後まで移動し、アプリで次の操作を開始できます。彼らは移動する前にビデオ全体を見る必要があります。VideoJSの再生タイムレンジへのアクセス

ユーザーが移動する前に動画全体が再生されたかどうかを確認する方法が必要です。私はVideo JS Advanced Examplesのページを見ていて、探していたものを見つけました。彼らは、ユーザーがプレイした時間範囲を更新する「再生済み」データフィールドを持っています。問題は、私のアプリでその機能を実装する方法がわからないことです。私はVideoJSをインクルードして取得して正常に動作させることができますが、ビデオプレーヤーの '再生された'プロパティにアクセスする方法はわかりません。

誰かが私に指示を与えることができれば、本当に感謝します。これが愚かな質問であれば、本当にすみません。私はまだこれのすべてに対してかなり新しいです。どうもありがとうございます。

乾杯、

Jaydon

答えて

3

playedhtml5 media specを形成しています。 TimeRanges objectを返します。 Video.jsは、メソッドを使用してネイティブビデオ要素のほとんどの機能を提供します。したがって、ビデオ要素のplayedプロパティ(vidEl.playedなど)は、Video.jsのplayerオブジェクト(player.played()など)のメソッド呼び出しになります。

時間範囲に対するAPIはちょっと変わっています。しかし、本質的に、それは3つのプロパティ:length,start,endを持っています。 これは彼らが行うことです: * length:いくつの範囲がありますか? playedの場合、ビデオのいくつのセクションが再生されましたか? * start():あなたに与えられた範囲 * end()の開始時刻伝える方法:あなたに与えられた範囲の終了時刻を伝える方法を

それはあなたが唯一の1つの範囲を持っている可能性が高いのですが、それはあなたのことが可能ですもっと持っていくよ。したがって、範囲の長さにループしたいと思うでしょう。ユーザーの再生回数を正確に把握するには、基本的には各範囲をループして再生時間を計算し(end(i) - start(i))、それを動画の再生時間と比較します(player.duration())。

+0

ありがとうございました!私はそれを完全に動作させることができました。 – TheWildUnicorn

関連する問題