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-video-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-video-iframe" src="https://cdn.ampproject.org/v0/amp-video-iframe-0.1.js"></script>Puis, le tag <amp-video-iframe> peut être ajouté dans le corps ou en bas d’un article, comme n'importe quel player.
<amp-video-iframe
width="640" height="500"
layout="responsive"
allowfullscreen
frameborder="0"
class="-amp-element -amp-layout-responsive -amp-layout-size-defined -amp-layout"
src="https://www.ultimedia.com/deliver/generic/iframe/mdtk/01357940/src/q0lq5mp/zone/1/showtitle/1/">
</amp-video-iframe>Ce tag a plusieurs attributs qui assurent le fonctionnement et le bon affichage de nos vidéos :
| Attributs | 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. |
| src |
Il s’agit de l’url du tag <amp-video-iframe>. Cette url fourni les vidéos en fonction des paramètres qu’y sont ajoutés. Note : L’url du tag <amp-video-iframe> doit obligatoirement être sécurisée (HTTPS).
|
Pour plus de détails: https://amp.dev/documentation/components/amp-video-iframe/
L’attribut “src” correspond à l’url du tag <amp-video-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.
| Attributs | 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 |
Le tag <amp-video-iframe> n’acceptera que des urls sécurisées (HTTPS).
Il s'agit du même principe que pour les intégrations Smart Players, le seul changement concerne la source (attribut src) qui doit correspondre à l'URL d'intégration d'un Simple Player tel que récupérée depuis notre plateforme :
https://www.ultimedia.com/deliver/generic/iframe/mdtk/02251419/zone/1/showtitle/1/src/mqmv3s
<amp-video-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
Les intégrations du type <amp-video-iframe> peuvent bénéficier de la fonctionnalité de Visible Player de façon native.
Attention !
Les intégrations du Visible Player avec la méthode “dock” ne permettent pas, à l'heure actuelle, de diffuser le premier preroll publicitaire au déclenchement du Player.
Le premier preroll sera diffusé dans l'emplacement vidéo principal et le Visible Player ne s'affichera qu'à partir du moment où la vidéo de contenu commence à jouer.
Les prerolls suivants pour un Player en mode playlist ne sont cependant pas affectés.
Une alternative existe pour diffuser le premier preroll en mode Visible Player, il s'agit du chapitre suivant concernant la méthode “sticky”.
Pour pouvoir afficher le Visible Player sur une intégration AMP, vous devez ajouter le script suivant au header de votre site:
<script async custom-element="amp-video-docking" src="https://cdn.ampproject.org/v0/amp-video-docking-0.1.js"></script>Afin d'activer le Visible Player sur vos intégrations AMP, il faudra rajouter le paramètre “dock” dans votre balise <amp-video-iframe> :
<amp-video-iframe
width="16"
height="9"
layout="responsive"
dock
src="https://www.ultimedia.com/deliver/widget/getwidget?&widget=smart&mdtk=02251419&zone=1&search=Emmanuel%20Macron"
>
</amp-video-iframe>Par défaut, le Visible Player se positionnera dans le coin supérieur droit de l'écran.
Si vous souhaitez modifier cet emplacement, vous devrez mettre en place les éléments suivants :
dock="#my-slot"amp-layout" portant la référence "my-slot"my-slot". Sans cela, la page ne saura pas comment afficher le slot.
CSS de "my-slot" :
#dock-slot{
position: fixed; /* conformément à la documentation AMP, la position doit être "fixed". */
bottom: 5px; /* J'ai décidé que le player devait s'afficher en bas. */
left:5px; /* J'ai décidé que le player devait s'afficher à gauche. */
width: calc(70vw - 20px); /* Je dimensionne le player - sans ça, le slot ne s'affiche pas. */
}
Composant <amp-layout> :
<amp-layout
layout="responsive"
width="16"
height="9"
id="dock-slot">
</amp-layout>width et height en association avec l’attribut layout="responsive". De cette manière, l’aspect-ratio de la vidéo est respecté et elle est responsive.id correspondant à la valeur de dock, spécifié sur le composant <amp-video-iframe>
Composant <amp-video-iframe> :
<amp-video-iframe
src="https://www.ultimedia.com/deliver/widget/getwidget?&widget=smart&mdtk=02251419&zone=1&search=Emmanuel%20Macron"
width="16"
height="9"
layout="responsive"
dock="#dock-slot">
</amp-video-iframe>
Comme décrit au chapitre précédent, la méthode “dock” ne permet pas au Visible Player de diffuser le premier preroll publicitaire.
Nous vous proposons donc une méthode alternative qui fait appel à la propriété CSS “sticky”.
Cette méthode permet au Visible Player de fonctionner dès le premier preroll publicitaire mais il comporte d'autres contraintes :
Afin d'activer le Visible Player sur vos intégrations AMP avec cette méthode “sticky”, il faudra ajouter un ID de votre choix à votre balise <amp-video-iframe> :
<amp-video-iframe
src="https://www.ultimedia.com/deliver/widget/getwidget?&widget=smart&mdtk=02251419&zone=1&search=Emmanuel%20Macron"
width="16"
height="9"
layout="responsive"
id="sticky-player"
>
</amp-video-iframe>Le reste des modifications est à mettre en place côté CSS à l'aide des propriétés suivantes :
#sticky-player{
position: sticky;
top: 5px;
}La propriété top: 5px peut être modifiée en bottom: 5px dans le cas d'une intégration du player en bas de page.
Voici une démo de l'intégration en mode “sticky” :
https://mockup.digiteka.com/AMP_sticky_with_advertising.html