品質選択プラグイン

このトピックでは、品質選択プラグインの使用方法を学習します。このプラグインは、プレーヤーのコントロールバーにメニューボタンを提供し、HLS または Dash ソースの再生品質を手動で選択できます。「

注:品質選択プラグインは、すべてのビデオソースで動作するわけではありません。以下の点が状況を明確にします。

このプラグインは HLS/DASH ソースでのみ動作します。
このプラグインは、子レンディションの解像度情報を含む M3U8 マスターファイルの解像度情報を表示します。解像度が指定されていない場合、プラグインは代わりに HD/SD を表示します。
HLS M3U8 ファイルがホストされている場所や、ライブまたは VOD であるかどうかは関係ありません。
このプラグインは MP4 では動作しません。5つのMP4ソースがあり、HLSソースが1つしかない場合、異なるMP4品質を示す品質セレクターは表示されません。

プレーヤーの例

以下は、品質選択プラグインを使用しているBrightcoveプレーヤーです。ビデオを再生すると、コントロールバーに次のアイコンが表示されます。

選択すると、DASHソースの場合は新しい品質がレンダリングされるまで、HLSソースの場合は新しい品質が読み込まれるまで歯車が回転します。選択のために表示される品質オプション、およびギアの回転動作に関する詳細情報を以下に示します。

品質オプション

歯車アイコンをクリックすると、ユーザが選択するためのいくつかの品質オプションが表示されます。たとえば、次のレンディションのビデオ：

次の品質オプションが作成されます。

これらのオプションがどのように構築され、特定のレンディションが選択されるかは次のとおりです。

すべてのレンディションは、水平解像度の線 (上記の例では 270p、360p、540p、720p、1080p) に基づいてグループ化され、品質オプションとして使用されます。
ユーザーがグループを選択した後、選択したグループに複数のレンディションがある場合、標準のアダプティブビットレートストリーミングアルゴリズムは、選択した解像度グループ内で最適なレンディションを選択します。このプロセスは、選択した解像度グループ内でのみレンディション選択がどのように機能するかです。
解決情報が利用できない場合、オプションはフォールバックしてオプションを表示しますSDそしてHD、それぞれ標準解像度と高解像度用。プラグインは、設定可能な分割線を使用して、各レンディションのビットレート情報を使用して、SD または HD かどうかを判別します。

バッファリング

品質を変更すると、バッファリングが発生する可能性があり、ロードスピナーが表示されます。これは、品質の選択時にすぐに品質が変更され、セグメントをダウンロードする必要があるためです。自動レンディションスイッチと同じスムーズなトランジション動作を見たい場合は、次のオプションを使用してプレーヤーを手動で初期化できます。

var options = {
  html5: {
    hls: {
      smoothQualityChange: true
    }
  }
};

bc()メソッドを使用したプレーヤーの手動初期化の詳細については、BC () および getPlayer () メソッドの使用に関するドキュメントを参照してください。

ギアスピニング

回転する歯車アイコンは、使用されているレンディションの変更を表します。ダッシュソースとHLSソースでは、スピニングのルールが異なります。

ダッシュソースの場合、ギアはプレーヤーの品質が変わり、画面にレンダリングされるまで回転します。
HLS ソースの場合、ギアの回転は、内部アルゴリズムが新しい品質の LOADING を開始することを決定したときに停止します。これは、レンダリングされたときではありません。この決定は迅速に行われるため、HLS ソースで頻繁に発生するスピニングアクションが表示されない可能性があります。

プレーヤーモジュールを使用して実装する

Players モジュールを使用して品質選択プラグインを実装するには、次の手順に従います。

を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
クリックコントロール左側のナビゲーションメニューにあります。
の前のチェックボックスをオンにします品質セレクター。
ラジオボタンを使用して、使用可能なさまざまな解像度を表示するか、単にHD / SDオプション。
[ 保存] をクリックします。
プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
開くダイアログを閉じるには、[ 閉じる] をクリックします。

コードを使用して実装する

コードを使用して品質選択プラグインを実装するには、次の手順に従います。

エディタで、Brightcove Playerを配置する HTML コードを開きます。
headセクションで、品質選択プラグインのデフォルトスタイルシートを追加します。
```
<link href="https://players.brightcove.net/videojs-quality-menu/1/videojs-quality-menu.css" rel='stylesheet'>
```

の中にbodyセクションで、高度なプレーヤーの埋め込みコードを追加します。

プレーヤーの埋め込みコードに、id後のスクリプトでプレイヤーへの参照を取得できるように属性を追加しました。

<video-js id="myPlayerID"
  data-account="1752604059001"
  data-player="default"
  data-embed="default"
  controls=""
  data-video-id="5842800655001"
  data-playlist-id=""
  data-application-id=""
  width="960" height="540"></video-js>
