Brightcove Playerサンプル：

プレーヤーの例

最初は前方にスクラブすることはできませんが、後方にスクラブすることは可能です。ビデオの再生が 50% に達すると、前後にスクラブできます。フォワードスクラビングを許可する割合は、コード内で簡単に設定できます。

ペンを見るフォワードスクラブを無効にする Brightcove Learning Services（ @ rcrooks1969） オン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に作用するようにしたい場合。

プレーヤー/HTML構成

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

プレーヤーの設定

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

その他のHTML

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

アプリケーションフロー

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

• ミドルウェア関数の基本的な構文を実装し、関数に名前を付けますdisableForwardScrubbing。
• setSource()必要なメソッドを実装します。
• ビューアがスクラブしようとしている時間が、プレーヤーの現在の時間よりも短いか、setCurrentTime()またはスクラブ前方パーセンテージが経過したかどうかを確認する方法を変更します。どちらかが true の場合は、再生ヘッドをその時間に移動します。false の場合は、現在の時刻にビデオを再生したままにします。

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

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

// +++ Define the middleware function+++

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

var disableForwardScrubbing = function(player) {
  return {
  ...
};

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

setSource()メソッドを実装する

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

// ### Implement setSource() ###

これは、すべてのミドルウェア関数に必要なメソッドです。示されている構文を使用すると、ビデオの種類に関係なく、ミドルウェアが常に選択されます。

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

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

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

// ### Alter the setCurrentTime method ###

このコードブロックは、setCurrentTime()実際のメソッドが変更される場所です。これを理解するために、最初に知っておくべき点は、ct関数に渡される値は、ビューアがスクラブしている値を反映することです。ifステートメントは、新しい値がプレイヤーの現在の時間よりも小さいか、または前方スクラブを許可する割合を超えているかどうかをチェックします。どちらかが true の場合、新しい値が返され、再生ヘッドが新しい値に移動します。条件が false の場合、つまり視聴者が許可される前に前方にスクラブしようとしている場合、プレイヤーの現在の時刻が返され、再生は変更されません。

setCurrentTime: function setCurrentTime(ct) {
  var percentAllowForward = 50,
   // Determine percentage of video played
   percentPlayed = player.currentTime() / player.duration() * 100;
   // Check if the time scrubbed to is less than the current time
   // or if passed scrub forward percentage
  if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
    // If true, move playhead to desired time
    return ct;
  }
  // If time scrubbed to is past current time and not passed percentage
  // leave playhead at current time
  return player.currentTime();
}

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

ページの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"
  controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script type="text/javascript">
  // +++ Define the middleware function+++
  var disableForwardScrubbing = function(player) {
    return {
      // +++ Implement setSource() +++
      setSource: function setSource(srcObj, next) {
        next(null, srcObj);
      },
      // +++ Alter the setCurrentTime method +++
      setCurrentTime: function setCurrentTime(ct) {
        var percentAllowForward = 50,
         // Determine percentage of video played
         percentPlayed = player.currentTime() / player.duration() * 100;
         // Check if the time scrubbed to is less than the current time
         // or if passed scrub forward percentage
        if ( ct < player.currentTime() || percentPlayed > percentAllowForward ) {
          // If true, move playhead to desired time
          return ct;
        }
        // If time scrubbed to is past current time and not passed percentage
        // leave playhead at current time
        return player.currentTime();
      }
    }
  };

  // Register the middleware with the player
  videojs.use('*', disableForwardScrubbing);

</script>

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

次のコードでは、ミドルウェア関数の 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"
  controls></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

<script src="disable-forward-scrubbing.js"></script>

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