サポート サポート問い合わせ先 | システムステータス システムステータス
ページ内容

    カスタムエンドスクリーンプラグイン

    このトピックでは、カスタムエンドスクリーンプラグインの使用方法と、それを使用してプラグインを実装する方法を学びます。 Studio そしてカスタムコーディングを通じて。

    概要

    カスタムエンドスクリーンプラグインを使用すると、ビデオ再生の終了時に顧客が提供したHTMLを表示できます。

    以下のサンプルビデオは、カスタムエンドスクリーンプラグインの使用方法を示しています。 この短いビデオの最後に、次のHTMLから表示されるテキストが表示されます。

    <strong>Content</strong> for <em>custom</em> end screen

    使用して実装 Playersモジュール

    カスタムエンドスクリーンは、 終了画面のプロパティを編集する または、カスタムの終了画面プラグインを使用します。 を使用してカスタム終了画面プラグインを実装するには Playersモジュール、次の手順に従います。

    1. Video Cloud Studioで PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
    2. リンクをクリックすると player を開く playerのプロパティ。
    3. ナビゲーションヘッダーの 終了画面 左側のナビゲーションメニュー。
    4. 次に、 Player 終了画面 タイプを選択し、下矢印をクリックして カスタム.
    5. 構成オプションを カスタムHTML テキストボックス。
      {
        "content": "<strong>Content</strong> for <em>custom</em> end screen"
      }
    6. ナビゲーションヘッダーの 保存.
    7. 公開するには player、クリック 公開と埋め込み>変更の公開.
    8. 開いているダイアログを閉じるには、 閉じる.

    コードを使用して実装する

    プラグインを実装するには 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)形式であるため、すべてのプラットフォームですばやく読み込まれます。 このため、サイズを変更することはできません。 widthheight 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の 次のように、カスタムエンドスクリーンのリンクをクリックします。

    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; あなたはフォームでクエリパラメータを使用する必要があります
      cust_params={mediainfo.ad_keys}
    {player.duration} によって測定されるビデオの長さ player (おそらく少し異なります mediainfo.duration おそらくもっと正確です)
    {document.referrer} 参照ページのURL
    {window.location.href} 現在のページのURL
    {タイムスタンプ} 1 / 1 / 70以降の現地時間(ミリ秒)
    {ランダム} 乱数0-1兆(ユニークなインプレッションを作成するために使用されます。これにより、広告がブラウザにキャッシュされなくなり、インプレッションの不一致が防止されます)。

    既知の問題点

    • 手動でコントロールバーを常に表示したままカスタムエンドスクリーンプラグインを使用しているという非常にまれなイベントでは、エンドスクリーンが表示された後にコントロールバーが正しく機能するように小さな変更を加える必要があります。 デフォルトでは、エンドスクリーンプラグインはコントロールバーを無効にします。 コントロールバーを有効にするには、常に表示されているので、JavaScriptを使用する必要があります。 player.controls(true) 後に ModalDialog's modalopen イベントが送出されます。

    変更履歴

    見ます 変更履歴はこちら.


    ページの最終更新日:28年2020月XNUMX日