<script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

プレーヤーの埋め込みコードの後に、品質選択プラグインスクリプトファイルを追加します。
```
<script src="https://players.brightcove.net/videojs-quality-menu/1/videojs-quality-menu.min.js"></script>
```
プラグインスクリプトの下に、次のことを実行するスクリプトを追加します。
- Brightcove Playerへの参照を取得します。
- 品質選択プラグインをプレーヤーに登録します。
- 使用するプラグインオプションを指定します。この例では、デフォルトの品質選択をに設定します720p。
```
<script type="text/javascript">
  videojs.getPlayer('myPlayerID').ready(function() {
    var myPlayer = this;
    myPlayer.qualityMenu({
      defaultResolution: '720p'
    });
  });
</script>
```

完全なコード例

品質選択プラグインを使用し、初期デフォルト解像度を設定するための完全なコード例を次に示します。

<!DOCTYPE html>
<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Quality Selection</title>

      <!-- CSS for the quality selection plugin -->
      <link href="https://players.brightcove.net/videojs-quality-menu/1/videojs-quality-menu.css" rel='stylesheet'>
    </head>

    <body>
    <h1>Quality Selection</h1>

    <!-- Brightcove Player embed code -->
    <video-js id="myPlayerID"
      data-account="1752604059001"
      data-player="default"
      data-embed="default"
      controls=""
      data-video-id="5842800655001"
      data-playlist-id=""
      data-application-id=""
      width="960" height="540"></video-js>
    <script src="https://players.brightcove.net/1752604059001/default_default/index.min.js"></script>

    <!-- Script for the quality selection plugin -->
    <script src="https://players.brightcove.net/videojs-quality-menu/1/videojs-quality-menu.min.js"></script>

    <script type="text/javascript">
      // When the player is ready, get a reference to it
      videojs.getPlayer('myPlayerID').ready(function() {
        var myPlayer = this;

        // Register the quality selection plugin with options
        myPlayer.qualityMenu({
          defaultResolution: '720p'
        });
      });
    </script>
    </body>
</html>

構成オプション

コードを使用してプラグインを実装する場合、プラグインを構成するには、次のオプションを使用できます。

defaultResolution
- タイプ: String
- デフォルト: none
- 使用するデフォルトの解像度または解像度マッピングを定義します。水平解像度またはSD / HDのいずれかを渡します。
ビデオクラウドスタジオでデフォルトの初期解像度を変更する

Video Cloud Studio でデフォルトの解像度を変更するには、次の手順に従います。
1. の中にプレイヤーモジュールで、品質選択プラグインを追加したプレーヤーを選択します。
2. 左側のナビゲーションで、[ JSON エディタ] を選択します。
3. 次に示す「プラグイン」セクションで、品質選択プラグインに関するセクションを見つけます。
```
{
    "registry_id": "@brightcove/videojs-quality-menu",
    "version": "1.x",
    "options": {
      "useResolutionLabels": true
    }
  }
```
4. オプションセクションに、ハイライト表示されたセクションに示すように、希望のデフォルトの解像度を追加します（前の行の末尾にカンマを追加することを忘れないでください）。
```
{
    "registry_id": "@brightcove/videojs-quality-menu",
    "version": "1.x",
    "options": {
      "useResolutionLabels": true,
      "defaultResolution": "720p"
    }
  }
```
5. 変更した JSON を保存するには、[保存] をクリックします。
6. 変更したプレーヤーを公開します。
もちろん、Video Cloud Studio を使用してこのセクションのオプションを設定する場合にも同様の手順を使用できます。
sdBitrateLimit
- タイプ: Number
- デフォルト: 2000000
- レンディション SD を考慮するための上限ビットレート制限 (排他) を定義します。
useResolutionLabels
- タイプ: Boolean
- デフォルト: true
- の場合true、プラグインは利用可能な場合、水平解像度の線でレンディションを分類しようとします。 SD / HD の分類を常に使用する場合は false に設定します。
useResolutionLabelsオプションを実装するには、Studio のプラグインのオプションに次のように入力します。
```
{
  "useResolutionLabels": false
}
```
結果の品質オプションは次のようになります。

次に、プレーヤーは、選択したグループから最適なレンディションを選択します。このセクションで詳しく説明するように、sdBitrateLimit次のように分類されたレンディションを決定するように構成可能ですSDそしてHD。
矛盾した設定は機能しません。たとえば、次のどちらも使用する意味がありません。どちらの場合も、に基づいてラベルに不正な値を指定しているためです。useResolutionLabels設定。
```
"useResolutionLabels": true,
"defaultResolution": "HD"
```
```
"useResolutionLabels": false,
"defaultResolution": "1080p"
```
resolutionLabelBitrates
- タイプ: Boolean
- デフォルト: false
- ときtrue、プラグインは解像度ラベルにビットレート情報を添付します (例:720p @ 13806 kbps)。このオプションは、が false useResolutionLabelsの場合、または解像度情報が使用できない場合は効果がありません。
この構成オプションが設定されている場合、true、品質セレクターは次のように表示されます。

