AMP à l'aide d'une vidéo 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.

é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 Exemple AMP par Brightcove Learning Services ( rcrooks1969 ) sur CodePen.

Notez qu'en raison du fonctionnement de l'AMP, vous devez examiner attentivement ses limites avant utilisation. Par exemple :

AMP a des règles très strictes sur ce que HTML peut et ne peut pas être utilisé sur une page. Les détails à ce sujet peuvent être consultés dans la spécification AMP HTML.
Brightcove Analytics ne signalera pas correctement la page de référence pour les pages AMP - à la place le referrer_domain sera vide, et source_type sera enregistré comme direct.
Peu d'attributs utilisés avec l'implémentation avancée de Brightcove Player (sur la page) sont valides avec <amp-brightcove ..>. Vérifier la Spécification AMP HTML pour ceux qui peuvent être utilisés.
AMP ne fonctionnera pas avec les joueurs restreints de domaine.

Configuration du lecteur

Brightcove fournit un plugin que vous voudrez charger 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 dont AMP a besoin pour contrôler le lecteur dans le document AMP. Il permet également à certains 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 peuvent ne pas se comporter comme prévu dans un document AMP.

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

Pour implémenter le plugin AMP, vous allez ajouter le nom de fonction du plugin et l'URL au JavaScript du plugin:

Dans Studio, ouvrez le JOUEURS module et créez un nouveau lecteur ou localisez le lecteur auquel vous souhaitez ajouter le plugin.
Cliquez sur le lien correspondant au lecteur pour ouvrir ses propriétés.
Cliquez sur Plugins dans le menu de navigation de gauche.
Cliquez ensuite sur Plugins dans les trois options.
Dans le menu Ajouter un plugin , sélectionnez Plugin personnalisé.
Pour le nom du plugin, entrez ampSupport.

Pour le JavaScript URL, saisissez :

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

Vous n'avez pas besoin de saisir de CSS ou d'options pour ce plugin.
Cliquez sur Save.
Pour publier le lecteur, cliquez sur Publier et intégrer > Publier les modifications.
Pour fermer la boîte de dialogue ouverte, cliquez sur Fermer.

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

Examen du code

Le code de l'exemple CodePen ci-dessus est illustré ci-dessous. 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 20 : NE PAS embellir le code. La plaque de cuisson CSS est nécessaire tel que fourni par AMP.
Ligne 35 : 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>
    <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`.
    -->
    <amp-brightcove
      data-account="1752604059001"
      data-video-id="5715315990001"
      data-player-id="H1xW7NWcz"
      layout="responsive"
      width="16" height="9">
    </amp-brightcove>

  </body>
  </html>

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

station d'accueil (image dans l'image)

le dock L'attribut "ancrera" le joueur lorsqu'il défilerait hors de vue. Le lecteur est réduit et déplacé vers le coin supérieur droit de la page Web. Notez que les normes HTML désignent cette fonctionnalité comme image dans l'image. Une capture d'écran d'un lecteur ancré suit:

Pour implémenter cette fonctionnalité, vous devez procéder comme suit:

Incluez un script qui contient le code de la fonction d'ancrage, comme indiqué dans l'extrait de code suivant à la ligne 2.
Ajouter le dock attribut au <amp-brightcove> tag, comme indiqué à la ligne 13.

  ...
      <script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>
  </head>
  <body>

  ...
      <amp-brightcove
      data-account="1752604059001"
      data-video-id="5715315990001"
      data-player-id="H1xW7NWcz"
      layout="responsive"
      width="16" height="9"
      dock>
    </amp-brightcove>
    ...

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.

Coiffer le joueur

Si vous souhaitez styliser le lecteur, vous devez utiliser une syntaxe spéciale pour le faire. Par exemple, si vous souhaitez définir la taille du lecteur, vous créez un style bloquer comme illustré et entourer le lecteur d'un div , comme indiqué ici:

  <style amp-custom>
    .player-container {
      width: 640px;
      height: 360px;
    }
  </style></code></pre>

  ...

  <div class="player-container">
    <amp-brightcove
      data-account="1752604059001"
      data-video-id="5715315990001"
      data-player-id="H1xW7NWcz"
      layout="responsive"
      width="16" height="9">
    </amp-brightcove>
  </div>

Vous pouvez ajouter une seule style balise, mais elle doit inclure l' amp-custom attribut.

Suppression des erreurs pour les bots

Lorsqu'un bot qui ne prend pas en charge AMP parcourt une page contenant le lecteur vidéo AMP, une erreur vidéo défaillante est générée. Cela peut nuire au classement SEO. Vous pouvez utiliser le suppressNotSupportedError option dans la configuration JSON du Brightcove Player pour empêcher cela de se produire. Ajoutez ce qui suit pour supprimer ces fausses erreurs:

"suppress_not_supported_error": true