L'elemento video è una delle funzionalità più importanti di HTML5, poiché consente agli sviluppatori di incorporare video direttamente nelle pagine Web senza la necessità di plug-in esterni come Flash. Attraverso vari attributi, proprietà, metodi ed eventi , l'elemento video offre il pieno controllo sulla riproduzione dei contenuti multimediali. In questo articolo esploreremo ciascuna di queste funzionalità in dettaglio.
Attributi dell'elemento video
Attributi dell'elemento video Definiscono il loro comportamento e aspetto direttamente dall'HTML. Tutti gli attributi più rilevanti sono elencati di seguito:
- src: specifica l'URL del file video che deve essere riprodotto. Questo attributo è facoltativo se vengono utilizzati elementi 'source' all'interno del 'video' .
- controls: mostra i controlli del browser predefiniti per la riproduzione, come il pulsante di riproduzione, la barra di avanzamento, il controllo del volume, ecc.
- autoplay: Indica che video Dovrebbe iniziare a giocare automaticamente il prima possibile, non appena è stato sufficientemente carico.
- loop: Rende il video viene riprodotto in un ciclo continuo, ricominciando da capo quando finisce.
- muted: Rende il video viene riprodotto senza audio.
- poster : definisce un'immagine che viene visualizzata mentre il video o finché l'utente non avvia la riproduzione.
- preload: suggerisce al browser come gestire il caricamento del file video. Puoi assumere i valori:
auto (precarica tutti i file video), metadata (basta precaricare i metadati) onone(non precaricare nulla).
- width E height : Specifica le dimensioni dell'area di visualizzazione del video in pixel.
- playsinline: Indica che video dovrebbe essere giocato online anziché in modalità a schermo intero sui dispositivi mobili.
Proprietà dell'elemento video
Proprietà degli elementi video consentono di manipolare il comportamento di video tramite JavaScript. Le proprietà più importanti sono descritte di seguito:
- currentTime: ottiene o imposta la posizione di riproduzione corrente del video , in secondi. Utile per passare a un punto specifico del file video .
- duration: Restituisce la durata totale del video in pochi secondi. Se la durata non è disponibile, restituisce NaN .
- paused: Indica se il video è attualmente in pausa.
- ended: Indica se la riproduzione del video è finita.
- volume: Consente di ottenere o impostare il livello del volume di video. Il valore varia tra 0.0 (silenzio) e 1.0 (volume massimo).
- muted: Determina se il video è disattivato. Può essere impostato su vero o falso.
- playbackRate: Controlla la velocità di riproduzione di video. Un valore di 1.0 rappresenta la velocità normale, mentre valori più bassi la riducono e valori più alti la aumentano.
- readyState: Restituisce lo stato di carica del video. I valori possibili sono:
0 (HAVE_NOTHING), 1 (HAVE_METADATA), 2 (HAVE_CURRENT_DATA),
3 (HAVE_FUTURE_DATA)e 4 (HAVE_ENOUGH_DATA).
- seeking: Indica se il videoè in procinto di cercare una nuova posizione riproduttiva.
- buffered: Restituisce un oggetto TimeRanges che indica le parti del video che sono stati tamponati.
- videoWidth E videoHeight: Restituisce la larghezza e l'altezza del file video , rispettivamente, in pixel.
Metodi degli elementi video
Metodi degli elementi video consentire agli sviluppatori di controllare la riproduzione di video a livello di programmazione. I metodi più utilizzati sono descritti qui:
- play() : avvia la riproduzione del video. Se lui video è in pausa, questo metodo riprende la riproduzione.
- pause(): mette in pausa la riproduzione del video. Se lui videoÈ già in pausa, non ha alcun effetto.
- load(): Ricaricare il video sin dalla sua origine. Ciò è utile se è necessario ricaricare un file video per qualche motivo.
- canPlayType(type): restituisce un valore che indica se il browser può riprodurre un tipo specifico di file. video. I valori possibili sono:
"" (sconosciuto), "probably" (probabilmente riproducibile) e "maybe" (forse riproducibile).
- addTextTrack(kind, label, language): aggiunge una nuova traccia di testo (ad esempio, i sottotitoli) al file video. Il parametro kind potrebbe essere "subtitles", "captions", "descriptions", "chapters" O "metadata".
Eventi degli elementi video
Eventi degli elementi video Sono essenziali per rispondere alle interazioni dell'utente e ai cambiamenti di stato durante la riproduzione. Di seguito sono riportati gli eventi più comuni:
- play: si attiva quando video inizia a giocare, tramite un'azione dell'utente o tramite il metodo play() .
- pause: attivato durante la riproduzione di video si ferma. Ciò può verificarsi quando l'utente mette in pausa il file video o quando viene chiamato il metodo pause().
- ended: Si verifica quando il video raggiunge la fine della sua durata e interrompe la riproduzione.
- timeupdate: si attiva periodicamente durante la riproduzione del brano. video e la posizione di riproduzione corrente cambia.
- volumechange: Si verifica quando il volume del video oppure il mute è attivato/disattivato.
- loadeddata: si attiva quando è stata caricata una quantità sufficiente di batteria. video in modo che sia pronto per iniziare la riproduzione, ma prima che sia completamente carico.
- loadedmetadata: si verifica quando i metadati del file video (ad esempio durata, dimensioni e tracce di testo).
- canplay : Indica che video potrebbe iniziare la riproduzione, ma non è ancora abbastanza caricata per poterla riprodurre completamente senza pause.
- canplaythrough: attivato quando il browser stima che il video Può essere giocato nella sua interezza senza interruzioni.
- seeking: si verifica quando viene avviata un'operazione di ricerca, ovvero quando l'utente o lo script modifica la posizione di riproduzione.
- seeked: attivato quando un'operazione di ricerca è completata.
L'elemento video fornisce grande flessibilità e controllo per la riproduzione di video sul web. Comprendendo e utilizzando i suoi attributi, proprietà, metodi ed eventi, puoi creare ricche esperienze multimediali su misura per le esigenze dei tuoi utenti. Esplora tutte le possibilità che offre e ottieni il massimo da questo potente strumento!
Comentar: