HTML video: controlli, riproduzione automatica, dimensioni e problemi

L'HTML video incorpora un lettore video in una pagina web. Imposta l'URL del file con src o elementi figli source, e aggiungi controls così gli utenti possono riprodurlo e metterlo in pausa. Le politiche del browser possono bloccare la riproduzione automatica anche quando l'autoplay è presente.

Scegli gli attributi per l'esperienza di riproduzione

controls, muted, autoplay e loop sono attributi booleani. La loro presenza li abilita, quindi autoplay="false" non disabilita l'autoplay. Rimuovi l'attributo per disattivarlo. Una richiesta di autoplay richiede il caricamento dei media, quindi preload="none" da solo non può impedire il download.

Esegui un esempio video completo

Salva questo codice come video.html e aprilo in un browser. Carica il campione pubblico di fiori usato nella documentazione MDN e richiede una connessione internet. Per il tuo servizio, ospita un video che hai il diritto di usare e sostituisci gli URL.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Riproduzione video HTML</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    video { display: block; width: 640px; max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <h1>Video di fiori</h1>
  <video id="flower" controls playsinline preload="metadata" aria-label="Fiori mossi dal vento">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4">
    Questo browser non supporta l’elemento video.
  </video>
  <p>Descrizione: i fiori e l’erba vicina si muovono al vento.</p>
  <p><a href="https://developer.mozilla.org/shared-assets/videos/flower.mp4"
    target="_blank" rel="noopener noreferrer">Apri il file video MP4</a></p>
</body>
</html>

1. Controlla la presenza di un lettore con un pulsante di riproduzione e avvialo. I fiori dovrebbero muoversi e la posizione di riproduzione dovrebbe avanzare. L'esempio predefinito non ha attributi autoplay o loop.
2. Metti in pausa la riproduzione per fermare il movimento. Con una finestra stretta il lettore dovrebbe ridursi alla larghezza del contenuto.
3. Per confrontare la ripetizione, aggiungi solo loop al tag video di apertura e riapri il file. Controlla che la riproduzione torni all'inizio dopo aver raggiunto la fine, quindi rimuovi l'attributo per ripristinare il comportamento originale.

source offre formati di file così che il browser possa scegliere un candidato supportato. Prepara veri file WebM e MP4 dello stesso video; cambiare l'estensione di un file non converte i formati. La riproduzione dipende anche dai codec utilizzati per video e audio all'interno di un contenitore come MP4.

Riproduzione automatica e dimensionamento su dispositivi mobili

Se hai bisogno della riproduzione automatica, confronta aggiungendo autoplay muted al tag video di apertura. Mantieni playsinline e i controlli. Le preferenze dell'utente, le politiche di risparmio energetico, la cronologia di interazione con il sito o altre regole del browser possono negare l'autoplay, quindi conserva un pulsante di riproduzione.

Il CSS width: 640px è la larghezza di visualizzazione desiderata, mentre max-width: 100% limita l'overflow in un contenitore stretto. height: auto preserva il rapporto di aspetto del video. Se definisci un frame a rapporto fisso, object-fit: contain preserva l'intera scena, mentre cover riempie il frame ritagliando alcuni bordi; controlla che il contenuto importante rimanga visibile.

Risolvi i problemi di riproduzione e verifica l'accessibilità

• URL del file: Apri direttamente il link del video e conferma che il file esiste ed è disponibile senza login. Verifica che un percorso locale non sia stato scambiato per un percorso del server e che la capitalizzazione del nome del file corrisponda.
• Formato e risposta: Controlla che il server invii il tipo MIME corretto video/mp4 o video/webm e utilizzi codec supportati. Il pannello Rete negli strumenti per sviluppatori aiuta a ispezionare le richieste fallite e le intestazioni di risposta.
• Riproduzione automatica: Se premendo Play funziona, distingue una restrizione di riproduzione automatica da un file danneggiato.
• Indicazioni alternative: Il testo all'interno del video è destinato ai browser che non supportano l'elemento. Nei browser moderni, un errore di caricamento non lo mostra automaticamente come messaggio di errore. L'esempio, quindi, include anche un link al file e una descrizione della scena al di fuori del lettore.
• Sottotitoli e descrizioni: Fornire sottotitoli accurati e una trascrizione dove necessario per i discorsi. Collegare i sottotitoli con un track e un file WebVTT. Considerare una descrizione testuale o una descrizione audio per le informazioni essenziali comunicate solo visivamente.

Vedere il riferimento video MDN per gli attributi e la guida MDN ai sottotitoli video per i file dei sottotitoli.