Multimedia HTML
Scopri i tag multimedia HTML, i formati audio e video supportati dai browser, come usare più sorgenti, aggiungere sottotitoli e gestire l'autoplay.
Il multimedia comprende praticamente tutto ciò che si può sentire o vedere (ad es. suoni, musica, immagini, registrazioni, video, film, animazioni, ecc.). Esiste in formati diversi. Le pagine web possono contenere elementi multimediali di vari formati e tipi.
Questo capitolo offre una panoramica dei tag HTML che incorporano contenuti multimediali, dei formati audio e video effettivamente supportati dai browser e dei pattern pratici necessari: come offrire più formati con <source>, aggiungere didascalie per l'accessibilità e gestire correttamente l'autoplay.
Tag Multimedia
HTML consente di aggiungere diversi file multimediali al tuo sito web tramite appositi tag. Questi tag includono:
<audio>per riprodurre un file audio nella pagina web,<video>per riprodurre un file video nella pagina web,<source>per offrire più file multimediali in modo che il browser possa scegliere quello supportato,<track>per aggiungere didascalie o sottotitoli a un elemento<video>o<audio>,<embed>per incorporare contenuti esterni (più comunemente PDF) nella pagina web,<object>per incorporare risorse esterne — un tag oggi considerato in gran parte obsoleto,<iframe>per incorporare altre pagine web.
Ecco un esempio base con l'attributo controls e i tag <source>:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>Il testo tra i tag di apertura e chiusura ("Your browser does not support…") è il contenuto di fallback. Viene mostrato solo se il browser non riesce a riprodurre l'elemento.
Perché Usare Più Elementi <source>
Nessun formato audio o video è supportato da tutti i browser. Per coprirli tutti, si elencano più elementi <source> all'interno di un elemento <audio> o <video>. Il browser scorre l'elenco dall'alto verso il basso e utilizza la prima sorgente nel formato che riesce a riprodurre, ignorando le restanti. Quindi inserisci prima il formato preferito.
Un video che funziona su tutti i browser solitamente offre sia MP4 (supporto più ampio, incluso Safari) che WebM (libero, aperto, ben supportato in Chrome e Firefox):
<video width="640" height="360" controls poster="preview.jpg" preload="metadata">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video element.
</video>L'attributo type consente al browser di scartare un formato non supportato senza scaricare prima il file, quindi includilo sempre.
Un elemento audio segue lo stesso schema. L'MP3 funziona ovunque; Ogg è un'alternativa libera supportata da Chrome e Firefox:
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>Didascalie e Accessibilità
Usa l'elemento <track> per aggiungere didascalie o sottotitoli a un video. Le didascalie rendono il contenuto accessibile agli spettatori sordi o con difficoltà uditive, e sono utili per chiunque guardi senza audio. La traccia kind="captions" punta a un file WebVTT (.vtt):
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<track src="captions-en.vtt" kind="captions" srclang="en" label="English" default>
Your browser does not support the video element.
</video>Autoplay, Poster e Preload
Alcuni attributi di <video> vale la pena conoscere:
autoplay— avvia la riproduzione automaticamente. I browser moderni bloccano l'autoplay con l'audio, quindi un clip verrà riprodotto automaticamente solo se è anchemuted:<video autoplay muted>.poster— un'immagine mostrata prima della riproduzione del video (un fotogramma segnaposto).preload— suggerisce quanto contenuto bufferizzare in anticipo:none,metadata(solo durata e dimensioni) oauto(il browser può caricare l'intero file).
Incorporare Altri Contenuti: <object> e <embed>
Due tag più datati consentono di incorporare risorse esterne. Oggi il loro ruolo è limitato:
<object>era un contenitore generico per plugin e file esterni. È ormai in gran parte obsoleto — per audio e video normali è preferibile usare<video>e<audio>.<embed>incorpora anch'esso contenuti esterni, ma nelle pagine moderne viene utilizzato principalmente per visualizzare PDF.
<embed src="document.pdf" type="application/pdf" width="600" height="400">Formati Multimediali
Gli elementi multimediali come audio e video sono memorizzati in file multimediali. È possibile individuare il tipo di file osservando l'estensione del file.
Le estensioni multimediali più comuni includono .mp3, .mp4, .webm, .ogg, .wav, .mpg, .wmv e .avi. (Potresti ancora incontrare file Flash .swf, ma Flash è obsoleto — è stato rimosso da tutti i browser nel 2020.)
Formati Audio
Il formato più recente per la musica registrata compressa è l'MP3. Questo termine è sinonimo di musica digitale.
L'MP3 è una buona scelta se il tuo sito web riguarda la musica registrata.
| Formato | File | Descrizione |
|---|---|---|
| MIDI (Musical Instrument Digital Interface) | .mid .midi | È il formato principale per tutti i dispositivi musicali elettronici (ad es. sintetizzatori e schede audio per PC). I file MIDI contengono note digitali riproducibili da dispositivi elettronici, ma non includono suoni veri e propri. Funziona bene su hardware musicale e computer, ma non nativamente nei browser web. I browser moderni possono gestire il MIDI tramite la Web Audio API. |
| RealAudio | .rm .ram | Consente lo streaming audio con basse larghezze di banda. Non è riproducibile nei browser web. |
| WMA | .wma | Questo formato è stato sviluppato da Microsoft ed è solitamente usato nei lettori musicali. Funziona bene sui computer Windows, ma non nei browser web. |
| AAC | .aac | Questo formato è stato sviluppato da Apple come formato predefinito per iTunes. I file .aac grezzi hanno un supporto browser limitato, ma l'audio AAC è ampiamente supportato quando è incluso in contenitori .mp4. |
| WAV | .wav | Questo formato è stato sviluppato da IBM e Microsoft. Funziona bene sui sistemi operativi Windows, Linux e Macintosh. Supportato da HTML5. |
| Ogg | .ogg | Questo formato è stato sviluppato dalla Xiph.Org Foundation. Supportato da HTML5. |
| MP3 | .mp3 | È il formato più diffuso per i lettori musicali. Il formato offre una buona compressione (file di piccole dimensioni) e un'alta qualità. Supportato da tutti i browser. |
| MP4 | .mp4 | È un formato video ma può essere usato anche per l'audio. Il video MP4 è il futuro formato video su internet, il che comporta il supporto automatico dell'audio MP4 da parte di tutti i browser. |
Un contenitore (come .mp4 o .ogg) è il wrapper del file; il codec (come AAC, MP3 o Vorbis) è il modo in cui l'audio al suo interno è codificato. I browser tengono conto di entrambi. In pratica, per il web puoi fare affidamento su MP3 (tutti i browser) e Ogg (Chrome e Firefox). L'audio AAC è ampiamente supportato quando viene fornito all'interno di un contenitore .mp4.
Formati Video
| Formato | File | Descrizione |
|---|---|---|
| MPEG | .mpg .mpeg | Creato dal Moving Pictures Expert Group. È il primo formato video popolare sul web. Non supportato in HTML5. |
| AVI (Audio Video Interleave) | .avi | Creato da Microsoft. Viene normalmente usato in hardware TV e videocamere. Funziona bene sui computer Windows, ma non nei browser web. |
| WMV (Windows Media Video) | .wmv | Creato da Microsoft. Viene normalmente usato in hardware TV e videocamere. Funziona bene sui computer Windows, ma non nei browser web. |
| QuickTime | .mov | Creato da Apple. Viene normalmente usato in hardware TV e videocamere. Funziona bene sui computer Apple, ma non nei browser web. |
| RealVideo | .rm .ram | Creato da Real Media e consente lo streaming video con basse larghezze di banda. È ancora usato per la TV Internet e i video online, ma non è riproducibile nei browser web. |
| Flash | .swf .flv | Deprecato. Adobe Flash Player è stato rimosso da tutti i browser moderni nel 2020. Questo formato è ora considerato obsoleto e richiede emulatori di terze parti per essere riprodotto. |
| Ogg Theora | .ogg | Creato dalla Xiph.Org Foundation. Supportato da HTML5. |
| WebM | .webm | Creato da Mozilla, Opera, Google e Adobe. Supportato da HTML5. |
| MPEG-4 o MP4 | .mp4 | Creato dal Moving Pictures Expert Group. Viene generalmente usato in hardware TV e videocamere più recenti. Raccomandato da YouTube. Supportato da tutti i browser HTML5. |
Per il tag <video> di HTML5, utilizza MP4 (video H.264 + audio AAC — funziona ovunque, incluso Safari), WebM e Ogg (entrambi supportati in Chrome e Firefox). MP4 combinato con elementi <source> WebM copre essenzialmente tutti i browser moderni.
Supporto dei Browser
Audio e video sono riprodotti nativamente da tutti i browser moderni — non sono necessari plugin di terze parti. Il supporto non è identico per tutti i formati, motivo per cui si offrono più elementi <source>:
- Audio — MP3 e AAC (in
.mp4) funzionano in tutti i principali browser, incluso Safari. Ogg/Vorbis funziona in Chrome e Firefox ma non in Safari. - Video — MP4 (H.264) funziona ovunque, incluso Safari. WebM e Ogg/Theora funzionano in Chrome e Firefox.
La combinazione sicura e ampiamente usata è MP4 + WebM per i video e MP3 + Ogg per l'audio.