AMP mit einem externen Video

In diesem Thema erfahren Sie, wie AMP (Accelerated Mobile Pages) mit Brightcove Player und einem externen Video ohne Video Cloud verwendet werden kann.

Überblick

Accelerated Mobile Pages ist ein Google-Projekt, das darauf abzielt, „die Erstellung von Websites und Anzeigen zu ermöglichen, die auf Geräten und Vertriebsplattformen durchweg schnell, schön und leistungsstark sind. „ Sie können Brightcove Player mit AMP verwenden, da das Projekt eine amp-brightcove Komponente enthält, die es Publishern ermöglicht, Brightcove Player in AMP HTML-Dokumente einzubetten. In diesem Beispiel wird ein benutzerdefiniertes Plugin verwendet, das eine URL zu einem externen (Nicht-Video-Cloud-Video) -Video akzeptiert, das über die amp-brightcove Komponente mithilfe des benutzerdefinierten Videos an es übergeben wird data-param-video-url Attribut.

Probe

Im Folgenden finden Sie eine Beispiel-AMP-HTML-Seite, die einen Brightcove Player enthält. Der Player funktioniert normal, daher ist der HTML-Code der interessante Teil dieses Beispiels. Der HTML-Code wird später in diesem Dokument untersucht.

Sehen Sie sich das Pen Amp-BrightCove Player-Externes Video von Brightcove Learning Services (@rcrooks1969) auf CodePen an.

Ressourcen von AMP

Das AMP-Projekt entwickelte eine spezielle amp-brightcove Komponente, die den Brightcove Player anzeigt. Die Komponente ist im amp-brightcove-Dokument detailliert beschrieben.

AMP bietet eine amp-brightcove Beispielimplementierung mit Details in den folgenden Dokumenten:

  • amp-Brightcove
  • Amp-für-Beispiel
  • <a href=“ https://playground.amp.dev/?url=https://amp.dev/documentation/examples/components/amp-brightcove/>AMP Playground</a ></li > </ul > </section > <section class="bcls-section">

    Player-Konfiguration

    Brightcove liefert ein Plugin, um die Verwendung von AMP mit Brightcove Player zu verbessern. Das Plugin fügt Unterstützung für die Video-Interface-API von AMP hinzu, die einige erweiterte Funktionen ermöglicht:

    • Integration mit Amp-Analytics: Ermöglicht die Verfolgung von Ansichten auf Analysen von Drittanbietern gegenüber der AMP-Seitendomäne
    • Integration mit amp-Bind: Die Wiedergabe kann durch andere Elemente auf der AMP-Seite gesteuert werden.

    Spieler ohne das Plugin arbeiten immer noch in AMP, aber ohne diese Funktionalität.

    Plugin-Installation

    Wie bei allen Brightcove Player-Plugins benötigen Sie den Namen und die URL des Plugins zum JavaScript des Plugins, die hier zur Verfügung gestellt werden (für die Verwendung dieses Plugins ist keine CSS-Datei erforderlich):

    Name des Plugins

      ampSupport

    JavaScript-URL

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

Prüfung des HTML-Seiten

Der HTML-Seitencode aus dem obigen CodePen-Beispiel ist unten dargestellt (der Plugin-Code wird im nächsten Abschnitt beschrieben). Eine vollständige Erklärung des Codes wird von AMP in den oben verlinkten Dokumenten bereitgestellt. In der folgenden Liste sind ein paar Tricks/Fallen zu beachten:

  • Zeile 14: Sie können ein einzelnes style Tag hinzufügen, es muss jedoch das amp-custom Attribut enthalten.
  • Zeile 26: Verschönern Sie den Code NICHT. Das Boilerplate CSS wird wie von AMP geliefert benötigt.
  • Zeile 42: Die URL zum externen Video wird hier weitergegeben. Denken Sie daran, dass der Name lautet, da der Name von der src URL eines Iframes abgerufen wird videoUrl.
  • Zeile 43: Der data-video-id muss vorhanden sein, wird aber bei Verwendung eines externen Videos kein Wert zugewiesen.
  • Zeile 44: Die width und height Attribute bestimmen das Seitenverhältnis des Players, der in responsive Layouts eingebettet ist.
  <!--
    ## 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>

Plugin-Code-Untersuchung

Die Funktionsweise von AMP besteht darin, dass die amp-brightcove Komponente eine Iframe-Implementierung des Brightcove Players erstellt. In der URL für den Iframe wird das benutzerdefinierte Attribut angezeigt, wie hier gezeigt:

  <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>

