Le projet AMP (Accelerated Mobile Pages) est une technologie open source proposée et prise en charge par Google. L’initiative du projet découle de la volonté d’utiliser une méthode de création de pages Web attrayantes grâce à un chargement fluide et presque instantané pour les utilisateurs mobile.
Pour respecter cette méthode, Digiteka a développé un produit adapté au besoin, AMP valide et spécifique mobile.
Pour plus d’informations: https://www.ampproject.org/docs/
Le player affichera un iframe contenant nos vidéos sur la page du client, en respectant les spécifications techniques de l’AMP.
Pour afficher nos vidéos, le client doit implémenter un tag amp-iframe sur sa page. Mais avant de pouvoir l'utiliser, il doit ajouter le script suivant au header de son site:
<script async custom-element="amp-iframe"
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>Puis, le tag amp-iframe peut être ajouté dans le corps ou en bas d’un article, comme un smart player habituel :
<amp-iframe
width="640" height="500"
layout="responsive"
resizable
allowfullscreen
scrolling="no"
sandbox="allow-scripts allow-same-origin allow-popups"
frameborder="0"
class="-amp-element -amp-layout-responsive -amp-layout-size-defined -amp-layout"
src="https://www.ultimedia.com/deliver/widget/getwidget?widget=smart&mdtk=02251419&zone=1&search=Emmanuel%20Macron">
<div overflow></div>
</amp-iframe>Ce tag a plusieurs attributs qui assurent le fonctionnement et le bon affichage de nos vidéos :
| Attribut | Description |
|---|---|
| width, height | Corresponds aux dimensions de la vidéos (taille de zone). Note : ces attributs sont obligatoire lorsque la valeur de l’attribut “layout” est “responsive”. |
| layout |
Permet de contrôler facilement le rendu de l’iframe à l'écran. https://www.ampproject.org/docs/design/responsive/control_layout#the-layout-attribute Valeur “responsive”: La largeur de l’iframe va correspondre à la largeur de son élément conteneur, et sa hauteur va correspondre automatiquement au ratios donné par les attributs width et height. L'espace disponible dépend de l'élément parent et peut également être personnalisé à l'aide de la propriété CSS “max-width”. Note: les éléments AMP ayant comme attribut "layout=responsive" n’ont pas de taille intrinsèque. La taille de l’élément AMP est déterminée à partir de son élément conteneur. Pour être sûr qu’il s’affiche, une largeur et une hauteur doivent être spécifiées pour l’élément conteneur. N’utilisez pas de propriété "display:table" sur ce dernier, cela aura pour conséquence de ne pas afficher les éléments AMP contenus. |
| resizable |
Permet au tag <amp-iframe> d’être redimensionnable au moment de l’exécution (côté client). https://www.ampproject.org/docs/reference/components/amp-iframe#iframe-resizing |
| <div overflow> |
Élément enfant du tag <amp-iframe> qui permet d’envoyer une requête de redimensionnement. Cliquer sur l’élément <div overflow> redimensionnera l’élément <amp-iframe>. https://www.ampproject.org/docs/reference/components/amp-iframe#iframe-resizing |
| allowfullscreen, frameborder |
Autorise le plein écran et défini la bordure de l’iframe à 0. |
| sandbox |
Donne des autorisations au contenu du tag <amp-iframe> pour exécuter du Javascript. https://www.ampproject.org/docs/reference/components/amp-iframe#sandbox “allow-scripts allow-same-origin”: permet à l’iframe d’exécuter du Javascript, de créer des requêtes XHR non-CROS et d’écrire/lire cookies. “allow-popups”: permet la création et l’ouverture d’une popup à partir d’une iframe sanboxed. |
| src |
Il s’agit de l’url du tag <amp-iframe>. Cette url fourni les vidéos en fonction des paramètres qu’y sont ajoutés. (See 2. or 4. ) Note : L’url du tag <amp-iframe> doit obligatoirement être sécurisée (HTTPS). https://www.ampproject.org/docs/reference/components/amp-iframe#behavior |
Pour plus de détails: https://www.ampproject.org/docs/reference/components/amp-iframe
L’attribut “src” correspond à l’url du tag <amp-iframe>. Cette url appellera les vidéos en fonction de paramètres.
https://www.ultimedia.com/deliver/widget/getwidget?
&widget=smart&mdtk=02251419&zone=1&search=Emmanuel%20MacronLes paramètres expliqués ici sont nécessaires pour garantir un résultat de recherche.
| Paramètre | Description |
|---|---|
| widget | Corresponds au mode de recherche |
| mdtk | ID du site ( ex : 02251419 ) |
| zone | ID de la zone |
| search |
Chaîne de caractères fournie par le client. Note : Le client doit encoder cette chaîne en caractères en ASCII avant de la passer en paramètre de l’url de l’iframe. Exemple d’encodade en ASCII : https://www.w3schools.com/tags/ref_urlencode.asp |
Comme pour le Smart Player, il s'agit du même type d'intégration, seul la source du player (l'attribut src) change et correspond à l'url d'une vidéo:
https://www.ultimedia.com/deliver/generic/iframe/mdtk/02251419/zone/1/showtitle/1/src/mqmv3s
<amp-iframe> est différentes des iframes vanilla. Cette balise est conçus pour être plus sécurisé et ne fonctionne que si l’on respecte certaines règles:
Pour plus de détails : https://www.ampproject.org/docs/reference/components/amp-iframe#behavior
Pour vérifier si votre page est valide avec l'intégration du player AMP, il existe une interface de validation où vous pouvez soumettre l'url de la page: https://validator.ampproject.org/
Cela retournera si elle est valide ou s'il y a des erreurs, avec les messages d'erreur.
Pour plus de détails: https://www.ampproject.org/docs/fundamentals/validate#web-interface
<amp-iframe> doit avoir une largeur et une hauteur spécifiées pour définir un ratios qui permettra à la vidéo de se redimensionner en fonction de l'espace disponible sur la page.
Pour plus de détails: https://www.ampproject.org/docs/design/responsive/control_layout#supported-values-for-the-layout-attribute