Brightcove Playerサンプル：水平ボリュームコントロール
開発シーケンス
推奨される開発順序は次のとおりです。
- インページ埋め込みプレーヤーの実装を使用して、プレーヤー、プラグイン、CSS の機能をテストします (CSS が必要な場合)
- ローカルテストのためにプラグインのJavaScriptとCSSを別々のファイルに置く
- エラーを解決したら、プラグインコードとCSSをサーバーにデプロイします
- Studio を使用してプラグインと CSS をプレイヤーに追加する
- iframe の実装が適切であると判断した場合は、インページ埋め込みプレーヤーの実装を置き換えます (次のセクションで詳しく説明します)。
これらの手順の詳細については、「ステップバイステップ」を参照してください。プラグイン開発ガイド。
iframe またはページ内埋め込み
Brightcove Player の拡張機能を開発する際には、コードが iframe 実装またはページ内埋め込み実装に最も適しているかどうかを判断する必要があります。ベストプラクティスの推奨事項は、iframe 実装で使用するプラグインを構築することです。iframe プレーヤーを使用する利点は次のとおりです。
- 既存のJavaScriptおよび/またはCSSとの衝突はありません
- 自動応答性
- iframe は、ソーシャルメディアアプリ（または動画が他のアプリに「移動」する必要があるとき）での使用を容易にします。
インページ埋め込みプレーヤーの統合はより複雑になりますが、その実装に関するコードを計画する場合もあります。一般化するために、このアプローチは、包含ページがプレイヤーと通信する必要がある場合に最適です。具体的には、いくつかの例を挙げます。
- 含まれているページのコードは、プレイヤーイベントをリッスンして行動する必要があります
- プレーヤーは包含ページのスタイルを使用します
- iframe は、含まれているページからのリダイレクトのように、アプリロジックが失敗します。
最終実装で iframe コードを使用しない場合でも、JavaScript 用のプラグインと CSS 用の別のファイルを使用して、ページ内埋め込みコードを使用できます。これにより、ロジックがカプセル化され、複数のプレーヤーで簡単に使用できます。
実装を選択
この例では、ページ内埋め込みコードを使用してテストし、CSS および JavaScript ファイルをプレーヤーに追加します。次に、プラグインをデプロイします。水平ボリュームプラグインをプレーヤーに追加すると、iframe 実装を使用できます。
使用された API リソース
以下のセクションでは、さまざまな API から使用されるリソースについて詳しく説明します。
Brightcove Playerの API メソッド
control_bar.addChild()control_bar.removeChild()
プレイヤーは
下のプレーヤーで、既定の垂直コントロールバーの代わりに水平ボリュームコントロールバーが表示されます。
それはどのように動作するか
以下のセクションでは、例で使用されているプレーヤー、JavaScript、CSSコードについて説明します。
プレーヤーを作成する
プレーヤーを作成し、そのプレーヤーにビデオを割り当てるには、次の手順に従います。
- Players モジュールで、新しいプレーヤーを作成するか、既存のプレーヤーを使用します。
- メディアモジュールで、ビデオを選択し、このプレーヤーで公開します。動画コンテンツをプレーヤーに割り当てて公開します。
- ページ内埋め込みコードをコピーし、新しい HTML ファイルに貼り付けます。
プレーヤーコード
ページ内埋め込みコードは次のようになります。
<video-js id="video_1"
width="640px" height="360px"
data-video-id="4172255216001"
data-account="1752604059001"
data-player="default"
data-embed="default"
class="video-js" controls></video-js>
<script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>
スタイルシート
この例では、Brightcove Playerに CSS スタイルを使用しています。
-
9～22行:コントロールバーの要素の順序を設定します。次の使用例は、ミュートコントロールとボリュームコントロールをプログレスバーの後、フルスクリーンボタンの前に配置します。
コントロールバーのアイコンの順序の設定の詳細については、「 Player の外観をカスタマイズする」ドキュメントを参照してください。
- 24-26行目線:プログレスバーに合わせるために、ボリュームコントロールの周囲のデフォルトのシャドウを削除します。
- 27-34行目線:ボリュームコントロールの高さと背景色を設定します。
- 36～38行目は次のとおりです。ボリュームコントロールの右側にパディングを追加して、フルスクリーンボタンと重ならないようにします。
<style type="text/css">
/* Order of controls in bar, should flow in before fullscreen button. */
.vjs-mute-control {
order: 7;
-webkit-box-ordinal-group: 7;
-moz-box-ordinal-group: 7;
-webkit-order: 7;
-ms-flex-order: 7;
}
.vjs-volume-control {
order: 8;
-webkit-box-ordinal-group: 8;
-moz-box-ordinal-group: 8;
-webkit-order: 8;
-ms-flex-order: 8;
}
/* Better match progress bar */
.video-js.video-js .vjs-volume-bar:before {
box-shadow:none;
}
.video-js.video-js .vjs-volume-bar,
.video-js.video-js .vjs-volume-bar:before,
.video-js.video-js .vjs-volume-level {
height: 4px;
}
.video-js.video-js .vjs-volume-handle {
background-color: initial;
}
/* Additional padding to reduce inadvertently covering the fullscreen button */
.vjs-volume-control {
padding-right: 5px;
}
</style>
JavaScriptコード
ページコードに次の JavaScript を追加します。
- 57行線:準備ができたら、プレーヤーへの参照を取得します。
- 59行:プレイヤーのコントロールバーへの参照を取得します。
- 60行目線:ボリュームメニューボタンへの参照を取得します。
-
61-62行目:ミュートボタンとボリュームコントロール要素をコントロールバーに追加します。
- 63号線:コントロールバーから既定の音量メニューボタンを削除します。
<script id="pageScript" type="text/javascript">
var myPlayer;
videojs.getPlayer('video_1').ready(function(){
myPlayer = this;
var control_bar = myPlayer.controlBar;
var vmb = control_bar.volumeMenuButton;
control_bar.addChild('VolumeControl');
control_bar.addChild('MuteToggle');
control_bar.removeChild(vmb);
});
</script>
プラグインを使う
この機能を複数のプレイヤーに簡単に追加できるように、プラグインを使用することをお勧めします。
CSS ファイルを作成する
CSS スタイルをファイルに移動し、インターネットにアクセスできる URL に配置します。
- CSS スタイル用の新しいファイルを作成します。この場合は、名前を付けます
horizontal-volume.css。 - HTML
<head>ファイルのセクションに、次のリンクを追加して、新しく作成した CSS ファイルを含めます。<link href="horizontal-volume.css" rel="stylesheet"> - HTML ページを参照します。水平ボリュームコントロールが表示されるはずです。ただし、スタイルが HTML ページから削除された場合を除きます。
JavaScript ファイルを作成する
プラグインの JavaScript コードをファイルに移動し、インターネットにアクセスできる URL に配置します。
- プラグインの JavaScript コード用の新しいファイルを作成します。この場合は、名前を付けます
horizontal-volume.js。 - JavaScript コードをメインの HTML ファイルからこの新しいファイルに切り取って貼り付けます。
- 77,85行目線:
videojs.registerPlugin()関数を使用して JavaScript コードをラップします。最初の引数はhorizontalVolume、プラグイン名です。 - 78号線:プレーヤーへの参照を取得します。
- 残りは前のセクションでレビューされたJavaScriptコードです。
/**
* Horizontal Volume
*/
videojs.registerPlugin('horizontalVolume', function() {
var myPlayer = this,
control_bar = myPlayer.controlBar,
vmb = control_bar.volumeMenuButton;
control_bar.addChild('VolumeControl');
control_bar.addChild('MuteToggle');
control_bar.removeChild(vmb);
});
- HTML ファイルで、
<script>既存のタグのすぐ下に次のコードを追加します。このコードには JavaScript ファイルが含まれており、その JavaScript で定義されているメソッドを呼び出します。<script type="text/javascript" src="horizontal-volume.js"></script> <script>videojs.getPlayer('video_1').horizontalVolume();</script> - HTML ページを参照します。水平ボリュームコントロールが表示されるはずです。ただし、JavaScript コードが HTML ページから削除されました。
プラグインとCSSをデプロイする
Players モジュールを使用してオーバーレイボタンプラグインをデプロイするには、次の手順に従います。
- 新しい Video Cloud Studio で、プレーヤーモジュールを開き、プレーヤーを見つけます。
- プレーヤーのリンクをクリックして、プレーヤーのプロパティを開きます。
- 「プラグイン」セクションを見つけて、「編集」をクリックします。
- JavaScript の URL には、プラグインの JavaScript を保存した場所を指定する URL を入力します。
- CSS の URL には、プラグインの CSS を保存した場所を指定する URL を入力します。
- [ 名前 ] に HorizontalVolume と入力します。
- このプラグインにはオプションがないので、プラグインオプションセクションを空白のままにしておくことができます。
- [ 保存 ] をクリックし、プレイヤーを公開します。
iframeを使う
iframe プレーヤーの実装を使用するのがベストプラクティスです。この例で可能な場合は、インページ埋め込み実装を iframe 実装に置き換えます。
- Media モジュールで、ビデオを選択し、このプレーヤーで公開します。プレイヤーモジュールに戻ります。
-
iframe 埋め込みコードをコピーし、新しい HTML ファイルに貼り付けます。コードは次のようになります。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Brightcove Player: Horizontal Volume - iframe</title> </head> <body> <iframe style='width: 640px;height: 360px;' src='//players.brightcove.net/1752604059001/b42edc12-2ac9-48a9-92bc-fbdb5ca9aed7_default/index.html?videoId=4172255216001' allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe> </body> </html> - HTML ページを参照します。プラグインが正常に機能しているはずです。