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>
EsempiAMP By Example:
Layout supportatifill, 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

Mostra il codice completo

Analisi dei dati

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

Attributi

srcObbligatorio se non sono presenti <source> secondari. Deve essere HTTPS.
posterL'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.
autoplaySe 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.
controlsQuesto 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.
controlsListIdentico 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.
dockRichiede 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.
loopSe presente, il video tornerà automaticamente all'inizio una volta raggiunta la fine.
crossoriginObbligatorio se una risorsa track è ospitata su un'origine diversa dal documento.
disableremoteplaybackDetermina 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.
noaudioAnnota il video come privo di audio. Nasconde l'icona dell'equalizzatore normalmente visualizzata quando il video dispone della riproduzione automatica.
rotate-to-fullscreenSe 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 attributesQuesto 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.

artworkSpecifica 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.
artistIndica l'autore del file video, specificato come stringa.
albumIndica l'album/raccolta a cui appartiene il video, specificato come stringa.
titleIndica 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