サポートに連絡する| システムステータス
ページコンテンツ

    Brightcove Playerサンプル:

    動画終了時にナビゲートこのトピックでは、クリックするとページが新しい URL に移動するビデオ端にオーバーレイを表示する方法を学習します。

    プレーヤーの例

    非常に短いビデオが完了すると、Brightcoveホームページへのリンクを含むオーバーレイが表示されます。ブライトコーブが提供するオーバーレイプラグインが使用されるため、JavaScript は必要ありません。CSSは、オーバーレイのスタイル設定に使用されます。

    ペンを見るビデオエンドに移動 Brightcove Learning Services( @ rcrooks1969) オンCodePen

    CodePen を使用する

    上記のCodePenを効果的に使用するためのヒントは次のとおりです。

    • [ 結果]ボタンをクリックして、プレーヤーの実際の表示を切り替えます。
    • HTML/CSS/JSボタンをクリックして、いずれかのコードタイプを表示します。
    • このドキュメントの後半では、アプリケーションで使用されるロジック、フロー、およびスタイル設定については、 Player/HTML設定アプリケーションフロー、およびアプリケーションのスタイル設定で説明されます。セクション。これらのセクションの情報に沿って従う最も良い方法は、次のとおりです。
      1. CodePen の [ EDIT ON CODEPEN]ボタンをクリックし、1 つのブラウザ/ブラウザタブでコードを使用できるようにします。
      2. CodePen で、表示するコードを調整します。CodePen 内の異なるコードセクションの幅を変更できます。
      3. を見るプレーヤー/ 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を使用してディスプレイオーバーレイプラグインを追加します。

    1. を開きますプレイヤーモジュールを作成し、新しいプレーヤーを作成するか、プラグインを追加するプレーヤーを見つけます。
    2. プレーヤーのリンクをクリックして、プレイヤーのプロパティを開きます。
    3. 左側のナビゲーションメニューで [ プラグイン ] をクリックします。
    4. 次に、[ プラグインの追加] をクリックします
    5. [ プラグイン名 ] に、と入力しますoverlay
    6. JavaScript の URL には、次のように入力します。
      https://players.brightcove.net/videojs-overlay/2/videojs-overlay.min.js
    7. CSS の URL には、次のように入力します。
      https://players.brightcove.net/videojs-overlay/2/videojs-overlay.css
    8. [ オプション (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"
          }
        ]
      }
    9. [ 保存] をクリックします
    10. プレーヤーを公開するには、[ パブリッシュと埋め込み] > [変更の公開] の順にクリックします
    11. 開いているダイアログを閉じるには、[ 閉じる] をクリックします

    その他のHTML

    他の HTML 要素はページに追加されません。


    ページの最終更新日30 Sep 2021