Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Inclusione di immagini e video

Come in una normale pagina HTML, AMP ti consente di incorporare immagini, video e contenuti audio. Scopri le differenze negli equivalenti elementi AMP e scopri come includerli nelle tue pagine.

Perché non usare ,

AMP non supporta i componenti HTML predefiniti per la visualizzazione di contenuti multimediali, come <img>. Forniamo componenti equivalenti per i seguenti motivi:

Attenzione: finché non saranno supportati, essi saranno visualizzati, ma AMP non convaliderà le pagine e non si potranno sfruttare i vantaggi offerti da AMP.

Immagini

Includere un'immagine nella pagina utilizzando l'elemento amp-img, in questo modo:

A beautiful sunset
<amp-img alt="A beautiful sunset"
  src="/static/inline-examples/images/sunset.jpg"
  width="264"
  height="195">
</amp-img>
Apri questo frammento in playground

In questo esempio molto semplice, l'immagine verrà visualizzata con l'altezza e la larghezza fisse indicate. Occorre almeno impostare esplicitamente una larghezza e un'altezza.

Visualizzazione di immagini quando JavaScript è disabilitato

Poiché <amp-img> si basa su JavaScript, se l'utente sceglie di disabilitare gli script, le immagini non verranno visualizzate. In questo caso, occorre fornire un fallback all'immagine usando i componenti <img> e <noscript> in questo modo:

<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>
Apri questo frammento in playground

Layout avanzati

Con AMP è molto più semplice creare immagini completamente reattive rispetto all'uso di CSS/HTML standard. Nella sua forma più semplice, basta aggiungere l'attributo 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>
Apri questo frammento in playground

CONTINUA A LEGGERE: Ulteriori informazioni sulle tecniche di layout avanzato.

Comportamento e segnaposti

Il sistema di runtime AMP HTML può gestire efficacemente le risorse di immagini, scegliendo di ritardare o dare la priorità al caricamento delle risorse in base alla posizione della finestra di visualizzazione, alle risorse di sistema, alla larghezza di banda della connessione o ad altri fattori.

CONTINUA A LEGGERE: Qui sono disponibili ulteriori informazioni sull'utilizzo di fallback e segnaposti con le immagini.

Immagini animate

L'elemento amp-anim è molto simile all'elemento amp-img e fornisce funzionalità aggiuntive per gestire il caricamento e la riproduzione di immagini animate come quelle di tipo 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>
Apri questo frammento in playground

NOTA: Includere l'elemento <script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script> nell'intestazione della pagina per utilizzare questo componente.

Video

Includere un video nella pagina utilizzando l'elemento amp-video.

Utilizzare questo elemento solo per l'integrazione diretta di file video HTML5. L'elemento carica in modalità lazy la risorsa video specificata dall'attributo src, in un momento stabilito da AMP.

Includere un segnaposto prima dell'inizio del video e un fallback, se il browser non supporta il video HTML5, ad esempio:

Questo browser non supporta l'elemento video.

<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>Questo browser non supporta l'elemento video.</p>
  </div>
</amp-video>
Apri questo frammento in playground

Audio

Includere una risorsa audio nella pagina, utilizzando l'elemento amp-audio.

Utilizzare questo elemento solo per l'integrazione diretta di file audio HTML5. Come per tutte le risorse esterne incorporate in una pagina AMP, l'elemento carica in modalità lazy la risorsa audio specificata dall'attributo src, in un momento stabilito da AMP.

Includere un segnaposto prima dell'inizio dell'audio e un fallback, se il browser non supporta l'audio HTML5, ad esempio:

Il tuo browser non supporta audio HTML5.

<amp-audio width="400"
  height="200"
  src="/static/inline-examples/audio/cat-meow.mp3">
  <div fallback>
    <p>Il tuo browser non supporta audio HTML5.</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>
Apri questo frammento in playground

NOTA: Includere l'elemento <script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script> nell'intestazione della pagina per utilizzare questo componente.