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

    AMPを使用して Video Cloud 動画

    このトピックでは、Accelerated Mobile Pages(AMP)をどのように使用するかを学習します。 Brightcove Player.

    概要

    Accelerated Mobile Pagesは、「デバイスと配信プラットフォーム全体で、一貫して高速で美しく高性能なウェブサイトや広告の作成」を可能にすることを目的としたGoogleのプロジェクトです。 あなたは使うことができます Brightcove Player プロジェクトにはAMPが含まれているため amp-brightcove サイト運営者が埋め込むことができるコンポーネント Brightcove PlayerAMP HTMLドキュメント内のs。

    サンプル

    次のサンプルAMP HTMLページには、 Brightcove Playerとして指定することができます。 player は正常に機能するため、このサンプルの興味深い部分はHTMLです。 HTMLコードについては、このドキュメントの後半で説明します。

    ペンを見る AMPの例 by Brightcove ラーニングサービス(@rcrooks1969)上 コードペン.

    Player の監視

    Brightcove AMPの使用を強化するためにロードするプラグインを提供します。 Brightcove Player。 プラグインは、AMPが動画を制御するために必要なAMPのビデオインターフェースAPIのサポートを追加します player AMPドキュメント内。 また、いくつかの高度な機能を有効にします。

    • amp-analyticsとの統合:AMPページドメインに対する第三者の分析へのビューのトラッキングを可能にします。
    • アンプバインドとの統合:AMPページの他の要素で再生をコントロールすることができます。

    Playersプラグインがないと、AMPドキュメントで期待どおりに動作しない場合があります。

    プラグインのインストール

    すべての場合と同様 Brightcove Player プラグインのJavaScriptには、プラグインの名前とURLが必要です(このプラグインの使用にはCSSファイルは必要ありません):

    プラグイン名

      ampSupport

    JavaScriptのURL

      //players.brightcove.net/videojs-amp-support/1/videojs-amp-support.js

    AMPプラグインを実装するには、プラグインの関数名とURLをプラグインのJavaScriptに追加します。

    1. In Studio、開いて PLAYERS モジュールと新しいのいずれかを作成します player または見つけます player プラグインを追加する場所。
    2. リンクをクリックすると player を開く playerのプロパティ。
    3. ナビゲーションヘッダーの プラグイン 左側のナビゲーションメニュー。
    4. 次にクリック プラグイン XNUMXつのオプションから。
      プラグインを選択
    5. から プラグインを追加する select カスタムプラグイン.
    6.   プラグイン名 入力します ampSupport.
    7.   JavaScriptを URL、入力:
        //players.brightcove.net/videojs-amp-support/1/videojs-amp-support.js
    8. このプラグインにCSSやオプションを入力する必要はありません。
      プラグインをインストールする
    9. ナビゲーションヘッダーの 保存.
    10. 公開するには player、クリック 公開と埋め込み>変更の公開.
    11. 開いているダイアログを閉じるには、 閉じる.

    AMPのリソース

    AMPプロジェクトは、 amp-brightcove コンポーネントを表示するコンポーネント Brightcove Player。 コンポーネントは amp-brightcoveドキュメント。

    AMPは例を提供する amp-brightcove 次の文書に詳細が記載されています。

    コード検査

    上記のCodePenサンプルのコードを以下に示します。 コードの完全な説明は、上記のリンク先のドキュメントでAMPによって提供されています。 次のリストには、注意すべきいくつかのトリック/トラップがあります。

    • Line 20:コードを美しくしないでください。 ボイラープレートCSSは、AMPが提供する必要があります。
    • ライン35: widthheight 属性は、 player レスポンシブレイアウトに埋め込まれています。
      <!--
        ## Introduction
    
        The `amp-brightcove` component allows embedding a Brightcove
        [Video Cloud](https://www.brightcove.com/en/online-video-platform) or
        [Perform](https://www.brightcove.com/en/perform) player.
      -->
      <!-- -->
      <!doctype html>
      <html ⚡>
      <head>
        <meta charset="utf-8">
        <title>amp-brightcove</title>
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <!-- ## Setup -->
        <!-- Import the Brightcove component in the header. -->
        <script async custom-element="amp-brightcove" src="https://cdn.ampproject.org/v0/amp-brightcove-0.1.js"></script>
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <link rel="canonical" href="https://ampbyexample.com/components/amp-brightcove/">
        <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    
      </head>
      <body>
    
        <!-- ## Basic Usage -->
        <!--
          A responsive brightcove video. The required data is `data-account` and `data-video-id`. Other
          supported parameters are `data-player-id`, `data-embed` and `data-playlist-id`.
        -->
        <amp-brightcove
          data-account="1752604059001"
          data-video-id="5715315990001"
          data-player-id="H1xW7NWcz"
          layout="responsive"
          width="16" height="9">
        </amp-brightcove>
    
      </body>
      </html>

    特徴

    AMPのドキュメントで説明されていますが、ここでは特に重要な機能がいくつか強調表示されています。

    カスタムパラメータ

    あなたはあなたに追加情報を渡したいと思うかもしれません player プラグインがアクセスできるようにします。 これを行うには、 amp-brightcove 名前を付ける必要がある要素 data-param-*ここで、 * あなたの財産の名前です。

    パラメータは、キャメルケースの属性名が player URL。 キーと値はURLエンコードされています。 例えば:

    • data-param-language="de" になる &language=de
    • data-param-ad-vars="key:val;key2:val2" になる &adVars=key%3Aval%3Bkey2%3Aval2

    ドック(ピクチャーインピクチャー)

    dock 属性は「ドッキング」します player それがビューの外にスクロールされるとき。 の player が小さくなり、Webページの右上近くに移動します。 HTML標準では、この機能を次のように呼びます。 ピクチャーインピクチャー。 ドッキングのスクリーンショット player 以下:

    ドック

    この機能を実装するには、次のことを行う必要があります。

    1. 次のコードスニペットの2行に示すように、ドック機能のコードを含むスクリプトを含めます。
    2. 加えます dock 属性を <amp-brightcove> 行13に示すように、タグ。
      ...
          <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>
      </head>
      <body>
    
      ...
          <amp-brightcove
          data-account="1752604059001"
          data-video-id="5715315990001"
          data-player-id="H1xW7NWcz"
          layout="responsive"
          width="16" height="9"
          dock>
        </amp-brightcove>
        ...

    外部参照元のサポート

    Brightcove Player v6.25.0以降では、iframeでの任意のリファラーの設定がサポートされています。 AMPコンポーネントは、独自のリファラーを介して player、 referrer="EXTERNAL_REFERRER" 彼らのamp-brightcove埋め込み属性になります。

    EXTERNAL_REFERRERはAMP独自のマクロです。 https://github.com/ampproject/amphtml/blob/19135a3aac7813a9ff263a9f863fe35aeb316582/spec/amp-var-substitutions.md#external-referrer 詳細については。

    AMP分析

    An アンプアナライザ コンポーネントをAMPドキュメントで使用して、任意のアナリティクスのデータを追跡できます。 サイト運営者様がビデオイベントをご希望の場合は、これを行うことができます。

    AMP Analytics構文のAMPのドキュメント(厄介な)は次のとおりです: https://www.ampproject.org/docs/reference/components/amp-analytics。 具体的には、ビデオ分析: https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-video-analytics.md.

    トラッキングする例があります example.com ビーコンはネットワークタブでエラーとして表示されます: http://solutions.brightcove.com/bclifford/ampexamples/analytics.html.

    AMPバインド

    AMPバインドは、コンポーネント間でやり取りするためのAMPのAPIです。 基本的なレベルで、それはあなたが何かの外部に何かを持つことができます player 再生を制御します。 たとえば、次のコードはビデオを再生します。 myPlayer に表示されているポートが id amp-brightcoveの player.

        <button on="tap:myPlayer.play">Play</button>

    AMPはビデオイベントを信用していないので、ビデオの終了時に演奏するなど、現在はもっと便利なことはできません。 これの例はここにあります: http://solutions.brightcove.com/bclifford/ampexamples/bind.html.

    Advertising

    プレロールを含む広告は players AMPで使用されます。

    広告プラグインとその設定は、 playerの設定。 広告サーバーの呼び出しに記事固有の値を含める必要がある場合は、カスタムデータを player 下記のプラグイン。

    前述のように、AMPは有効なAMPページに追加できるものは非常に厳密です。 たとえば、 id amp-brightcove タグを使用して script たとえば、IMA3プラグインを構成するためのブロック。 前の段落で述べたことを繰り返すために、広告は playerの設定。 Studio または Player Management API.

    広告マクロを利用する広告設定URLを使用する場合は、 {pageVariable.adId}、変更する必要があります playerの設定。 (上記のように)カスタムパラメータを次のように使用できます。

      data-param-ad-id="preonlybumper"

    これにより、広告マクロで値を自動的に使用できるようにはなりません {pageVariable.adId}。 それを作るには ad-id/adId プロパティを広告URLに使用できる場合は、 Brightcove Player's query_string_to_window 設定オプション。 このオプションは、クエリ文字列パラメータからグローバル名前空間(ウィンドウ)変数の個数を制御します。 だから、 data-param-ad-id="..." プラグインで使用できるようにするには、以下を追加する必要があります player を使用した構成 Player Management API (コードの下の注意を参照してください):

        "query_string_to_window": {
          "globals": [
            "adId"
          ]
        }

    更新の具体的な手順については、 player Player_Configurations-Update a Player 構成 から Player Management API 参照。

    スタイリング player

    スタイルを設定したい場合 player そのためには、特別な構文を使用する必要があります。 たとえば、サイズを設定したい場合 player、あなたは style 示されているようにブロックし、 player また、 divここに示すように、

      <style amp-custom>
        .player-container {
          width: 640px;
          height: 360px;
        }
      </style></code></pre>
    
      ...
    
      <div class="player-container">
        <amp-brightcove
          data-account="1752604059001"
          data-video-id="5715315990001"
          data-player-id="H1xW7NWcz"
          layout="responsive"
          width="16" height="9">
        </amp-brightcove>
      </div>

    あなたはシングルを追加することができます style タグを含む必要がありますが、 amp-custom 属性。

    ボットのエラー抑制

    AMPをサポートしないボットがAMPビデオを含むページを閲覧すると player、失敗したビデオエラーが生成されます。 これは、SEOランキングを損なう可能性があります。 あなたは使うことができます suppressNotSupportedError 内のオプション Brightcove Playerこれが発生するのを防ぐためののJSON構成。 以下を追加して、これらの誤ったエラーを抑制します。

    "suppress_not_supported_error": true

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