プレーヤーの例
以下は、品質選択プラグインを使用している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
セクションで、高度なプレーヤーの埋め込みコードを追加します。<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 でデフォルトの解像度を変更するには、次の手順に従います。
- の中にプレイヤーモジュールで、品質選択プラグインを追加したプレーヤーを選択します。
- 左側のナビゲーションで、[ JSON エディタ] を選択します。
- 次に示す「プラグイン」セクションで、
品質選択プラグインに関するセクションを見つけます。
{ "registry_id": "@brightcove/videojs-quality-menu", "version": "1.x", "options": { "useResolutionLabels": true } }
オプションセクションに、ハイライト表示されたセクションに示すように、希望のデフォルトの解像度を追加します(前の行の末尾にカンマを追加することを忘れないでください)。
{ "registry_id": "@brightcove/videojs-quality-menu", "version": "1.x", "options": { "useResolutionLabels": true, "defaultResolution": "720p" } }
- 変更した JSON を保存するには、[保存] をクリックします。
- 変更したプレーヤーを公開します。
- タイプ:
-
sdBitrateLimit
- タイプ:
Number
- デフォルト:
2000000
- レンディション SD を考慮するための上限ビットレート制限 (排他) を定義します。
- タイプ:
-
useResolutionLabels
- タイプ:
Boolean
- デフォルト:
true
- の場合
true
、プラグインは利用可能な場合、水平解像度の線でレンディションを分類しようとします。 SD / HD の分類を常に使用する場合は false に設定します。
useResolutionLabels
オプションを実装するには、Studio のプラグインのオプションに次のように入力します。{ "useResolutionLabels": false }
結果の品質オプションは次のようになります。
次に、プレーヤーは、選択したグループから最適なレンディションを選択します。このセクションで詳しく説明するように、
sdBitrateLimit
次のように分類されたレンディションを決定するように構成可能ですSDそしてHD。 - タイプ:
-
resolutionLabelBitrates
- タイプ:
Boolean
- デフォルト:
false
- とき
true
、プラグインは解像度ラベルにビットレート情報を添付します (例:720p @ 13806 kbps)。このオプションは、が falseuseResolutionLabels
の場合、または解像度情報が使用できない場合は効果がありません。
この構成オプションが設定されている場合、
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 を参照してください。