画質選択プラグイン

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

注：画質選択プラグインは、すべてのビデオソースで機能しません。次の点で状況を明確にしています。

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

Player 例

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

選択された新しい画質がレンダリングされ、DASHソース用に、または新しい画質がロードされるまで、HLSソース用にギアが回転します。詳細については、選択した画質オプションと歯車の回転動作について後述します。

画質オプション

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

次の品質オプションを作成します。

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

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

バッファリング

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

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

手動による初期化の詳細 player bc() 方法はで見つけることができます bc（）を使用して取得Player（）メソッドの資料をご参照ください。

歯車紡績

歯車アイコンの回転は、使用されるレンディションの変更を表します。 DASHおよびHLSの場合、回転の規則が異なります。

DASHソースの場合、品質が変更されるまでギアは回転します player 画面にレンダリングされます。
HLSソースの場合、内部アルゴリズムがレンダリングされたときではなく、新しい品質のロードを開始すると決定したときに、ギアは回転を停止します。この決定はすばやく行われるため、HLSソースで頻繁に起こる回転動作は見られません。

使用して実装 Playersモジュール

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

Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
リンクをクリックすると player を開く playerのプロパティ。
ナビゲーションヘッダーの コントロール 左側のナビゲーションメニュー。
前のチェックボックスをオンにします 品質セレクター.
ラジオボタンを使用して、使用可能な解像度のいずれかを表示するか、単純に HD / SD オプションを選択します。
ナビゲーションヘッダーの セットで€６.
公開するには player、クリック パブリッシュと埋め込み>変更の公開をクリックします。.
開いているダイアログを閉じるには、 閉じる.

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

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

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

の中に body セクション、高度な player 埋め込みコード。

〜に player コードを埋め込むには、 id 属性への参照を取得できるように player 後のスクリプトで。

<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>

あなたの後 player コードを埋め込み、品質選択プラグインスクリプトファイルを追加します。
```
<script src="https://players.brightcove.net/videojs-quality-menu/1/videojs-quality-menu.min.js"></script>
```
プラグインスクリプトの下に、以下を実行するスクリプトを追加します。
- あなたへの言及を得る Brightcove Player.
- 品質選択プラグインを 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.
sdBitrateLimit
- タイプ： Number
- デフォルト： 2000000
- 演出を考慮するための上限ビットレート制限を排他的に定義します。 SD.
useResolutionLabels
- タイプ： Boolean
- デフォルト： true
- ブドウやコーヒーチェリーのような甘い果実の発酵過程において、野生酵母は糖類を用いてアルコール発酵します。アルコールは酢酸菌によって更に<i> 酢酸</i>（お酢）に転化します。 true、プラグインは、利用可能な場合、水平解像度の行によってレンディションを分類しようとします。常に使用するにはfalseに設定します SD/HD 分類。
実装するには useResolutionLabels オプション、プラグインのオプションに次のように入力します Studio:
```
{
  "useResolutionLabels": false
}
```
結果の品質オプションは次のように表示されます。

　 player 次に、選択したグループから最適なレンディションを選択します。このセクションで詳しく説明するように、 sdBitrateLimit 分類された表現を決定するように構成可能である SD および HD。
矛盾する設定は機能しません。たとえば、次のいずれも使用する意味がありません。どちらの場合も、 useResolutionLabels 設定。
```
"useResolutionLabels": true,
"defaultResolution": "HD"
```
```
"useResolutionLabels": false,
"defaultResolution": "1080p"
```
resolutionLabelBitrates
- タイプ： Boolean
- デフォルト： false
- ブドウやコーヒーチェリーのような甘い果実の発酵過程において、野生酵母は糖類を用いてアルコール発酵します。アルコールは酢酸菌によって更に<i> 酢酸</i>（お酢）に転化します。 true、プラグインは解像度ラベルにビットレート情報を添付します（例：720p @ 13806 kbps）。このオプションは、 useResolutionLabels がfalseの場合、または解決情報が利用できない場合。
この構成オプションを設定すると、 true品質セレクタは次のように表示されます。

コントロールをスタイリングする

CSSは、歯車のアイコンや表示されるメニューのスタイルに使用されます。次の表は、スタイルを設定できる一般的なコンポーネント、コンポーネントのセレクタ、そして最後に設定するCSSプロパティを示しています。

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

たとえば、次のようにします。

あなたはこの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では表示されません。
希望の時間に品質切り替えが行われない場合がありますが、予想以上に時間がかかることがあります。
でソースを設定する player 単一のビデオテンプレートを使用して構成および構築すると、品質メニューが正しく初期化されません。これは、ソースが videojs コンストラクタにアクセスできません。 player またはプラグイン。ソースは次のように呼び出して設定する必要があります player.src()。これは影響しません Video Cloud ユーザー。
SilverlightでDASHコンテンツを使用する場合、品質メニューは表示されません。
セレクタのビデオ品質がに再設定されます。 オート 毎回 player 負荷。以前の設定は保持されません。

変更履歴

見ます変更履歴はこちら.

ページ内容

画質選択プラグイン

Player 例

画質オプション

バッファリング

歯車紡績

使用して実装 Playersモジュール

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

完全なコード例

設定オプション

`defaultResolution`

`sdBitrateLimit`

`useResolutionLabels`

`resolutionLabelBitrates`

コントロールをスタイリングする

既知の問題点

変更履歴