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

    AMP外部ビデオを使用する

    In this topic, you will learn how Accelerated Mobile Pages (AMP) can be used with Brightcove Player and an external, non-Video Cloud video.

    概要

    アクセラレートモバイルページは、デバイスや配信プラットフォームにわたって一貫して高速で美しく、高いパフォーマンスを発揮するウェブサイトや広告の作成を可能にすることを目的としたGoogleプロジェクトです。「AMP で Brightcove Player を使用できます。プロジェクトには、パブリッシャーが AMP HTML ドキュメント内に Brightcove Player amp-brightcoveを埋め込むことができるコンポーネントが含まれているためです。この例では、amp-brightcoveコンポーネント経由で渡された外部(非ビデオクラウド)ビデオへの URL を受け入れるカスタムプラグインを使用して、カスタムdata-param-video-url属性です。

    サンプル

    以下は、Brightcove Playerを含む AMP HTML ページのサンプルです。プレーヤーは正常に機能するため、HTML はこのサンプルの興味深い部分です。HTML コードについては、このドキュメントの後半で調べます。

    ペンを見るAMP-Brightcoveプレーヤー-外部ビデオ Brightcove Learning Services( @ rcrooks1969) オンCodePen

    AMPからのリソース

    AMP プロジェクトは、amp-brightcoveBrightcove Playerを表示する特別なコンポーネントを開発しました。コンポーネントの詳細については、 amp-brightcove のドキュメントを参照してください。

    AMP は、amp-brightcove次のドキュメントの詳細を含む実装例を提供します。

    プレーヤーの設定

    ブライトコーブは、Brightcove Playerで AMP の使用を強化するためのプラグインを提供しています。このプラグインは、いくつかの高度な機能を有効にする AMP のビデオインターフェイス API のサポートを追加します。

    • amp-Analytics との統合 :AMPページドメインに対する第三者分析へのビューの追跡を可能にします。
    • アンプバインドとの統合:再生は、AMP ページの他の要素によって制御できます。

    プラグインのないプレイヤーは AMP でも動作しますが、その機能はありません。

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

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

    プラグイン名

      ampSupport

    JavaScriptのURL

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

    HTML ページコード検査

    上記の CodePen サンプルの HTML ページコードを以下に示します (プラグインコードは次のセクションで詳しく説明します)。コードの完全な説明は、上記にリンクされている文書で、AMPによって提供されています。次のリストには、注意すべきいくつかのトリック/トラップを示します。

    • 14行目:1 styleつのタグを追加できますが、amp-custom属性を含める必要があります。
    • 26行目線:コードを美化しないでください。定型文CSSは、AMPによって提供されるように必要です。
    • 42行目:外部ビデオの URL がここに渡されます。名前は iframe のsrc URL から取得されるため、名前はになりますvideoUrl
    • 43行目線:data-video-idが存在する必要がありますが、外部ビデオを使用する場合は値は割り当てられません。
    • 44行目線:widthheightおよび属性は、レスポンシブレイアウトに埋め込まれたプレーヤーのアスペクト比を決定します。
      <!--
        ## 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>
        <style amp-custom>
          .player-container {
            width: 640px;
            height: 360px;
          }
        </style>
        <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`.
        -->
        <div class="player-container">
          <amp-brightcove
            data-account="3676484087001"
            data-player-id="ByrhJWAPf"
            layout="responsive"
            data-param-video-url="//solutions.brightcove.com/bcls/videos/calm-day-oregon-coast.mp4"
            data-video-id
            width="16" height="9">
          </amp-brightcove>
        </div>
      
      
      </body>
      </html>   

    プラグインコード検査

    AMP 関数の方法は、amp-brightcoveコンポーネントが Brightcove Player の iframe 実装を作成することです。ここに示すように、iframe の URL には、カスタム属性になります。

      <iframe frameborder="0" allowfullscreen="true" src="https://players.brightcove.net/3676484087001/ByrhJWAPf_default/index.html?videoUrl=%2F%2Fsolutions.brightcove.com%2Fbcls%2Fvideos%2Fcalm-day-oregon-coast.mp4"; class="i-amphtml-fill-content" kwframeid="1"></iframe>   

    iframe コードをスクロールすると、クエリ文字列がここに表示されます。

    AMP iframe source

    クエリ文字列の名前はであることに注意してくださいvideoUrl。また、URL は URL エンコードされていることに注意してください。これらの問題はどちらも、ここに示すプラグインコードに反映されます。

    • 21~38行目は次のとおりです。パラメータとして関数に渡される、クエリ文字列に関連付けられた値を検索するヘルパー関数。
    • 7行目:ヘルパー関数を使用して、videoUrlクエリ文字列の値を取得します。
    • 8行目:ビデオの有効な URL を取得するには、JavaScript decodeURIComponent()のメソッドを使用します。
    • 11~14行目:デコードされた URL を使用して、プレーヤーにビデオを配置します。MP4 以外のビデオ形式を使用する場合は、正しい値を渡すか、typeビデオの拡張子を読み取って正しい値を割り当てるロジックを記述する必要があります。
    • 17~19行目:もちろん、必須ではありませんが、起動時にビデオを再生したい場合は、このコードを使用できます。
      videojs.registerPlugin('ampPassVideo', function() {
        var myPlayer = this,
          encodedVideoQueryParam,
          decodedVideoQueryParam;
      
        // Get the query string and un-URL encode it
        encodedVideoQueryParam = getQuerystring('videoUrl');
        decodedVideoQueryParam = decodeURIComponent(encodedVideoQueryParam);
      
        // Load the video into the player
        myPlayer.src({
          'type': 'video/mp4',
          'src': decodedVideoQueryParam
        });
      
        // On loadedmetadata event, play the video
        myPlayer.on('loadedmetadata', function(){
          myPlayer.play();
        });
      
        /*
         * usage: foo = getQuerystring("bctid", null);
         * foo will be equal to value of query param bctid
         * note that the default_ parameter is what you will get back
         * if the key isn’t found
         */
        function getQuerystring(key, default_) {
          var regex, qs;
          if (default_ == null) default_ = "";
          key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
          regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
          qs = regex.exec(window.location.href);
          if (qs === null) {
            return default_;
          } else {
            return qs[1];
          }
        }
      });   

    Studio またはプレーヤー管理 API を使用して、このプラグインをプレーヤーに割り当てます。

    特徴

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

    カスタムパラメータ

    プラグインにアクセスするために、プレーヤーに追加情報を渡すことができます。これを行うには、に属性を追加します。amp-brightcove名前を付ける必要がある要素data-param-*、 どこ*あなたの財産の名前です。

    パラメーターは、キャメル大文字小文字の属性名としてプレーヤーの URL に付加されて渡されます。キーと値は URL エンコードされます。例:

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

    外部リファラーのサポート

    Brightcove Player v6.25.0+ では、iframe での任意のリファラーの設定がサポートされています。AMP コンポーネントは、amp-brightcove referrer="EXTERNAL_REFERRER"埋め込み属性を追加することで、独自のリファラーをプレイヤーに渡すようになりました。

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

    AMPアナリティクス

    AMP ドキュメントで amp-analyticsコンポーネントを使用して、任意の分析にデータを追跡できます。パブリッシャーがビデオイベントを含める場合は、今すぐ追加できます。

    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 です。基本的なレベルでは、それはあなたが再生を制御するプレーヤーの外に何かを持つことができます。たとえば、次のコードはビデオを再生します。Amp-brightcove myPlayeridプレーヤーのはどこにあります。

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

    AMP はビデオイベントを信頼していないため、現在、ビデオエンドでの動作など、より便利な操作を行うことはできません。この例はここにあります: http://solutions.brightcove.com/bclifford/ampexamples/bind.html


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