コントロールのスタイリング

CSSは、歯車のアイコンと表示されるメニューのスタイルを設定するために使用されます。次の表に、スタイルを設定できる共通のコンポーネント、' コンポーネントセレクター、最後に設定する CSS プロパティを示します。

成分	セレクタ	プロパティ
歯車アイコン	ボタン.vjs-品質メニューボタン.vjs-メニューボタン.vjs-メニューボタン.vjs-メニューボタン-popup.vjs-ボタン	色
メニュー項目の色	div.vjs-quality-menu-wrapper .vjs-menu-button.vjs-menu-button.vjs-button.vjs-control.vjs-button.vjs-quality-menu-button-vjs-quality-menu-button	背景色
メニュー項目のテキストの色	div.vjs-品質メニュー-wrapper.vjs-menu-button.vjs-メニューボタンポップアップ.vjs-control.vjs-button.vjs-button.vjs-品質メニューボタン使用解像度.vjs-メニューアイテム-テキスト	色
選択したメニュー項目の色	div.vjs-品質メニュー-wrapper.vjs-menu-button.vjs-メニューボタン.popup.vjs-control.vjs-button.vjs-button.vjs-quality-menu-button.vjs-quality-menu-button-resolution .vjs-選択	背景色
選択した項目のテキストの色	div.vjs-品質メニュー-wrapper.vjs-menu-button.vjs-メニューボタンポップ.vjs-control.vjs-button.vjs-ボタン.vjs-品質-メニューボタン-使用解像度.vjs-メニュー-アイテム.vjs-選択された.vjs-メニューアイテム-テキスト	色
HDラベルのテキストの色	div.vjs-quality-menu-wrapper .vjs-menu-button.vjs-menu-button.vjs-button.vjs-control.vjs-button.vjs-quality-menu-button.vjs-quality-menu-item-sublabel	色

たとえば、次のことを実現します。

このCSSを使用します：

/* Style the icon */
button.vjs-quality-menu-button.vjs-menu-button.vjs-menu-button-popup.vjs-button {
  color: red;
}
/* Style the background of the menu items */
div.vjs-quality-menu-wrapper.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.vjs-quality-menu-button-use-resolution .vjs-menu-item {
  background-color: yellow;
}
/* Style the text of menu items */
div.vjs-quality-menu-wrapper.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.vjs-quality-menu-button-use-resolution .vjs-menu-item-text {
  color: green;
}
/* Style the background color of selected menu item */
div.vjs-quality-menu-wrapper.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.vjs-quality-menu-button-use-resolution .vjs-menu-item.vjs-selected {
  background-color: white;
}
/* Style the text color of selected menu item */
div.vjs-quality-menu-wrapper.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.vjs-quality-menu-button-use-resolution .vjs-menu-item.vjs-selected .vjs-menu-item-text{
  color: blue;
}
/* Style the HD label */
div.vjs-quality-menu-wrapper.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button.vjs-quality-menu-button-use-resolution .vjs-quality-menu-item-sub-label {
  color: lime;
}

既知の問題

このプラグインは、Brightcove Player バージョン 5.17.0 以降で機能します。以前のバージョンの Player の機能はサポートされていません。
品質セレクターは Safari では機能しません。
iOSでは品質セレクタが表示されません。
時々、品質スイッチは所望の時間に起こらないでしょう、それは予想よりも長くかかる可能性があります。
プレーヤー構成でソースを設定し、単一のビデオテンプレートでビルドすると、品質メニューが正しく初期化されません。これは、videojsソースがプレイヤやプラグインにアクセスできないコンストラクタへの呼び出しによって設定されるためです。ソースはを呼び出して設定する必要がありますplayer.src()。これは Video Cloud ユーザーには影響しません。
Silverlight で DASH コンテンツを使用すると、品質メニューは表示されません。
プレーヤーがロードされるたびに、セレクターの [ビデオ品質] が [自動] に再設定されます。以前の設定は維持されません。

更新履歴

品質メニュープラグインのリリースノートを参照してください。

過去のリリースノートについては、ここの changelog を参照してください。

ページコンテンツ

品質選択プラグイン

プレーヤーの例

品質オプション

バッファリング

ギアスピニング

プレーヤーモジュールを使用して実装する

コードを使用して実装する

完全なコード例

構成オプション

`defaultResolution`

ビデオクラウドスタジオでデフォルトの初期解像度を変更する

`sdBitrateLimit`

`useResolutionLabels`

`resolutionLabelBitrates`

コントロールのスタイリング

既知の問題

更新履歴