AMP à l'aide d'une vidéo externe

Dans cette rubrique, vous apprendrez comment les pages mobiles accélérées (AMP) peuvent être utilisées avec Brightcove Player et une vidéo externe non Video Cloud.

Aperçu

Accelerated Mobile Pages est un projet Google qui vise à permettre « la création de sites Web et d'annonces toujours rapides, beaux et performants sur tous les appareils et plateformes de distribution ». Vous pouvez utiliser Brightcove Player avec AMP car le projet comprend un amp-brightcove composant qui permet aux éditeurs d'intégrer Brightcove Players dans des documents HTML AMP. Cet exemple utilise un plugin personnalisé qui accepte une URL vers une vidéo externe (non-cloud vidéo) qui lui est transmise via le amp-brightcove composant utilisant la coutume data-param-video-url attribut.

échantillon

Voici un exemple de page HTML AMP qui inclut un lecteur Brightcove Player. Le lecteur fonctionne normalement, donc le code HTML est la partie intéressante de cet exemple. Le code HTML est examiné plus loin dans ce document.

Voir le stylo AMP-Brightcove Player-Vidéo externe par Brightcove Learning Services ( rcrooks1969 ) sur CodePen.

Ressources d'AMP

Le projet AMP a développé un amp-brightcove composant spécial qui affiche le lecteur Brightcove. Le composant est détaillé dans le document amp-brightcove.

AMP fournit un exemple d' amp-brightcove implémentation avec des détails dans les documents suivants :

  • amp-brightcove
  • amp-par exemple
  • <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">

    Configuration du lecteur

    Brightcove fournit un plugin pour améliorer l'utilisation d'AMP avec Brightcove Player. Le plugin ajoute la prise en charge de l'API d'interface vidéo d'AMP qui active certaines fonctionnalités avancées:

    • Intégration avec amp-analytics: Permet le suivi des vues vers des analyses tierces par rapport au domaine de la page AMP.
    • Intégration avec amp-bind: La lecture peut être contrôlée par d'autres éléments de la page AMP.

    Les joueurs sans plugin fonctionnent toujours dans AMP, mais sans cette fonctionnalité.

    Installation du plug-in

    Comme pour tous les plugins Brightcove Player, vous avez besoin du nom et de l'URL du plugin vers le JavaScript du plugin, qui sont fournis ici (aucun fichier CSS n'est nécessaire pour l'utilisation de ce plugin) :

    Nom du plugin

      ampSupport

    URL JavaScript

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

Examen du code de la page HTML

Le code de page HTML de l'exemple CodePen ci-dessus est indiqué ci-dessous (le code du plugin est détaillé dans la section suivante). Une explication complète du code est fournie par AMP dans les documents mentionnés ci-dessus. Dans la liste suivante, vous trouverez quelques astuces/pièges à prendre en compte :

  • Ligne 14 : Vous pouvez ajouter une seule style balise, mais elle doit inclure l' amp-custom attribut.
  • Ligne 26: NE PAS embellir le code. La plaque de cuisson CSS est nécessaire tel que fourni par AMP.
  • Ligne 42 : L'URL de la vidéo externe est transmise ici. N'oubliez pas que puisque le nom sera récupéré à partir d'une iframe src URL, le nom sera videoUrl.
  • Ligne 43 : le data-video-id doit être présent, mais aucune valeur ne lui est attribuée lors de l'utilisation d'une vidéo externe.
  • Ligne 44 : Les width et height les attributs déterminent le rapport hauteur/largeur du lecteur intégré dans les mises en page réactives.
  <!--
    ## 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 du code du plugin

Le fonctionnement de l'AMP est que le amp-brightcove crée une implémentation iframe du Brightcove Player. Dans l'URL de l'iframe sera l'attribut personnalisé, comme indiqué ici:

  <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 vous faites défiler le code iframe, vous verrez la chaîne de requête affichée ici:

Source iFrame AMP

Notez que le nom de la chaîne de requête est videoUrl. Notez également que l'URL a été encodée en URL. Ces deux problèmes seront reflétés dans le code du plugin, montré ici:

  • Lignes 21-38: Une fonction d'assistance qui trouve la valeur associée à une chaîne de requête, transmise à la fonction en tant que paramètre.
  • Ligne 7 : Récupérez la valeur du videoUrl chaîne de requête utilisant la fonction d'assistance.
  • Ligne 8 : Utilisez JavaScript decodeURIComponent() méthode pour obtenir une URL valide pour la vidéo.
  • Lignes 11-14: Utilisez l'URL décodée et placez la vidéo dans le lecteur. Si vous envisagez d'utiliser des formats de vidéo autres que MP4, vous devrez soit passer le bon type value, ou écrivez une logique pour lire l'extension de la vidéo et attribuer la valeur correcte.
  • Lignes 17 à 19 : Bien sûr, pas obligatoire, mais si vous voulez que la vidéo soit lue au démarrage, vous pouvez utiliser ce code.
  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];
      }
    }
  });

Vous attribueriez ce plugin à votre lecteur soit en utilisant Studio ou l'API de gestion des joueurs.

Caractéristiques

Bien que discutées dans la documentation sur les SAP, quelques caractéristiques sont soulignées ici qui revêtent une importance particulière :

Paramètres personnalisés

Vous voudrez peut-être transmettre des informations supplémentaires à votre lecteur pour que vos plugins puissent y accéder. Pour ce faire, ajoutez des attributs supplémentaires à l' amp-brightcove élément qui doit être nommé data-param-*, où * est le nom de votre propriété.

Les paramètres sont transmis sous forme de noms d'attributs camel ajoutés à l'URL du lecteur. Les clés et les valeurs sont encodées en URL. Par exemple :

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

Prise en charge des référents externes

Brightcove Player v6.25.0+ prend en charge la définition d'un référent arbitraire sur un iframe. Le composant AMP prend désormais en charge le passage de son propre référent au lecteur, en ajoutant un referrer="EXTERNAL_REFERRER" attribut à son intégration amp-brightcove.

EXTERNAL_REFERRER est la macro d'AMP. Voir https://github.com/ampproject/amphtml/blob/19135a3aac7813a9ff263a9f863fe35aeb316582/spec/amp-var-substitutions.md#external-referrer pour plus d'informations.

Analytique AMP

Un composant amp-analytics peut être utilisé dans un document AMP pour effectuer le suivi des données vers n'importe quelle analyse arbitraire. Si les éditeurs souhaitent inclure des événements vidéo, ils peuvent désormais le faire.

Le document d'AMP sur la syntaxe AMP Analytics (qui est encombrant) est ici : https://www.ampproject.org/docs/reference/components/amp-analytics. Et plus précisément l'analyse vidéo : https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-video-analytics.md.

Un exemple est disponible, suivi vers exemple.com afin que vous verrez les balises sous forme d'erreurs dans l'onglet réseau : http://solutions.brightcove.com/bclifford/ampexamples/analytics.html.

Liaison AMP

AMP Bind est l'API d'AMP pour interagir entre les composants. Au niveau de base, il vous permet d'avoir quelque chose d'extérieur au lecteur pour contrôler la lecture. Par exemple, le code suivant lirait une vidéo, où myPlayer se trouve le id lecteur amp-brightcove.

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

AMP ne fait pas confiance aux événements vidéo, donc vous ne pouvez pas faire quelque chose de plus utile, comme agir sur une extrémité vidéo. Un exemple de ceci est disponible ici : http://solutions.brightcove.com/bclifford/ampexamples/bind.html.