概要
カスタムエンドスクリーンプラグインを使用すると、ビデオ再生の終了時に、顧客が提供した HTML を表示できます。
以下のサンプルビデオは、カスタムエンドスクリーンプラグインの使用方法を示しています。この短いビデオの最後に、次のHTMLからテキストが表示されます。
<strong>Content</strong> for <em>custom</em> end screen
プレーヤーモジュールを使用して実装する
カスタムエンドスクリーンは、エンドスクリーンのプロパティを編集するか、カスタムエンドスクリーンプラグインを使用して実装できます。Players モジュールを使用してカスタムエンドスクリーンプラグインを実装するには、次の手順に従います。
- を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
- プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
- 左側のナビゲーションメニューで [ End Screens] をクリックします。
- 次に、[ プレーヤーの終了画面] の種類で、下向き矢印をクリックして [ カスタム] を選択します。
- 「カスタム HTML」テキストボックスに構成オプションを入力します。
{ "content": "<strong>Content</strong> for <em>custom</em> end screen" }
- [ 保存] をクリックします。
- プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします。
- 開くダイアログを閉じるには、[ 閉じる] をクリックします。
コードを使用して実装する
プラグインを実装するには、プラグインコードの場所、必要に応じてスタイルシート、プラグイン名、プラグイン設定オプションを知る必要があります。プラグインコードとスタイルシートの場所は次のとおりです。
https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js
https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css
プラグインの名前はでcustomEndscreen
、オプションのセットの例は次のとおりです。
{
"content": "Content for custom end screen"
}
以下は、プレーヤーのインページ埋め込み実装を使用して、カスタム Endscreen プラグインをプレーヤーの単一のインスタンスに関連付けることを示しています。
- 12行目です:
link
タグを使用して、プラグインの CSS をhead
HTML ページのに含めます。 - 14行目:
video
id
タグに何らかの値を持つ属性を与えます。この場合は myPlayerID。 - 23行目です:
script
タグを使用して、プラグインの JavaScript をbody
HTML ページのに含めます。 - 27行目です:プレイヤーへの参照を作成します。
- 28-30行目は次のとおりです。プラグインを初期化し、カスタムオプションを渡します。
<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css">
<video-js id="myPlayerID"
data-account="1752604059001"
data-player="decfdaf5-0a6e-43f6-82d3-39d125c413c4"
data-embed="default"
data-video-id="4077874637001"
class="video-js" controls></video-js>
<script src="https://players.brightcove.net/1752604059001/decfdaf5-0a6e-43f6-82d3-39d125c413c4_default/index.min.js"></script>
<script type="text/javascript" src="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js"></script>
<script type="text/javascript">
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
myPlayer.customEndscreen({
"content": "<strong>Content</strong> for <em>custom</em> end screen"
})
});
</script>
プラグインを実装するには、プラグインコードの場所、必要に応じてスタイルシート、プラグイン名、プラグイン設定オプションを知る必要があります。プラグインコードとスタイルシートの場所は次のとおりです。
- https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js
- https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css
プラグインの名前はでcustomEndscreen
、オプションのセットの例は次のとおりです。
{
"content": "Content for custom end screen"
}
以下は、プレーヤーのインページ埋め込み実装を使用して、カスタム Endscreen プラグインをプレーヤーの単一のインスタンスに関連付けることを示しています。
- 1 行目:
link
タグを使用して、プラグインの CSS をhead
HTML ページのに含めます。 - 3行目:を与える
video
タグを付けるid
この場合、何らかの値を持つ属性myPlayerID。 - 12行目です:
script
タグを使用して、プラグインの JavaScript をbody
HTML ページのに含めます。 - 16行目:プレイヤーへの参照を作成します。
- 17~19行目:プラグインを初期化し、カスタムオプションを渡します。
<link rel="stylesheet" type="text/css" href="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css">
<video-js id="myPlayerID"
data-account="1752604059001"
data-player="decfdaf5-0a6e-43f6-82d3-39d125c413c4"
data-embed="default"
class="video-js"
controls></video-js>
<script src="https://players.brightcove.net/1752604059001/decfdaf5-0a6e-43f6-82d3-39d125c413c4_default/index.min.js"></script>
<script type="text/javascript" src="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js"></script>
<script type="text/javascript">
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
myPlayer.customEndscreen({
"content": "<strong>Content</strong> for <em>custom</em> end screen"
})
});
</script>
プロパティ
次のプラグインプロパティは、カスタムエンドスクリーンプラグインを制御するために使用されます。
content
:- タイプ:
string
- カスタムエンドスクリーンにレンダリングされる文字列リテラルまたは HTML。
- タイプ:
エンドスクリーンをカスタマイズする
CSS を使用して、エンドスクリーンの外観をカスタマイズできます。以下は、あなたができることのいくつかの例です。実装をテストして、ページコンテンツで機能することを確認してください。
これは、ビデオの再開ボタンとソーシャル共有ボタンを備えたエンドスクリーンの表示方法です。
ボタンサイズの変更
たとえば、エンドスクリーンボタンのサイズを変更したいとします。これらのボタンイメージは、スケーラブルベクターグラフィックス (SVG) 形式なので、すべてのプラットフォームにすばやくロードできます。このため、width
およびheight
CSS プロパティを使用してサイズを変更することはできません。
代わりに、これらのボタンは XML テキストファイルであるため、font-size
CSS プロパティを使用してサイズを変更できます。
両方のボタンを小さくするには、以下のコードを使用します。
.vjs-overlay-buttons {
font-size: .5em;
}
パーセンテージ値を使用すると、同じ効果が得られます。
.vjs-overlay-buttons {
font-size: 50%;
}
結果は次のようになります。
または、各ボタンのサイズを個別に制御できます。
.vjs-restart-control {
font-size: .5em;
}
.vjs-trigger-social-control {
font-size: .5em;
}
ボタンの下にコンテンツを移動する
このマニュアルでは、エンドスクリーンにコンテンツを追加する方法について学習しました。確認するには、プラグインに任意の HTML を追加できます。以下のコードは、エンドスクリーンに当社のホームページへのリンクを追加します。
{
"content": "<a href='https://www.brightcove.com'>Visit our home page</a>"
}
デフォルトでは、追加したコンテンツは終了画面のボタンの上に表示されます。
次のCSSを使用して、HTMLコンテンツを終了画面ボタンの下に配置します。
- 190〜193行目:ボタンを上から配置します。これらの要素は、すでにページの中央に配置されています。
- 194-196号線:オーバーレイ全体のデフォルトのパディングを削除して、カスタムテキストを中央揃えにします。
- 197〜202行目:カスタムテキストを下から配置し、水平方向に中央に配置します。
.vjs-overlay-buttons {
position: absolute;
top: 5em;
}
.vjs-custom-overlay {
padding: 0;
}
.vjs-endscreen-overlay-content {
position: absolute;
bottom: 5em;
text-align: center;
width: 100%;
}
結果は次のようになります。
垂直方向のコンテンツとボタンを表示する
また、HTML コンテンツのレイアウトや終了画面ボタンを変更することもできます。既定では、ボタンは水平方向に表示され、コンテンツはボタンの上に表示されます。以下のコードは、コンテンツをボタンの左側に浮動させ、ボタンを垂直に表示します。
- 205-210行:ボタンを上から左に配置します。幅が小さいため、ボタンは垂直方向に整列しました。
- 211-213行目:オーバーレイ全体のデフォルトのパディングを削除します。
-
211〜223行目は次のとおりです。カスタムテキストをボタンの左側に配置し、オーバーレイの半分で水平方向と垂直方向の中央に配置します。
.vjs-overlay-buttons {
position: absolute;
width: 10%;
top: 20%;
left: 50%;
}
.vjs-custom-overlay {
padding: 0;
}
.vjs-endscreen-overlay-content {
position: absolute;
float: left;
width: 50%;
text-align: center;
top: 45%;
transform: translate(0, -50%)
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
}
結果は次のようになります。
デフォルトのCSSプロパティをオーバーライドすることで、エンドスクリーンの外観を工夫することができます。ブラウザで、要素を検査して、要素クラスの名前と値を検索します。この方法の簡単な確認については、「プレーヤーの外観をカスタマイズする」ドキュメントを参照してください。
mailto をビデオ名で使用する
動画の視聴者に質問やコメントをメールで送信することを許可することができます。HTMLを使用してこれを行うことができますmailto次に示すように、カスタムエンドスクリーンのリンク:
リンクをクリックすると、顧客のデフォルトの電子メールクライアントが開きます。以下のコードは、動画のメタデータ(この場合は動画名)を使用して自動的にメールの件名にする方法を示しています。
次のセクションでは、その特定のタスクを実行する方法について説明しますが、さらに、 mediainfo プロパティからデータを取得すると、mailto リンクで任意のビデオメタデータを使用できます。
- 235号線:CustomendScreen プラグインの CSS を含めます。
- 236-241行目:CSSを使用してプレーヤーのサイズを変更します。
- 245〜251行目:標準のページ内埋め込みコードが使用されます。
id
が追加されることに注意してください。 - 253行目:エンドスクリーンプラグインの JavaScript コードのソースを指定します。
- 256,257,270行線:プレイヤーでコードを使用するための標準設定。
- 262号線:
loadstart
イベントをリッスンします。これは、ビデオの読み込みが開始されmyPlayer.mediainfo
、で見つかったそのメタデータが使用可能になったときです。 - 263行目:URLは、ビデオの名前をエンコードし、変数に割り当てます。mailto リンクの件名として使用される値には、HTML 標準で文字列を URL エンコードする必要があります。
- 264-265行目:
<a href="mailto">
リンクを構築します。 - 266-268行目:
customEndscreen()
メソッドを呼び出し、エンドスクリーンのコンテンツ用に作成した mailto リンクを使用します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>End screen with title as subject</title>
<link href="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.css" rel='stylesheet'>
<style type="text/css">
.video-js {
width: 600px;
height: 338px;
}
</style>
</head>
<body>
<video-js id="myPlayerID"
data-video-id="1507781667001"
data-account="1507807800001"
data-player="default"
data-embed="default"
class="video-js" controls></video-js>
<script src="https://players.brightcove.net/1507807800001/default_default/index.min.js"></script>
<script src="https://players.brightcove.net/videojs-custom-endscreen/2/videojs-custom-endscreen.min.js"></script>
<script type="text/javascript">
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this,
subjectEncoded,
theMailto,
theLink;
myPlayer.on('loadstart',function(){
subjectEncoded = encodeURI(myPlayer.mediainfo.name);
theMailto = 'mailto:nowhere@mozilla.org?subject=' + subjectEncoded;
theLink = '<a href="' + theMailto + '">Email a Comment</a><br /><br/>';
myPlayer.customEndscreen({
"content": theLink
})
})
});
</script>
</body>
</html>
マクロの使用
content
カスタムエンドスクリーン用に提供された文字列に、マクロが含まれるようになりました (videojs-contrib-ads でサポートされています)。たとえば、エンドスクリーンに現在プレーヤー内にある動画の名前と説明を含める場合は、次のようなコードを使用します。
videojs.getPlayer('myPlayerID').on('loadstart', function() {
var myPlayer = this;
// +++ Call endscreen method +++
myPlayer.customEndscreen({
content: '{mediainfo.name} - {mediainfo.description}'
});
});
これにより、次の終了画面が表示されます。
使用可能なマクロの完全なリストは次のとおりです。
マクロ | 説明 |
---|---|
{player.id} | プレーヤーID |
{mediainfo.id} | 動画ID |
{mediainfo.name} | ビデオタイトル |
{mediainfo.description} | 短い説明 (最大 250 文字) |
{mediainfo.tags} | 動画に関連付けられたタグ(メタデータ) |
{mediainfo.reference_id} | 参照 ID |
{mediainfo.duration} | Video Cloud によって報告された動画の再生時間 |
{mediainfo.ad_keys} | Studioの Media モジュールで追加および編集できる自由形式のテキスト文字列。クエリパラメータは、
|
{player.duration} | プレーヤーによって測定されたビデオの再生時間(mediainfo.duration おそらくと若干異なる場合があり、おそらくより正確です) |
{document.referrer} | 参照ページ URL |
{window.location.href} | 現在のページ URL |
{timestamp} | 1/1/70以降の現在の現地時間(ミリ秒) |
{random} | 0-1兆の乱数(ユニークな印象を作成するために使用されます。これにより、広告がブラウザにキャッシュされるのを防ぎ、インプレッションの不一致を防ぎます)。 |
既知の問題
- コントロールバーを常に手動で表示したままにし、カスタム終了画面プラグインを使用しているという非常にまれな場合は、終了画面が表示された後にコントロールバーが正しく機能するように小さな変更を行う必要があります。デフォルトでは、エンドスクリーンプラグインはコントロールバーを無効にします。コントロールバーを有効にするには、常に表示されるので、
player.controls(true)
ModalDialog
あなたはの後のJavaScriptを使用する必要がありますmodalopen
イベントが送出されます。
更新履歴
カスタムエンドスクリーンプラグインのリリースノートを参照してください。
過去のリリースノートについては、ここの changelog を参照してください。