AMP

amp-video

Ce composant remplace la balise video HTML5 ; il ne doit être utilisé que pour les intégrations directes de fichiers vidéo HTML5.

Script requis <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Exemples AMP By Example :
Mises en page compatibles fill, fixed, fixed-height, flex-item, nodisplay, responsive

Comportement

Le composant amp-video charge de manière différée la ressource vidéo spécifiée par son attribut src, à une heure déterminée par l'environnement d'exécution. Vous pouvez contrôler un composant amp-video de la même manière qu'une balise <video> HTML5 standard.

Le composant amp-video accepte jusqu'à quatre types de nœuds HTML uniques en tant qu'éléments enfants :

  • Balises source : comme pour la balise <video> HTML, vous pouvez ajouter des balises <source> enfants pour spécifier différents fichiers multimédias sources à lire.
  • Balises track pour activer les sous-titres dans la vidéo. Si le titre est hébergé sur une origine différente de celle du document, vous devez ajouter l'attribut crossorigin à la balise <amp-video>.
  • Espace réservé avant le lancement de la lecture de la vidéo.
  • Création de remplacement si le navigateur n'accepte pas le contenu vidéo HTML5 : l'attribut fallback peut être affecté à un ou à aucun nœud enfant immédiat. Si cet attribut est utilisé, ce nœud et ses enfants constituent le contenu qui s'affiche si la vidéo HTML5 n'est pas acceptée par le navigateur de l'utilisateur.

Exemple

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm"
    type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>
Open this snippet in playground

Analyse

Le composant amp-video est directement compatible avec la technologie d'analyse. Pour en savoir plus, consultez la page consacrée à l'analyse vidéo.

Attributs

src Obligatoire si aucun élément enfant <source> n'est présent. Doit être au format HTTPS.
poster Image du cadre à afficher avant le début de la lecture de la vidéo. Par défaut, la première image est affichée.
Vous pouvez également présenter une superposition click-to-play. Pour en savoir plus, reportez-vous à la section Superposition click-to-play ci-dessous.
autoplay Si cet attribut est utilisé et que le navigateur est compatible avec la lecture automatique, la vidéo est lue automatiquement dès qu'elle est visible. Pour être lisible, le composant doit remplir certaines conditions, exposées dans la spécification relative à la vidéo dans AMP.
controls Cet attribut est semblable à l'attribut controls de la balise video HTML5. Si cet attribut est utilisé, le navigateur propose des commandes permettant à l'utilisateur de contrôler la lecture de la vidéo.
controlsList Identique à l'attribut controlsList de l'élément vidéo HTML5. Cet attribut est accepté uniquement par certains navigateurs. Pour plus d'informations à ce sujet, consultez la page https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList.
dock Nécessite l'extension amp-video-docking. Si cet attribut est utilisé et que la vidéo est lue manuellement, cette dernière est" "réduite" et ancrée à un coin ou à un élément de la page lorsque l'utilisateur fait défiler la page au-delà la zone visuelle du composant vidéo. Pour en savoir plus, consultez la documentation relative à l'extension d'ancrage.
loop Si cet attribut est utilisé, la vidéo revient automatiquement au début lorsque la lecture est terminée.
crossorigin Obligatoire si une ressource track est hébergée sur une origine différente de celle du document.
disableremoteplayback Détermine si l'élément multimédia peut être associé à une interface de lecture à distance telle que Chromecast ou AirPlay.
muted (obsolète) L'attribut muted est obsolète et n'a plus aucun effet. L'attribut autoplay contrôle automatiquement la coupure du son.
noaudio Ajoute une annotation pour indiquer que la vidéo est dépourvue de contenu audio. Cet attribut masque l'icône d'égaliseur qui est affichée lorsque la vidéo peut être lue automatiquement.
rotate-to-fullscreen Si la vidéo est visible, elle s'affiche en mode plein écran après que l'utilisateur a fait pivoter son appareil en mode paysage. Pour plus d'informations, consultez la spécification relative à la vidéo dans AMP.
common attributes Cet élément inclut des attributs communs étendus aux composants AMP.

Attributs de l'API Media Session

Le composant amp-video met en œuvre l'API Media Session qui permet aux développeurs de spécifier davantage d'informations sur le fichier vidéo. Ces informations supplémentaires sur la vidéo s'affichent dans le centre de notifications de l'appareil de l'utilisateur (avec les commandes de lecture et de mise en pause de la vidéo).

artwork Indique l'URL d'une image PNG/JPG/ICO utilisée comme illustration de la vidéo. Si l'attribut "artwork" n'est pas utilisé, l'outil d'aide de l'API Media Session utilise le champ "image" de la définition "schema.org", la balise "og: image" ou la "favicon" du site Web.
artist Indique le nom de l'auteur du fichier vidéo, spécifié sous la forme d'une chaîne.
album Indique l'album ou la collection dont est extraite la vidéo, spécifié sous la forme d'une chaîne.
title Indique le nom ou le titre de la vidéo, spécifié sous la forme d'une chaîne. Si cet attribut n'est pas indiqué, l'outil d'aide de l'API Media Session utilise l'attribut "aria-label" "ou revient au titre de la page.

Exemple :

Cet exemple contient à la fois les attributs poster et artwork. L'attribut poster sert d'image d'espace réservé avant la lecture de la vidéo, tandis que l'attribut artwork est l'image qui s'affiche dans la notification via l'API Media Session.

<amp-video width="720" height="305" layout="responsive"
    src="https://yourhost.com/videos/myvideo.mp4"
    poster="https://yourhost.com/posters/poster.png"
    artwork="https://yourhost.com/artworks/artwork.png"
    title="Awesome video" artist="Awesome artist"
    album="Amazing album">
</amp-video>

Superposition click-to-play

La superposition click-to-play est une fonctionnalité d'utilisation courante pour les lecteurs vidéo sur le Web. Vous pouvez, par exemple, afficher une icône de lecture personnalisée sur laquelle l'utilisateur peut cliquer, ou encore inclure le titre de la vidéo, des images poster de différentes tailles, etc. Étant donné que le composant amp-video est compatible avec l'action AMP play standard, vous pouvez facilement mettre en œuvre la technologie click-to-play.

Pour obtenir un exemple détaillé, consultez la page Superposition click-to-play pour amp-video sur AMP by Example.

Validation

Consultez les règles relatives à amp-video dans les spécifications du validateur AMP.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub