AMP

Ajouter des images et vidéos

tout comme sur une page HTML normale, AMP vous permet d'intégrer des contenus image, vidoé et audio. Découvrez la différence avec les équivalents AMP et apprenez comment les inclure dans vos pages.

Pourquoi pas <img>, <video> et <audio>?

AMP ne prend pas en charge les équivalents HTML par défaut pour l'affichage des médias, comme <img>. Nous fournissons des composants équivalents pour les raisons suivantes:

Attention: bien que pas pris en charge, ils seront lus, mais AMP ne validera pas vos pages et vous ne bénéficierez pas des avantages d'AMP.

Images

Ajoutez une image dans votre page en utilisant l'élément amp-img, comme suit:

<amp-img
  alt="A beautiful sunset"
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195"
>
</amp-img>
Ouvrir cet extrait dans le playground

Dans cet exemple très basique, l'image s'affichera avec la hauteur et la largeur fixes spécifiées. Au minimum, une largeur et une hauteur explicites doivent être définies.

Comment afficher des images lorsque JavaScript est désactivé

Étant donné que <amp-img> s'appuie sur JavaScript, si l'utilisateur choisit de désactiver les scripts, les images ne s'afficheront pas. Dans ce cas, vous devez fournir une image de secours en utilisant <img> et <noscript>, comme suit:

<amp-img
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195"
>
  <noscript>
    <img
      src="/static/inline-examples/images/sunset.jpg"
      width="264"
      height="195"
    />
  </noscript>
</amp-img>
Ouvrir cet extrait dans le playground

Mises en page avancées

AMP permet de créer des images entièrement réactives bien plus facilement qu'avec du CSS/HTML standard. Dans sa forme la plus simple, il vous suffit d'ajouter layout="responsive":

<amp-img
  alt="A view of the sea"
  src="/static/inline-examples/images/sea.jpg"
  width="900"
  height="675"
  layout="responsive"
>
</amp-img>
Ouvrir cet extrait dans le playground

LIRE – Plus de détails sur les techniques de mise en page avancées.

Comportement et caractères de remplacement

Le runtime HTML AMP peut gérer efficacement les ressources image, en choisissant de retarder ou de hiérarchiser le chargement des ressources en fonction de la position de la fenêtre, des ressources système, de la bande passante ou d'autres facteurs.

Images animées

L'élément amp-anim est très similaire à l'élément amp-img et offre des fonctionnalités supplémentaires pour gérer le chargement et la lecture d'images animées telles que les GIF.

<amp-anim
  width="400"
  height="300"
  src="/static/inline-examples/images/wavepool.gif"
>
  <amp-img
    placeholder
    width="400"
    height="300"
    src="/static/inline-examples/images/wavepool.png"
  >
  </amp-img>
</amp-anim>
Ouvrir cet extrait dans le playground

REMARQUE – Ajoutez <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> dans l'en-tête de votre document pour utiliser ce composant.

Vidéo

Incluez une vidéo dans votre page à l'aide de l'élément amp-video.

Utilisez cet élément uniquement pour l'intégration directe de fichiers vidéo HTML5. L'élément assure un chargement différé de la ressource vidéo spécifiée par l'attribut src, à un moment déterminé par AMP.

Incluez un caractère de remplacement avant le démarrage de la vidéo et une solution de secours si le navigateur ne prend pas en charge les vidéos HTML5, par exemple:

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  src="/static/inline-examples/videos/kitten-playing.mp4"
  poster="/static/inline-examples/images/kitten-playing.png">
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>
Ouvrir cet extrait dans le playground

Audio

Incluez une ressource audio dans votre page, en utilisant l'élément amp-audio.

Utilisez cet élément uniquement pour l'intégration directe de fichiers audio HTML5. Comme toutes les ressources externes intégrées dans une page AMP, l'élément assure le chargement différé de la ressource audio spécifiée par l'attribut src, à un moment déterminé par AMP.

Incluez une solution de secours, si le navigateur ne prend pas en charge l'audio HTML5, par exemple:

Your browser doesn’t support HTML5 audio.

<amp-audio width="400"
  height="200"
  src="/static/inline-examples/audio/cat-meow.mp3">
  <div fallback>
    <p>Your browser doesn’t support HTML5 audio.</p>
  </div>
  <source type="audio/mpeg"
    src="/static/inline-examples/audio/cat-meow.mp3">
  <source type="audio/ogg"
    src="/static/inline-examples/audio/cat-meow.ogg">
</amp-audio>
Ouvrir cet extrait dans le playground

REMARQUE – Ajoutez <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> dans l'en-tête de votre page pour utiliser ce composant.