Inserimento video: <video>

4.1 Basi del tag <video>

Inserire un video su una pagina web utilizzando l'elemento <video> ti permette di riprodurre contenuti video direttamente nel browser. Questo elemento offre ampie possibilità per configurare la riproduzione, inclusa la compatibilità con diversi formati, la gestione tramite attributi e metodi JavaScript. Vediamo questo elemento in dettaglio.

Esempio base

Il tag <video> viene usato con l'attributo src, che specifica il percorso al file video. Puoi anche aggiungere l'attributo controls per mostrare i controlli standard, come i pulsanti di riproduzione, pausa e regolazione del volume.

    
      <video src="videofile.mp4" controls></video>
    
  

Esempio con più sorgenti

Per garantire la compatibilità con diversi browser, puoi specificare più sorgenti video usando il tag <source>. Questo permette al browser di scegliere il formato video supportato.

    
      <video controls>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Il tuo browser non supporta l'elemento video.
      </video>
    
  

Attributi del tag <video>

• src: specifica il percorso al file video
• controls: mostra i controlli di riproduzione
• autoplay: avvia automaticamente la riproduzione del video al caricamento della pagina
• loop: riproduce il video in un ciclo infinito
• muted: disabilita l'audio al caricamento
• preload: indica come il browser dovrebbe caricare il video. Valori possibili: none, metadata, auto
• width e height: impostano la larghezza e l'altezza del videoplayer
• poster: specifica un'immagine segnaposto che viene mostrata prima dell'inizio della riproduzione del video

4.2 Principali attributi

1. Riproduzione automatica

L'attributo autoplay fa sì che il file video inizi automaticamente la riproduzione subito dopo il caricamento della pagina. Come nel caso dell'audio, usa questo attributo con cautela per non infastidire gli utenti.

    
      <video src="videofile.mp4" autoplay></video>
    
  

2. Ciclo video

L'attributo loop specifica che il file video deve essere riprodotto in un ciclo continuo. È utile per video di sfondo o animazioni.

    
      <video src="videofile.mp4" loop></video>
    
  

3. Disabilitare l'audio

L'attributo muted disabilita l'audio del file video al caricamento. Può essere utile se vuoi che il video si riproduca senza suono di default, lasciando all'utente la possibilità di attivare l'audio se necessario.

    
      <video src="videofile.mp4" muted></video>
    
  

4. Precaricamento

L'attributo preload indica al browser come deve caricare il file video al caricamento della pagina. Può assumere uno dei tre valori:

• none: il browser non dovrebbe pre-caricare il video
• metadata: il browser dovrebbe caricare solo i metadati (durata, dimensioni, ecc.)
• auto: il browser dovrebbe caricare completamente il video quando la pagina viene caricata

    
      <video src="videofile.mp4" preload="auto"></video>
    
  

5. Poster

L'attributo poster specifica un'immagine segnaposto che viene mostrata prima dell'inizio della riproduzione del video. Può essere utile per fornire all'utente informazioni visive sul contenuto del video.

    
      <video src="videofile.mp4" poster="posterimage.jpg"></video>
    
  

4.3 Formati video supportati

Per garantire compatibilità cross-browser, si consiglia di utilizzare diversi formati video. I formati più comuni includono MP4, WebM e OGG.

Formato MP4

MP4 (MPEG-4 Part 14) è uno dei formati video più popolari. È supportato dalla maggior parte dei browser e dispositivi. MP4 utilizza la compressione con perdita e offre una buona qualità video con una dimensione del file relativamente piccola.

Esempio:

    
      <video src="videofile.mp4" type="video/mp4"></video>
    
  

Formato WebM

WebM è un formato di compressione video aperto sviluppato per l'uso su internet. È supportato dalla maggior parte dei browser moderni e offre una buona qualità video.

Esempio:

    
      <video src="videofile.webm" type="video/webm"></video>
    
  

Formato OGG

OGG (Ogg Theora) è un formato video aperto che è supportato da molti browser. Questo formato offre una buona qualità video ed è spesso usato come alternativa a MP4 e WebM.

Esempio:

    
      <video src="videofile.ogv" type="video/ogg"></video>
    
  

Esempio di utilizzo di più formati per garantire la compatibilità

Per garantire compatibilità cross-browser, si consiglia di specificare più sorgenti video in formati diversi. Il browser sceglierà il primo formato supportato.

    
      <video width="600" controls autoplay muted>
        <source src="videofile.mp4" type="video/mp4">
        <source src="videofile.webm" type="video/webm">
        <source src="videofile.ogv" type="video/ogg">
        Il tuo browser non supporta l'elemento video.
      </video>