画質選択プラグイン
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 オプションを選択します。
- ナビゲーションヘッダーの セットで€6.
- 公開するには player、クリック パブリッシュと埋め込み>変更の公開をクリックします。.
- 開いているダイアログを閉じるには、 閉じる.
コードを使用して実装する
コードを使用して品質選択プラグインを実装するには、次の手順に従います。
-
エディターで、必要なHTMLコードを開きます。 Brightcove Player 居住する。
-
の中に
head
セクションで、品質選択プラグインのデフォルトスタイルシートを追加します。<link href="https://players.brightcove.net/videojs-quality-menu/1/videojs-quality-menu.css" rel='stylesheet'>
-
の中に
body
セクション、高度な 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。 - タイプ:
-
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 負荷。 以前の設定は保持されません。
変更履歴
見ます 変更履歴はこちら.