AMP

amp-video

Sostituisce il tag video HTML5. Deve essere utilizzato esclusivamente per gli incorporamenti di file video HTML5 diretti.

Script obbligatorio <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Esempi AMP By Example:
Layout supportati fill, fixed, fixed-height, flex-item, nodisplay, responsive

Comportamento

Il componente amp-video carica in un momento determinato dal tempo di esecuzione la risorsa video specificata dall'attributo src. Puoi controllare un componente amp-video in modo molto simile a un tag <video> HTML5 standard.

Il componente amp-video accetta fino a quattro tipi unici di nodi HTML come secondari:

  • Tag source: come per il tag <video> HTML, puoi aggiungere dei tag <source> secondari in modo da specificare diversi file multimediali sorgente da riprodurre.
  • Tag track per attivare i sottotitoli nel video. Se la traccia è ospitata su un'origine diversa dal documento, devi aggiungere l'attributo crossorigin al tag <amp-video>.
  • Un segnaposto che verrà visualizzato prima che inizi la riproduzione del video.
  • Un fallback nel caso in cui il browser non supporti video HTML5: uno o zero nodi secondari immediati possono avere l'attributo fallback. Se presente, questo nodo e i suoi nodi secondari formano il contenuto visualizzato nel caso in cui il video HTML5 non sia supportato dal browser dell'utente.

Esempio

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

Analisi dei dati

amp-video supporta l'analisi dei dati per impostazione predefinita. Per ulteriori informazioni, consulta la sezione Analisi dei dati video.

Attributi

src Obbligatorio se non sono presenti <source> secondari. Deve essere HTTPS.
poster L'immagine del frame da visualizzare prima che la riproduzione del video abbia inizio. Per impostazione predefinita, viene mostrato il primo frame.
In alternativa, puoi mostrare un overlay click-to-play. Per ulteriori informazioni, consulta la sezione Overlay click-to-play di seguito.
autoplay Se questo attributo è presente e il browser supporta la riproduzione automatica, il video verrà riprodotto automaticamente non appena sarà visibile. Le condizioni che il componente deve soddisfare per essere visualizzato sono elencate nella specifica dei video in AMP.
controls Questo attributo è simile all'attributo controls nel video HTML5. Se questo attributo è presente, il browser offre all'utente dei controlli per gestire la riproduzione del video.
controlsList Identico all'attributo controlsList dell'elemento video HTML5 e supportato solo da determinati browser. Per i dettagli, vai alla pagina https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList.
dock Richiede l'estensione amp-video-docking. Se questo attributo è presente e il video viene riprodotto manualmente, il video è "ridotto a icona" e fissato a un angolo o a un elemento quando l'utente scorre all'esterno dell'area di visualizzazione del componente video. Per ulteriori informazioni, consulta la documentazione sull'estensione amp-video-docking.
loop Se presente, il video tornerà automaticamente all'inizio una volta raggiunta la fine.
crossorigin Obbligatorio se una risorsa track è ospitata su un'origine diversa dal documento.
disableremoteplayback Determina se l'elemento multimediale può avere un'interfaccia utente per la riproduzione remota come Chromecast o AirPlay.
muted (obsoleto) L'attributo muted è obsoleto e non ha più alcun effetto. L'attributo autoplay controlla automaticamente il comportamento di disattivazione dell'audio.
noaudio Annota il video come privo di audio. Nasconde l'icona dell'equalizzatore normalmente visualizzata quando il video dispone della riproduzione automatica.
rotate-to-fullscreen Se il video è visibile, viene visualizzato a schermo intero dopo che l'utente ha ruotato il dispositivo in modalità orizzontale. Per ulteriori informazioni, consulta la specifica dei video in AMP.
common attributes Questo elemento include attributi comuni estesi ai componenti AMP.

Attributi dell'API Media Session

Il componente amp-video implementa l'API Media Session, che permette agli sviluppatori di specificare più informazioni sul file video. Queste informazioni aggiuntive vengono visualizzate nel centro notifiche del dispositivo dell'utente insieme ai controlli di riproduzione/pausa.

artwork Specifica un URL per un'immagine PNG/JPG/ICO utilizzata come artwork del video. Se artwork non è presente, l'assistente di API Media Session utilizza il campo image nella definizione schema.org, l'og:image o il favicon del sito web.
artist Indica l'autore del file video, specificato come stringa.
album Indica l'album/raccolta a cui appartiene il video, specificato come stringa.
title Indica il nome/titolo del video, specificato come stringa. Se non viene fornito, l'assistente dell'API Media Session utilizza l'attributo aria-label o il titolo della pagina.

Esempio:

Questo esempio contiene gli attributi poster e artwork. L'attributo poster funge da immagine segnaposto prima della riproduzione del video, mentre artwork è l'immagine visualizzata nella notifica tramite 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>

Overlay click-to-play

La presenza di un overlay click-to-play è una funzione comune di UX per i lettori video disponibili sul Web. Ad esempio, potresti mostrare un'icona di riproduzione personalizzata sulla quale l'utente può fare clic, includere il titolo del video, immagini di poster di varie dimensioni e così via. Poiché il componente amp-video supporta l'azione AMP play standard, implementare il click-to-play è facile.

Per un esempio dettagliato, visita la sezione Overlay click-to-play per amp-video del sito AMP By Example.

Convalida

Consulta le regole amp-video nella specifica dello strumento di convalida AMP.

Serve ancora aiuto?

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