amp-video
Description
Sostituisce il tag video HTML5.
Required Scripts
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Supported Layouts
Esempi
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
trackper attivare i sottotitoli nel video. Se la traccia è ospitata su un'origine diversa dal documento, devi aggiungere l'attributocrossoriginal 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>
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.
Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.
Vai a Stack Overflow Hai trovato un bug o una funzione mancante?Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.
Vai a GitHub