<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

Gli attributi di questo elemento includono gli attributi globali.

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

Nome dell'evento Attivato quando
audioprocess Il buffer di input di un ScriptProcessorNode è pronto per essere elaborato.
canplay Il browser può riprodurre il supporto, ma stima che non siano stati caricati dati sufficienti per riprodurre il supporto fino alla fine senza doversi fermare per un ulteriore buffering del contenuto.
canplaythrough Il browser stima di poter riprodurre i file multimediali fino alla fine senza fermarsi per il buffering dei contenuti.
complete Il rendering di un OfflineAudioContext è terminato.
durationchange L'attributo duration è stato aggiornato.
emptied I media sono diventati vuoti; ad esempio, questo evento viene inviato se il supporto è già stato caricato (o parzialmente caricato) e (load) viene chiamato il metodo per ricaricarlo.
ended La riproduzione si è interrotta perché è stata raggiunta la fine del supporto.
loadeddata Il primo fotogramma del supporto ha terminato il caricamento.
loadedmetadata I metadati sono stati caricati.
pause La riproduzione è stata messa in pausa.
play La riproduzione è iniziata.
playing La riproduzione è pronta per iniziare dopo essere stata messa in pausa o ritardata per mancanza di dati.
progress Attivato periodicamente quando il browser carica una risorsa.
ratechange La velocità di riproduzione è cambiata.
seeked Un'operazione di ricerca completata.
seeking È iniziata un'operazione di ricerca.
stalled L'interprete sta tentando di recuperare i dati multimediali, ma inaspettatamente i dati non sono disponibili.
suspend Il caricamento dei dati multimediali è stato sospeso.
timeupdate L'ora indicata dall'attributo currentTime è stata aggiornata.
volumechange Il volume è cambiato.
waiting La riproduzione si è interrotta a causa di una temporanea mancanza di dati.

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:

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.

Liste utili