Brightcove Playerサンプル：

プレーヤーの例

ビデオの再生を開始し、コントロールバーの再生速度ボタンを選択します（デフォルトは1x）。別のレートを選択して、ビデオの再生速度の変化を確認します。再生レートを変更すると、選択したレートに基づいて表示されるデュレーションタイムが再計算されます。

ペンを見る再生レートアジャスター Brightcove Learning Services（ @ bcls1969） オンCodePen。

ソースコード

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

ミドルウェア関数

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

• ミドルウェア (Video.js ドキュメントセットから)
• 特徴スポットライト:ミドルウェア (Video.js ブログより)
• videojs-playbackrate-adjuster (サンプルアプリ)

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

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

1. ミドルウェア関数を記述します。
2. scriptプレイヤーをタグでページ上にミドルウェア関数を配置するか、src属性を使用してミドルウェア関数を組み込みます。scriptタグ。このドキュメントでは、両方の実装について説明します。
3. 次に示すように、use()メソッドを使用して、ミドルウェア関数を Player に登録します。

   videojs.use('mimeType', functionName);

   のためにmimetype次のような標準のビデオmimetypeを使用できますビデオ/ mp4、またはを使用します*ミドルウェア関数がすべてのmimetypeに作用するようにしたい場合。

API/プラグインリソースを使用

プレーヤー/HTML構成

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

プレーヤーの設定

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

その他のHTML

idvideoプレーヤーの埋め込みコードのタグに属性を追加することを忘れないでください。

<video-js id="myPlayerID"
...   

アプリケーションフロー

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

• ミドルウェア関数の定義
• ミドルウェアをプレーヤーに登録する
• 再生レートのオプションを定義する
• 再生レートボタンを初期化する

ミドルウェア関数の定義

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

// +++ Define the middleware functions +++

次のミドルウェア関数を作成します。

1. 選択した再生レートに基づいて再生開始時間と終了時間を再計算するミドルウェア関数を作成します。

2. シーク時に開始時間、期間、さらには現在の時刻を更新するミドルウェア関数を作成します。

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

   const playbackrateAdjuster = function(player) {
      return {
      ...
    };

   playerオブジェクトが関数に渡されることに注意してください。

   このミドルウェア関数は次のことを行います。

   1. レートチェンジイベントを聞く：再生速度が変更されたら、トリガーしますdurationchangeそしてtimeupdateイベント。
   
   
   2. setSource () メソッドを実装します。これは、すべてのミドルウェア関数に必要なメソッドです。示されている構文を使用すると、ビデオの種類に関係なく、ミドルウェアが常に選択されます。

      setSource(srcObj, next) {
        next(null, srcObj);
      },

   
   
   3. 現在の再生レートを使用してメソッドをオーバーライドする :、、durationcurrentTimebuffered、のメソッドをオーバーライドしますseekableplayedで、現在の再生レートを使用して計算された値を使用します。

ミドルウェアをプレーヤーに登録する

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

// +++ Register the middleware with the player +++

use()メソッドを使用して、ミドルウェア関数をプレーヤーに登録します。

再生レートのオプションを定義する

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

// +++ Define the playback rate options +++   

再生レートメニューボタンに表示する再生レートを定義します。

再生レートボタンを初期化する

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

// +++ Initialize the playback rate button +++

再生レートメニューボタンをプレーヤーコントロールバーに追加し、オプションオブジェクトで指定された値で初期化します。

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

このサンプルには追加のスタイルはありません。

ミドルウェア関数の使用

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

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

ここでは、プレーヤーと同じページにミドルウェア関数を定義し、それを登録します。上記のCodepenのプレーヤーの例では、このメソッドを使用しています。

別の JavaScript ファイルにコードする

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

<video-js id="myPlayerID"
	  data-video-id="5604123528001"
	  data-account="1752604059001"
	  data-player="default"
	  data-embed="default"
	  data-application-id
	  class="video-js"
	  width="640" height="360"
	  controls muted></video>
	<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

  <!-- Include the rate adjuster middleware functions -->
  <script src="rate-adjuster.js"></script>

  <script type="text/javascript">
  	videojs.getPlayer("myPlayerID").ready(function(){
  		// When the player is ready, get a reference to it
  		var myPlayer = this;
  		console.log("myPlayer",myPlayer)
  		// Define the playback rate options
  		options = {"playbackRates":[0.5, 1, 1.5, 2, 4]};
  		// Initialize the playback rate button
  		myPlayer.controlBar.playbackRateMenuButton = myPlayer.controlBar.addChild('PlaybackRateMenuButton', {
      	playbackRates: options.playbackRates
  	  });
    });
  </script>

この例では、JavaScript ファイルを独自のサーバー上でホストすることを前提としています。完全なコードについては、GitHub リポジトリのプラグインセクションを参照してください。