カスタムエンドスクリーンプラグイン
概要
カスタムエンドスクリーンプラグインを使用すると、ビデオ再生の終了時に顧客が提供したHTMLを表示できます。
以下のサンプルビデオは、カスタムエンドスクリーンプラグインの使用方法を示しています。 この短いビデオの最後に、次のHTMLから表示されるテキストが表示されます。
<strong>Content</strong> for <em>custom</em> end screen
使用して実装 Playersモジュール
カスタムエンドスクリーンは、 終了画面のプロパティを編集する または、カスタムの終了画面プラグインを使用します。 を使用してカスタム終了画面プラグインを実装するには Playersモジュール、次の手順に従います。
- Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
- リンクをクリックすると player を開く playerのプロパティ。
- ナビゲーションヘッダーの 終了画面 左側のナビゲーションメニュー。
- 次に、 Player 終了画面 タイプを選択し、下矢印をクリックして カスタム.
- 構成オプションを カスタムHTML テキストボックス。
{ "content": "<strong>Content</strong> for <em>custom</em> end screen" }
- ナビゲーションヘッダーの セットで€6.
- 公開するには player、クリック パブリッシュと埋め込み>変更の公開をクリックします。.
- 開いているダイアログを閉じるには、 閉じる.
コードを使用して実装する
プラグインを実装するには player プラグインコードの場所、必要に応じてスタイルシート、プラグイン名とプラグイン設定オプションを知る必要があります。 プラグインコードとスタイルシートの場所は次のとおりです。
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"
}
以下は、ページはめ込みの実装の使用を示しています player カスタムエンドスクリーンプラグインを player.
- ライン12:
link
タグを使用して、プラグインのCSSをhead
HTMLページの - ライン14:
video
タグにid
この場合、ある値を持つ属性 myPlayerID. - ライン23:
script
タグを使用して、プラグインのJavaScriptをbody
HTMLページの - 27行目:への参照を作成します player.
- 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>
プラグインを実装するには player プラグインコードの場所、必要に応じてスタイルシート、プラグイン名とプラグイン設定オプションを知る必要があります。 プラグインコードとスタイルシートの場所は次のとおりです。
- 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"
}
以下は、ページはめ込みの実装の使用を示しています player カスタムエンドスクリーンプラグインを player.
- ライン1:
link
タグを使用して、プラグインのCSSをhead
HTMLページの - ライン3:
video
タグにid
この場合、ある値を持つ属性 myPlayerID. - ライン12:
script
タグを使用して、プラグインのJavaScriptをbody
HTMLページの - 16行目:への参照を作成します player.
- 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(Scalable Vector Graphics)形式であるため、すべてのプラットフォームですばやく読み込まれます。 このため、サイズを変更することはできません。 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:オーバーレイ全体のデフォルトのパディングを削除します。
-
線214-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プロパティをオーバーライドすることで、エンドスクリーンの見た目を創造することができます。 ブラウザで、要素の要素名と値を調べます。 これを行う方法を簡単に確認するには、 監視 Player 外観 の資料をご参照ください。
ビデオ名でmailtoを使う
動画の視聴者に質問やコメントをメールで送信することを許可することができます。 これを行うには、HTML mailtoの 次のように、カスタムエンドスクリーンのリンクをクリックします。

リンクをクリックすると、顧客のデフォルトの電子メールクライアントが開きます。 下のコードは、動画のメタデータ(この場合は動画名)を使用して、自動的にメールの件名になる方法を示しています。
次のセクションでは、特定のタスクを実行する方法について説明しますが、さらに、 mediainfo 任意のビデオメタデータをmailtoリンクで使用できます。
- Line 235:customEndscreenプラグインのCSSを含めます。
- 行236-241:CSSのサイズを変更する player.
- 245〜251行目:標準のページはめ込み埋め込みコードが使用されています。 注意してください
id
追加されます。 - 253行:エンドスクリーンプラグインのJavaScriptコードのソースを指定します。
- 256,257,270、XNUMX、XNUMX行目:コードを player.
- ライン262:
loadstart
イベント。 これは、動画の読み込みが開始され、そのメタデータがmyPlayer.mediainfo
、 利用可能です。 - Line 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でサポート)。 たとえば、現在終了画面にあるビデオの名前と説明を終了画面に含めたい場合 player、次のようなコードを使用します。
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} | のMediaモジュールで追加および編集できる自由形式のテキスト文字列 Studio; あなたはフォームでクエリパラメータを使用する必要があります
|
{player.duration} | によって測定されるビデオの長さ player (おそらく少し異なります mediainfo.duration おそらくもっと正確です) |
{document.referrer} | 参照ページのURL |
{window.location.href} | 現在のページのURL |
{タイムスタンプ} | 1 / 1 / 70以降の現地時間(ミリ秒) |
{ランダム} | 乱数0-1兆(ユニークなインプレッションを作成するために使用されます。これにより、広告がブラウザにキャッシュされなくなり、インプレッションの不一致が防止されます)。 |
既知の問題点
- 手動でコントロールバーを常に表示したままカスタムエンドスクリーンプラグインを使用しているという非常にまれなイベントでは、エンドスクリーンが表示された後にコントロールバーが正しく機能するように小さな変更を加える必要があります。 デフォルトでは、エンドスクリーンプラグインはコントロールバーを無効にします。 コントロールバーを有効にするには、常に表示されているので、JavaScriptを使用する必要があります。
player.controls(true)
後にModalDialog
'smodalopen
イベントが送出されます。
変更履歴
見ます 変更履歴はこちら.