Wenn Sie im Iframe-Code scrollen, sehen Sie die hier gezeigte Abfragezeichenfolge:

AMP-Iframe-Quelle

Beachten Sie, dass der Name der Abfragezeichenfolge lautet videoUrl Beachten Sie auch, dass die URL URL-codiert wurde. Beide Probleme werden sich im hier gezeigten Plugin-Code widerspiegeln:

  • Zeilen 21-38: Eine Hilfsfunktion, die den mit einer Abfragezeichenfolge verknüpften Wert findet, der als Parameter an die Funktion übergeben wird.
  • Zeile 7: Rufen Sie den Wert der videoUrl Abfragezeichenfolge mit der Hilfsfunktion ab.
  • Zeile 8: Verwenden Sie die decodeURIComponent() Methode von JavaScript, um eine gültige URL für das Video zu erhalten.
  • Zeilen 11-14: Verwenden Sie die dekodierte URL und platzieren Sie das Video im Player. Wenn Sie andere Videoformate als MP4 verwenden, müssen Sie entweder den richtigen type Wert übergeben oder Logik schreiben, um die Erweiterung des Videos zu lesen und den richtigen Wert zuzuweisen.
  • Zeilen 17-19: Natürlich nicht erforderlich, aber wenn Sie möchten, dass das Video beim Start abgespielt wird, können Sie diesen Code verwenden.
  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];
      }
    }
  });

Sie würden dieses Plugin Ihrem Player entweder mit Studio oder der Player-Management-API zuweisen.

Merkmale

Obwohl in der AMP-Dokumentation diskutiert, werden hier einige Funktionen hervorgehoben, die von besonderer Bedeutung sind:

Benutzerdefinierte Parameter

Möglicherweise möchten Sie zusätzliche Informationen an Ihren Player weitergeben, damit Ihre Plugins zugreifen können. Sie können dies tun, indem Sie zusätzliche Attribute für das amp-brightcove Element hinzufügen, das benannt werden muss data-param-*, wo * ist der Name Ihrer Immobilie.

Die Parameter werden als Attributnamen mit Kamelhüllen übergeben, die an die Spieler-URL angehängt sind. Schlüssel und Werte sind URL-codiert. Zum Beispiel:

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

Unterstützung für externe Referrer

Brightcove Player v6.25.0+ unterstützt das Festlegen eines beliebigen Referrers für einen Iframe. Die AMP-Komponente unterstützt jetzt das Durchlaufen eines eigenen Referrers an den Player, indem sie ein referrer="EXTERNAL_REFERRER" Attribut hinzufügt, das ihr amp-brightcove einbettet.

EXTERNAL_REFERRER ist AMPs eigenes Makro - siehe https://github.com/ampproject/amphtml/blob/19135a3aac7813a9ff263a9f863fe35aeb316582/spec/amp-var-substitutions.md#external-referrer Für weitere Informationen.

AMP-Analytik

Eine Amp-Analytics-Komponente kann in einem AMP-Dokument verwendet werden, um Daten zu beliebigen Analysen zu verfolgen. Wenn Publisher Videoereignisse einbeziehen möchten, können sie dies jetzt tun.

Das Dokument von AMP zur AMP Analytics-Syntax (was umständlich ist) ist hier: https://www.ampproject.org/docs/reference/components/amp-analytics. Und insbesondere Videoanalysen: https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-video-analytics.md.

Ein Beispiel ist verfügbar, das auf example.com verfolgt wird, sodass Sie die Beacons als Fehler auf der Registerkarte „Netzwerk“ sehen: http://solutions.brightcove.com/bclifford/ampexamples/analytics.html.

AMP Binden

AMP Bind ist die API von AMP für die Interaktion zwischen Komponenten. Auf einer grundlegenden Ebene können Sie etwas außerhalb des Players haben, um die Wiedergabe zu steuern. Zum Beispiel würde der folgende Code ein Video abspielen, wo myPlayer sich id der Amp-Brightcove Player befindet.

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

AMP vertraut Videoereignissen nicht, sodass Sie derzeit nichts Nützlicheres tun können, wie zum Beispiel auf einem Videoende zu handeln. Ein Beispiel dafür ist hier verfügbar: http://solutions.brightcove.com/bclifford/ampexamples/bind.html.