AMP usando un video externo

En este tema, aprenderá cómo se pueden usar Accelerated Mobile Pages (AMP) con Brightcove Player y un video externo que no sea de Video Cloud.

Resumen

Accelerated Mobile Pages es un proyecto de Google que tiene como objetivo permitir "la creación de sitios web y anuncios que sean constantemente rápidos, hermosos y de alto rendimiento en todos los dispositivos y plataformas de distribución. " Puede utilizar Brightcove Player con AMP porque el proyecto incluye un amp-brightcove componente que permite a los editores incrustar reproductores de Brightcove en documentos HTML de AMP. Este ejemplo utiliza un complemento personalizado que acepta una URL a un video externo (que no es una nube de video) que se le pasa a través del amp-brightcove componente usando la costumbre data-param-video-url atributo.

Muestra

A continuación se muestra una página HTML de AMP de ejemplo que incluye un reproductor de Brightcove. El reproductor funciona normalmente, por lo que el HTML es la parte interesante de este ejemplo. El código HTML se examina más adelante en este documento.

Ver la pluma AMP-Brightcove Player-Video externo por Brightcove Learning Services ( rcrooks1969 ) en CodePen.

Recursos de AMP

El proyecto AMP desarrolló un amp-brightcove componente especial que muestra Brightcove Player. El componente se detalla en el documento amp-brightcove.

AMP proporciona un ejemplo de amp-brightcove implementación con detalles en los siguientes documentos:

  • amp-brightcove
  • amp por ejemplo
  • <a href=&quot;https://playground.amp.dev/?url=https://amp.dev/documentation/examples/components/amp-brightcove/> Zona de juegos AMP< /a>< /li> < /ul> < /sección> < sección clase=&quot;bcls-sección&quot;>

    Configuración del reproductor

    Brightcove proporciona un complemento para mejorar el uso de AMP con Brightcove Player. El complemento agrega soporte para la API de interfaz de video de AMP que habilita algunas características avanzadas:

    • Integración con amp-analytics: Permite el seguimiento de las vistas de análisis de terceros en relación con el dominio de páginas AMP.
    • Integración con amp-bind: La reproducción se puede controlar mediante otros elementos de la página AMP.

    Los reproductores sin el complemento siguen funcionando en AMP, pero sin esa funcionalidad.

    Instalación de plugins

    Al igual que con todos los complementos de Brightcove Player, necesitas el nombre y la URL del plugin para el JavaScript del plugin, que se proporcionan aquí (no es necesario ningún archivo CSS para usarlo):

    Nombre del plugin

      ampSupport

    URL JavaScript

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

Examen de código de página HTML

El código de la página HTML del ejemplo de CodePen anterior se muestra a continuación (el código del complemento se detalla en la siguiente sección). AMP proporciona una explicación completa del código en los documentos vinculados anteriormente. En la siguiente lista hay algunos trucos/trampas que debe tener en cuenta:

  • Línea 14: Puede añadir una sola style etiqueta, pero debe incluir el amp-custom atributo.
  • Línea 26: NO embellezca el código. El CSS de la caldera es necesario según lo suministrado por AMP.
  • Línea 42: Aquí se pasa la URL del video externo. Recuerde que dado que el nombre se recuperará de un iframe src URL, el nombre será videoUrl.
  • Línea 43: La data-video-id debe estar presente, pero no se le asigna un valor cuando se usa un video externo.
  • Línea 44: los width y height Los atributos determinan la relación de aspecto del reproductor incrustado en diseños receptivos.
  <!--
    ## 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>

Examen del código del complemento

La forma en que funciona AMP es que amp-brightcove El componente crea una implementación de iframe del Brightcove Player. En la URL del iframe estará el atributo personalizado, como se muestra aquí:

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

Si se desplaza en el código del iframe, verá la cadena de consulta que se muestra aquí:

Fuente de iframe de AMP

Observe que el nombre de la cadena de consulta es videoUrl. También tenga en cuenta que la URL ha sido codificada como URL. Ambos problemas se reflejarán en el código del complemento, que se muestra aquí:

  • Líneas 21-38: Una función auxiliar que encuentra el valor asociado con una cadena de consulta, pasado a la función como un parámetro.
  • Línea 7: Recuperar el valor del videoUrl cadena de consulta utilizando la función auxiliar.
  • Línea 8: Utilice JavaScript decodeURIComponent() método para obtener una URL válida para el video.
  • Líneas 11-14: Utilice la URL decodificada y coloque el video en el reproductor. Si va a utilizar formatos de video que no sean MP4, deberá pasar la type valor, o escribir lógica para leer la extensión del video y asignar el valor correcto.
  • Líneas 17-19: Por supuesto que no es obligatorio, pero si desea que el video se reproduzca al inicio, puede usar este código.
  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];
      }
    }
  });

Asignarías este complemento a tu reproductor usando Estudio o la API de administración de jugadores.

Características

Aunque se discute en la documentación de AMP, aquí se destacan algunas características que son de especial importancia:

Parámetros personalizados

Es posible que quieras pasar información adicional a tu reproductor para que tus complementos puedan acceder. Puede hacerlo añadiendo atributos adicionales en el amp-brightcove elemento al que se debe nombrar data-param-*, donde * es el nombre de su propiedad.

Los parámetros se pasan como nombres de atributos con carcasa de camello anexados a la URL del reproductor. Las claves y los valores están codificados por URL. Por ejemplo:

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

Soporte para referentes externos

Brightcove Player v6.25.0+ admite la configuración de un referente arbitrario en un iframe. El componente AMP ahora admite pasar por su propio referente al reproductor, añadiendo un referrer="EXTERNAL_REFERRER" atributo su amp-brightcove embed.

EXTERNAL_REFERRER es la macro propia de AMP; consulte https://github.com/ampproject/amphtml/blob/19135a3aac7813a9ff263a9f863fe35aeb316582/spec/amp-var-substitutions.md#external-referrer para obtener más información.

Análisis AMP

Un amp-analytics El componente se puede utilizar en un documento AMP para realizar un seguimiento de los datos en cualquier análisis arbitrario. Si los editores desean incluir eventos de vídeo, ahora pueden hacerlo.

El documento de AMP sobre la sintaxis de AMP Analytics (que es engorroso) está aquí: https://www.ampproject.org/docs/reference/components/amp-analytics. Y, en concreto, análisis de vídeo: https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-video-analytics.md.

Hay un ejemplo disponible, rastreando a example.com para que veas las balizas como errores en la pestaña de red: http://solutions.brightcove.com/bclifford/ampexamples/analytics.html.

Enlazar AMP

AMP Bind es la API de AMP para interactuar entre componentes. A nivel básico, te permite tener algo externo al reproductor para controlar la reproducción. Por ejemplo, el siguiente código reproduciría un vídeo, donde myPlayer es el id del reproductor amp-brightcove.

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

AMP no confía en los eventos de vídeo, por lo que actualmente no puedes hacer algo más útil, como actuar en un extremo de vídeo. Un ejemplo de esto está disponible aquí: http://solutions.brightcove.com/bclifford/ampexamples/bind.html.