Brightcove Playerサンプル：Seeked Time Get

このトピックでは、ユーザーが求める時刻を取得する方法を学習します。

プレーヤーの例

シークバーをクリックすると、クリックした時間がプレーヤーの下に表示されます。

ペンを見る求められる時間を得る Brightcove Learning Services（ @ rcrooks1969）オンCodePen。

ソースコード

GitHubで完全なソリューションを表示します。

CodePen を使用する

上記のCodePenを効果的に使用するためのヒントは次のとおりです。

[ 結果]ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
HTML/CSS/JSボタンをクリックして、いずれかのコードタイプを表示します。
このドキュメントの後半では、アプリケーションで使用されるロジック、フロー、およびスタイル設定については、 Player/HTML設定、アプリケーションフロー、およびアプリケーションのスタイル設定で説明されます。セクション。これらのセクションの情報に沿って従う最も良い方法は、次のとおりです。
1. CodePen の [ EDIT ON CODEPEN]ボタンをクリックし、1 つのブラウザ/ブラウザタブでコードを使用できるようにします。
2. CodePen で、表示するコードを調整します。CodePen 内の異なるコードセクションの幅を変更できます。
3. を見るプレーヤー/ HTML構成、アプリケーションフローおよび/またはアプリケーションのスタイリング別のブラウザ/ブラウザタブのセクション。これで、コードの説明に従い、同時にコードを表示できるようになります。

ミドルウェア関数

このサンプルでは、Video.js ミドルウェアを使用してコードソリューションを実装しています。非常に高いレベルでは、ミドルウェアが最も価値のあるユースケースは、ソースや現在の時刻を設定するなど、プレーヤーのコア動作をインターセプトして変更する場合です。Video.js ミドルウェア全般については、このドキュメントでは説明しませんが、ミドルウェア関数に使用される実際のコードについて説明しています。詳細ミドルウェアを行う Video.js ソースからのドキュメントは次のとおりです。

Brightcove Player でのミドルウェア関数の実装

ミドルウェア関数を使用する最も簡単な方法は、次のとおりです。

ミドルウェア関数を記述します。
スクリプトタグ内のプレーヤーを含むページにミドルウェア関数を配置するか、スクリプトでsrc属性を使用してミドルウェア関数を含めますタグ。このドキュメントでは、両方の実装について説明します。
以下に示すように、 use（）メソッドを使用して、プレーヤーでミドルウェア関数を登録します。
```
 videojs.use ('mimetype'、関数名);  
```
mimetype には、 video/mp4 のような標準的なビデオ MIME タイプを使用できます。ミドルウェア関数をすべての mimetypes。

プレーヤー/HTML構成

このセクションでは、プレーヤーの作成時に必要な特別な設定について詳しく説明します。さらに、ページ内埋め込みプレーヤー実装コード以外に、ページに追加する必要があるその他の HTML 要素についても説明します。

プレーヤーの設定

このサンプル用に作成した Brightcove Player には、特別な設定は必要ありません。

その他のHTML

他の HTML 要素はページに追加されません。

アプリケーションフロー

このアプリケーションの背後にある基本的なロジックは次のとおりです。

ミドルウェア関数の基本的な構文を実装し、関数に GetSeekedTime という名前を付けます。
setCurrentTime () メソッドを変更して、単にシークされた時刻を返します。

ミドルウェア関数のスケルトンを作成する

ラベルが付いたコードを見つけます。

 // ++++ ミドルウェア関数を定義します +++

次のようにミドルウェア関数を作成するための基本的な構文は次のとおりです。

var getSeekedTime = function（player）{ return { ... } ;

setCurrentTime () メソッドを変更します。

ラベルが付いたコードを見つけます。

 // ### setCurrentTime メソッドでシーク時間を設定する ###

このコードブロックは、実際のsetCurrentTime () メソッドが変更される場所です。これを理解するために、最初に知っておくべき点は、関数に渡される CT 値は、ビューアがスクラブしている値を反映していることです。したがって、適切な変数に値を割り当てて、この値を返すだけで、 setCurrentTime () が正しく機能するようにできます。

setCurrentTime：関数setCurrentTime（ct）{ seekBarClickedTime = ct; return ct; }

アプリケーションのスタイリング

ページのCSSは、単にプレーヤーのサイズを設定します。

ミドルウェア関数の使用

ミドルウェア関数が書き込まれたら、それを使いたいです。前述の2つの方法があり、ここで詳しく説明します。

プレーヤーと同じページにコード

ここでは、プレーヤーと同じページにミドルウェア関数を定義し、それを登録します。

<video-js id = "myPlayerID" data-video-id = "5701202551001" data-account = "1752604059001" data-player = "default" data-embed = "default" data-application-id class = "video-js"コントロール></ video-js>< div id = "displayTimesHere">< / div><スクリプトsrc = "https://players.brightcove.net/1752604059001/default_default/index.min.js">< /脚本><スクリプトtype = "text / javascript"> var seekBarClickedTime; // +++ミドルウェア関数を定義します+++ var getSeekedTime = function（player）{ return { // +++ Set seek time in setCurrentTime method +++ setCurrentTime: function setCurrentTime(ct) { seekBarClickedTime = ct; return ct; } }}; //ミドルウェアをプレーヤーに登録しますvideojs.use（ '*'、getSeekedTime）; // seekbarでmouseupイベントを初期化しますvideojs.getPlayer（ 'myPlayerID'）。ready（function（）{ var myPlayer = this; myPlayer.controlBar.progressControl.seekBar.on('mouseup', function(event) { displayTimesHere.innerHTML += seekBarClickedTime + '<br>'; }）; }）;< /脚本>

プレーヤーページに含まれるコード

次のコードでは、ミドルウェア関数のJavaScriptと、それを登録するためのuse（）メソッドは、単にページに含まれています。

<video-js id = "myPlayerID" data-video-id = "5701202551001" data-account = "1752604059001" data-player = "default" data-embed = "default" data-application-id class = "video-js"コントロール></ビデオ><スクリプトsrc = "https://players.brightcove.net/1752604059001/default_default/index.min.js">< /脚本> <スクリプトsrc = "get-seeked-time.js">< /脚本>

完全なコードについては、GitHub リポジトリの分離ファイル関数セクションを参照してください。