プレーヤーの例
非常に短いビデオが完了すると、Brightcoveホームページへのリンクを含むオーバーレイが表示されます。ブライトコーブが提供するオーバーレイプラグインが使用されるため、JavaScript は必要ありません。CSSは、オーバーレイのスタイル設定に使用されます。
ペンを見るビデオエンドに移動 Brightcove Learning Services( @ rcrooks1969) オンCodePen。
CodePen を使用する
上記のCodePenを効果的に使用するためのヒントは次のとおりです。
- [ 結果]ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
- HTML/CSS/JSボタンをクリックして、いずれかのコードタイプを表示します。
- このドキュメントの後半では、アプリケーションで使用されるロジック、フロー、およびスタイル設定については、 Player/HTML設定、アプリケーションフロー、およびアプリケーションのスタイル設定で説明されます。セクション。これらのセクションの情報に沿って従う最も良い方法は、次のとおりです。
- CodePen の [ EDIT ON CODEPEN]ボタンをクリックし、1 つのブラウザ/ブラウザタブでコードを使用できるようにします。
- CodePen で、表示するコードを調整します。CodePen 内の異なるコードセクションの幅を変更できます。
- を見るプレーヤー/ HTML構成、アプリケーションフローおよび/またはアプリケーションのスタイリング別のブラウザ/ブラウザタブのセクション。これで、コードの説明に従い、同時にコードを表示できるようになります。
API/プラグインリソースを使用
Brightcove Playerプラグイン |
---|
オーバーレイプラグインを表示 |
アプリケーションのスタイリング
CSS は、オーバーレイの外観を変更するために使用されます。このサンプルで使用される CSS は次のとおりです。
/* override default styles for overlay */
.video-js .vjs-overlay {
width: 100%;
height: 20%;
color: #000;
background-color: rgba(255, 255, 255, 0.8);
left: 0;
top: 0;
padding-top: 5%;
padding-bottom: 5%;
margin-top: 10%;
padding-left: 0;
}
CSS を変更して目的の外観を定義し、インターネットにアクセスできる場所に CSS を保存する必要があります。プラグインの設定でこの CSS をポイントします。
プレーヤー/HTML構成
このセクションでは、プレーヤーの作成時に必要な特別な設定について詳しく説明します。さらに、ページ内埋め込みプレーヤー実装コード以外に、ページに追加する必要があるその他の HTML 要素についても説明します。
プレーヤーの設定
この場合、Studioを使用してディスプレイオーバーレイプラグインを追加します。
- を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
- プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
- 左側のナビゲーションメニューで [ プラグイン ] をクリックします。
- 次に、[ プラグインの追加] をクリックします。
- [ プラグイン名 ] に、と入力します
overlay
。 - JavaScript の URL には、次のように入力します。
https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js
- CSS の URL には、次のように入力します。
https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css
- [ オプション (JSON)] テキストボックスに構成オプションを入力します。
{ "content": "<strong>Default overlay content</strong>", "overlays": [ { "content": "<a href='http://www.brightcove.com'><span style='font-size:large'><strong>Brightcove Homepage</strong></span></a>", "start": "ended", "end": "play" } ] }
- [ 保存] をクリックします。
- プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
- 開いているダイアログを閉じるには、[ 閉じる] をクリックします。
その他のHTML
他の HTML 要素はページに追加されません。