외부 비디오를 사용하는 AMP

이 항목에서는 AMP (Accelerated Mobile Pages)를 Brightcove Player 및 외부 비 비디오 클라우드 비디오와 함께 사용하는 방법에 대해 알아 봅니다.

개요

가속 모바일 페이지는 “기기 및 배포 플랫폼 전반에서 일관되게 빠르고 아름답고 높은 성과를 보이는 웹사이트 및 광고를 제작하는 것을 목표로 하는 Google 프로젝트입니다. 이 프로젝트에는 게시자가 AMP HTML 문서에 브라이트코브 플레이어를 임베드할 수 있는amp-brightcove구성 요소가 포함되어 있기 때문에 AMP와 함께 브라이트코브 플레이어를 사용할 수 있습니다. 이 예제는 외부 (비 비디오 클라우드) 비디오에 대한 URL을 허용하는 사용자 지정 플러그인을 사용합니다. amp-brightcove사용자 정의를 사용하는 구성 요소data-param-video-url속성.

샘플

다음은 브라이트코브 플레이어가 포함된 샘플 AMP HTML 페이지입니다. 플레이어는 정상적으로 작동하므로 HTML은이 샘플의 흥미로운 부분입니다. HTML 코드는 이 문서의 뒷부분에서 살펴봅니다.

펜보기 AMP-Brightcove 플레이어-외부 비디오게시자 : Brightcove Learning Services ( 뿡 빵뀨 ) 의 위에 CodePen .

AMP의 리소스

AMP 프로젝트는 브라이트코브 플레이어를 표시하는 특수amp-brightcove구성 요소를 개발했습니다. 구성 요소는앰프-브라이트코브 문서에 자세히 설명되어 있습니다.

AMP는 다음 문서의 세부 사항과 예제amp-brightcove구현을 제공합니다:

  • amp-brightcove
  • 앰프별 예시
  • <a href="https://playground.amp.dev/?url=https://amp.dev/documentation/examples/components/amp-brightcove/> AMP 플레이그라운드< /ㅏ>< /리> < /ul> < /부분> < 섹션 클래스="bcl-섹션">

    플레이어 구성

    Brightcove는 Brightcove Player와 함께 AMP 사용을 향상시키는 플러그인을 제공합니다. 플러그인은 일부 고급 기능을 활성화하는 AMP의 비디오 인터페이스 API에 대한 지원을 추가합니다.

    • 앰프 분석과의 통합 : AMP 페이지 도메인에 대한 타사 분석에 대한 뷰를 추적할 수 있습니다.
    • 앰프-바인드와의 통합 : AMP 페이지의 다른 요소로 재생을 제어할 수 있습니다.

    플러그인이없는 플레이어는 여전히 AMP에서 작동하지만 해당 기능은 없습니다.

    플러그인 설치

    모든 브라이트코브 플레이어 플러그인과 마찬가지로 플러그인의 JavaScript에 대한 플러그인의 이름과 URL이 필요합니다. 이 플러그인은 여기에 제공됩니다 (이 플러그인을 사용하기 위해 CSS 파일이 필요하지 않습니다).

    플러그인 이름

      ampSupport

    자바 스크립트 URL

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

HTML 페이지 코드 검사

위 CodePen 샘플의 HTML 페이지 코드는 다음과 같습니다 (플러그인 코드는 다음 섹션에서 자세히 설명). 코드에 대한 완전한 설명은 위에 링크 된 문서에서 AMP에 의해 제공됩니다. 다음 목록에는 알아야 할 몇 가지 트릭/트랩이 있습니다.

  • 라인 14: 단일style태그를 추가할 수 있지만amp-custom속성을 포함해야 합니다.
  • 26 행 : 코드를 아름답게하지 마십시오. AMP에서 제공하는 상용구 CSS가 필요합니다.
  • 제42호선: 외부 비디오에 대한 URL이 여기에 전달됩니다. 이름은 iframe의src URL, 이름은videoUrl .
  • 43호선: 그만큼data-video-id존재해야하지만 외부 비디오를 사용할 때 값이 할당되지 않았습니다.
  • 라인 44: width및height속성은 반응형 레이아웃에 포함된 플레이어의 종횡비를 결정합니다.
  <!--
    ## 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 소스

쿼리 문자열 이름은videoUrl . 또한 URL은 URL로 인코딩되었습니다. 이 두 가지 문제는 다음과 같이 플러그인 코드에 반영됩니다.

  • 21-38 행 : 매개 변수로 함수에 전달 된 쿼리 문자열과 관련된 값을 찾는 도우미 함수입니다.
  • 라인 7: 값을 검색합니다. videoUrl도우미 함수를 사용하는 쿼리 문자열.
  • 8호선: 자바 스크립트 사용decodeURIComponent()동영상의 유효한 URL을 가져 오는 방법입니다.
  • 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];
      }
    }
  });

이 플러그인을 플레이어에 할당하려면사진관또는 플레이어 관리 API.

특징

AMP 설명서에 설명되어 있지만 여기에 특별히 중요한 몇 가지 기능이 강조되어 있습니다.

사용자 정의 매개 변수

플러그인이 액세스할 수 있도록 추가 정보를 플레이어에게 전달할 수 있습니다. 추가 속성을 추가하여이를 수행 할 수 있습니다. amp-brightcove이름을 지정해야하는 요소data-param-* , 어디*재산의 이름입니다.

파라미터는 플레이어 URL에 추가된 낙타 케이스 속성 이름으로 전달됩니다. 키와 값은 URL로 인코딩됩니다. 예:

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

외부 레퍼러 지원

브라이트코브 플레이어 v6.25.0 이상은 iframe에서 임의의 레퍼러 설정을 지원합니다. AMP 구성 요소는 이제 앰프 브라이트코브 임베드referrer="EXTERNAL_REFERRER"속성을 추가하여 자체 레퍼러를 통해 플레이어에 전달할 수 있습니다.

EXTERNAL_REFERRER는 AMP의 자체 매크로입니다. 자세한 내용은https://github.com/ampproject/amphtml/blob/19135a3aac7813a9ff263a9f863fe35aeb316582/spec/amp-var-substitutions.md#external-referrer을 참조하십시오

AMP 분석

AMP 문서에서앰프 분석구성 요소를 사용하여 임의의 분석에 대한 데이터를 추적할 수 있습니다. 게시자가 비디오 이벤트를 포함하려는 경우 이제 그렇게 할 수 있습니다.

AMP 분석 구문 (번거로운) 에 대한 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입니다. 기본 수준에서, 그것은 당신이 재생을 제어하기 위해 플레이어 외부의 무언가를 가질 수 있습니다. 예를 들어 다음 코드는 비디오를 재생합니다. 여기서myPlayer은id amp-Brightcove 플레이어의 입니다.

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

AMP는 비디오 이벤트를 신뢰하지 않으므로 현재 비디오 엔드에서 행동하는 것과 같이 더 유용한 작업을 수행 할 수 없습니다. 이에 대한 예는 다음과 같습니다. http://solutions.brightcove.com/bclifford/ampexamples/bind.html .