<video>: l'elemento "video embed"

L' elemento HTML <video> incorpora un lettore multimediale che supporta la riproduzione di video nel documento. È possibile utilizzare anche <audio> per il contenuto audio, ma l' elemento <audio> potrebbe fornire un'esperienza utente più appropriata.

Attributi

autoplay

Un attributo booleano; se specificato, il video inizia automaticamente a essere riprodotto non appena può farlo senza interrompere il caricamento dei dati.

Per disabilitare la riproduzione automatica del video, autoplay="false"non funzionerà; il video verrà riprodotto automaticamente se l'attributo è presente nel tag <video>. Per rimuovere la riproduzione automatica, l'attributo deve essere rimosso del tutto.

In alcuni browser (es. Chrome 70.0) la riproduzione automatica non funziona se non è presente alcun attributo muted.

autopictureinpicture

Un attributo booleano che se su true indica che l'elemento deve attivare automaticamente la modalità picture-in-picture quando l'utente passa avanti e indietro tra questo documento e un altro documento o applicazione.

controls

Se questo attributo è presente, il browser offrirà i controlli per consentire all'utente di controllare la riproduzione del video, inclusi volume, ricerca e pausa/ripresa della riproduzione.

controlslist

L'attributo controlslist, quando specificato, aiuta il browser a selezionare quali controlli mostrare sull'elemento multimediale ogni volta che il browser mostra il proprio insieme di controlli (ad esempio quando l'attributo controls è specificato).

I valori consentiti sono nodownload, nofullscreen e noremoteplayback.

Utilizzare l'attributo disablepictureinpicture se si desidera disabilitare la modalità Picture-In-Picture (e il controllo).

crossorigin

Questo attributo enumerato indica se utilizzare CORS per recuperare il video correlato. Le risorse abilitate per CORS possono essere riutilizzate nell'elemento <canvas> senza essere contaminate. I valori ammessi sono:

anonymous

Invia una richiesta multiorigine senza credenziali. In altre parole, invia l'intestazione HTTP Origin senza cookie, certificato X.509 o eseguendo l'autenticazione HTTP di base. Se il server non fornisce le credenziali al sito di origine (non impostando l'intestazione HTTP Access-Control-Allow-Origin), l'immagine sarà contaminata e il suo utilizzo sarà limitato.

use-credentials

Invia una richiesta multiorigine con una credenziale. In altre parole, invia l'intestazione HTTP Origin con un cookie, un certificato o eseguendo l'autenticazione HTTP di base. Se il server non fornisce le credenziali al sito di origine (tramite intestazione HTTP Access-Control-Allow-Credentials), l'immagine verrà contaminata e il suo utilizzo sarà limitato.

Quando non è presente, la risorsa viene recuperata senza una richiesta CORS (cioè senza inviare l' Origin:intestazione HTTP), prevenendone l'uso non contaminato negli elementi <video>. Se non valido, viene gestito come se anonymous fosse stata utilizzata la parola chiave enumerata.

disablepictureinpicture

Impedisce al browser di suggerire un menu di scelta rapida Picture-in-Picture o di richiedere automaticamente Picture-in-Picture in alcuni casi.

disableremoteplayback

Un attributo booleano utilizzato per disabilitare la capacità di riproduzione remota nei dispositivi collegati tramite tecnologia cablata (HDMI, DVI e così via) e wireless (Miracast, Chromecast, DLNA, AirPlay e così via).

height

L'altezza dell'area di visualizzazione del video, in pixel CSS.

loop

Un attributo booleano; se specificato, il browser cercherà automaticamente di tornare all'inizio al raggiungimento della fine del video.

muted

Un attributo booleano che indica l'impostazione predefinita dell'audio contenuto nel video. Se impostato, l'audio verrà inizialmente silenziato. Il suo valore predefinito è false, il che significa che l'audio verrà riprodotto durante la riproduzione del video.

playsinline

Un attributo booleano che indica che il video deve essere riprodotto "inline", ovvero all'interno dell'area di riproduzione dell'elemento. Tieni presente che l'assenza di questo attributo non implica che il video verrà sempre riprodotto a schermo intero.

poster

Un URL per un'immagine da mostrare durante il download del video. Se questo attributo non è specificato, non viene visualizzato nulla finché non è disponibile il primo frame, quindi il primo frame viene visualizzato come frame poster.

preload

Questo attributo enumerato ha lo scopo di fornire un suggerimento al browser su ciò che secondo l'autore porterà alla migliore esperienza utente per quanto riguarda il contenuto caricato prima della riproduzione del video. Può avere uno dei seguenti valori:

• none: indica che il video non deve essere precaricato.
• metadata: indica che vengono recuperati solo i metadati video (ad es. lunghezza).
• auto: indica che è possibile scaricare l'intero file video, anche se non è previsto che l'utente lo utilizzi.
• striga vuota: sinonimo del autovalore.

Il valore predefinito è diverso per ciascun browser. Le specifiche consigliano di impostarlo su metadata.

src

L'URL del video da incorporare. Questo è facoltativo; puoi invece utilizzare l'elemento <source> all'interno del blocco video per specificare il video da incorporare.

width

La larghezza dell'area di visualizzazione del video, in pixel CSS.

Eventi

Note d'uso

I browser non supportano tutti gli stessi formati video; puoi fornire più fonti all'interno di elementi <source> nidificati e il browser utilizzerà quindi la prima che comprende.

<video controls>
  <source src="myVideo.webm" type="video/webm">
  <source src="myVideo.mp4" type="video/mp4">
  <p>Il tuo browser non supporta i video HTML5. Se vuoi
  qui c'è un <a href="myVideo.mp4">link al video</a></p>
</video>

Altre note di utilizzo:

• Se non specifichi l'attributo controls, il video non includerà i controlli predefiniti del browser; puoi creare i tuoi controlli personalizzati usando JavaScript e HTMLMediaElement API.
• Per consentire un controllo preciso sul contenuto video (e audio), HTMLMediaElement attiva molti eventi diversi. Oltre a fornire controllabilità, questi eventi consentono di monitorare l'avanzamento del download e della riproduzione dei media, nonché lo stato e la posizione della riproduzione.
• È possibile utilizzare la proprietà object-position per regolare il posizionamento del video all'interno della cornice dell'elemento e la proprietà object-fit per controllare il modo in cui le dimensioni del video vengono regolate per adattarsi alla cornice.
• Per mostrare sottotitoli/didascalie insieme al tuo video, puoi utilizzare alcuni JavaScript insieme all'elemento <track> e al formato WebVTT .
• Puoi riprodurre file audio usando un elemento <video>. Questo può essere utile se, ad esempio, è necessario eseguire l'audio con una trascrizione WebVTT, poiché l'elemento <audio> non consente didascalie utilizzando WebVTT.
• Per testare il contenuto di fallback sui browser che supportano l'elemento <video>, puoi sostituirlocon un elemento non esistente come <notavideo>.

Problemi di accessibilità

I video devono fornire sia didascalie che trascrizioni che ne descrivono accuratamente il contenuto. I sottotitoli consentono alle persone che soffrono di perdita dell'udito di comprendere il contenuto audio di un video mentre il video viene riprodotto, mentre le trascrizioni consentono alle persone che necessitano di più tempo per essere in grado di rivedere il contenuto audio a un ritmo e un formato a loro agio.

Vale la pena notare che, sebbene sia possibile aggiungere sottotitoli a contenuti multimediali solo audio, è possibile farlo solo durante la riproduzione dell'audio in un elemento <video>, poiché la regione video dell'elemento viene utilizzata per presentare le didascalie. Questo è uno degli scenari speciali in cui è utile riprodurre l'audio in un elemento video.

Se vengono utilizzati servizi di sottotitoli automatici, è importante rivedere il contenuto generato per assicurarsi che rappresenti accuratamente il video di origine.

Oltre al dialogo vocale, i sottotitoli e le trascrizioni dovrebbero anche identificare la musica e gli effetti sonori che comunicano informazioni importanti.