Contenuti video e audio

Adesso che siamo pratici con l'aggiunta di immagini, il passo successivo è cominciare ad aggiungere lettori video e audio ai documenti HTML. In questo articolo vedremo come farlo, con gli elementi <video> e <audio>; finiremo dando uno sguardo a come si aggiungono i sottotitoli ai video.

Prerequisiti: Competenze base sui computer, software di base installato, conoscenze base di gestione dei file (working with files), familiarità coi fondamenti di HTML (come trattati in Cominciare con l'HTML) e con Immagini in HTML.
Obbiettivi: Imparare ad inserire contenuti video e audio nelle webpage e aggiungere i sottotitoli ai video.

Audio e video nel web

Gli sviluppatori Web han voluto usare video e audio per lungo tempo, fin dai primi anni del terzo millennio, quando abbiamo cominciato ad avere la banda larga, veloce abbastanza da supportare ogni tipo di video (i file video sono molto più grandi dei file testo o immagine). Nei primi tempi, le tecnologie nate per il web, come l'HTML, non avevano la capacità di integrare video e audio nel web, così, per poterlo fare, sono diventate popolari delle tecnologie proprietarie (e i plugin basati su di esse), come Flash (e più tardi Silverlight). Questo tipo di tecnologie funziona bene, ma ha numerosi problemi, tra cui: non essere ben integrate con HTML/CSS, problemi di sicurezza e di accessibilità.

Una soluzione nativa, sviluppata apposta, avrebbe risolto molti di questi problemi. Fortunatamente, pochi anni dopo, la specifica HTML5 aveva queste caratteristiche, conferite dall'aggiunta degli elementi <video> e <audio> e di alcune brillanti nuove JavaScript APIs per il loro controllo. Non vedremo JavaScript qui — vedremo solo le fondamenta che possono essere ottenute con l'HTML.

Non ti insegneremo a produrre file audio e video, cosa per la quale sono richieste competenze totalmente diverse. Ti forniremo campioni audio, video e esempi di codice per i tuoi esperimenti, nel caso che tu non possa ottenerli per tuo conto.

Nota: Prima di cominciare, dovresti anche sapere che ci sono abbastanza pochi OVPs (online video providers - fornitori di video online) come YouTube, Dailymotion, e Vimeo, e fornitori di audio online, come Soundcloud. Queste compagnie offrono un modo comodo e facile per pubblicare e fruire di video, così che tu non ti debba preoccupare dell'enorme consumo di banda. Queste compagnie OVP, in genere, offrono anche il codice da usare per integrare video/audio nelle tue pagine web. Se segui questa strada puoi evitare alcune delle difficoltà di cui discutiamo in questo articolo. Vedremo un po meglio questo tipo di servizi nel prossimo articolo.

L'elemento <video>

L'elemento <video> permette di aggiungere un video in modo molto semplice. Un esempio può essere questo:

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>

Le caratteristiche sono:

src
Come per l'elemento <img>, l'attributo src contiene il percorso al video che vuoi integrare nella pagina; funziona esattamente nello stesso modo.
controls
Gli utenti devono poter controllare il riavvolgimento e la ripetizione del video o dell'audio (è particolarmente importante per i malati di epilessia). Si può usare sia l'attributo controls per aggiungere l'interfaccia di controllo propria del browser, sia costruire la propria interfaccia usando le appropriate API JavaScript. Come minimo, l'interfaccia deve offrire la possibilità di avviare e fermare il media e di regolare il volume.
Il paragrafo tra i tag <video>
Questo paragrafo è chiamato fallback content (contenuto di ripiego) — sarà mostrato se il browser che accede alla pagina non supporta l'elemento <video>, offrendo un'alternativa per i vecchi browser. Può essere qualunque cosa vogliate; si può ad esempio fornire un collegamento diretto al file video, così che l'utente possa accedervi in qualche modo, indipendentemente dal browser che usa.

Il video integrato apparirà più o meno così:

A simple video player showing a video of a small white rabbit

Puoi provare l'esempio qui: try the example (vedi anche il codice sorgente).

Supportare molti formati

C'è un problema con l'esempio qui sopra, che potresti aver già notato se hai provato ad accedere il live link con un browser come Safari o Internet Explorer. Il video non parte! Ciò è dovuto al fatto che i browser supportano formati video (e audio) diversi.

Passiamo rapidamente in rassegna la terminologia. Formati come MP3, MP4 e WebM sono chiamati container formats (formati container). Contengono diverse parti che costituiscono l'intera canzone o video — come un'unica traccia audio (o un unica traccia video nel caso dei video) e i metadati per descrivere il media (mezzo espressivo) che viene presentato.

Anche le tracce audio e video hanno diversi formati, per esempio:

  • Un contenitore WebM in genere include l'audio Ogg Vorbis con un video VP8/VP9. Ciò è supportato principalmente in Firefox e Chrome.
  • Un MP4 spesso include audio AAC o MP3 con video H.264. Questa soluzione è principalmente supportata in Internet Explorer e Safari.
  • Il più vecchio contenitore Ogg tende ad andare verso l'audio Ogg Vorbis e il video Ogg Theora. Questa soluzione era supportata principalmente in Firefox e Chrome, ma è sostanzialmente stata rimpiazzata dal formato di migliore qualità WebM.

Un player audio tenderà a riprodurre una traccia audio direttamente, ad es. un MP3 o un file Ogg; queste non necessitano di contenitori.

Nota: non è così semplice, come puoi vedere nella nostra tabella audio-video codec compatibility table. Inoltre, molti browser dei portatili possono riprodurre un formato non supportato passandone la gestione al media player del sistema perché lo riproduca. Ma per ora ce n'è già abbastanza.

I formati precedenti esistono per comprimere i video e gli audio in file maneggiabili (i video e gli audio originali sono molto pesanti). I browser contengono differenti Codecs, come Vorbis o H.264, che sono usati per covertire i video e gli audio compressi in file binari e viceversa. Come già detto, sfortunatamente, non tutti i borwser supportano gli stessi codecs, così si dovranno fornire molti file, per ogni riproduttore di media. Se manca il giusto codec per decodificare il media, questo non si avvierà.

Nota: ti potresti chiedere il perché di questa situazione. I formati MP3 (for audio) and MP4/H.264 (for video) sono entrambi ampiamente supportati e di buona qualità. Tuttavia, sono anche ricoperti da brevetto — Il brevetto americano copre MP3 fino almeno al 2017, e H.264 fino al 2027 come minimo; ciò significa che i browser che non detengono il brevetto devono pagare parecchio per poter supportare questi formati. Inoltre, molte persone evitano per principio i software con delle restrizioni, in favore dei formati aperti.

Quindi, come facciamo ad offrire diversi formati? Dai uno sguardo al seguente updated example (try it live here, also):

<video controls>
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

Qui abbiamo tirato fuori l'attributo src dal tag <video> e abbiamo invece incluso elementi <source> che puntano ciascuno a una risorsa. In questo caso il browser cercherà tra gli elementi <source> e riprodurrà il primo per il quale ha il codec. Includere i formati WebM e MP4 dovrebbe essere sufficiente a riprodurre il tuo video sulla maggioranza delle piattaforme e dei browser di oggi.

Ogni elemento <source> ha un attributo type; è opzionale, ma è consigliato metterlo — contiene i MIME types dei file video e i browser possono leggerli e scartare immediatamente i formati che non capiscono. Se non viene messo, i browser dovranno caricare i file e provare a riprodurli fino a che ne troveranno uno che funziona, usando molto più tempo e risorse.

Nota: il nostro articolo sui formati media supportati contiene alcuni comuni MIME types.

Altre caratteristiche dell'elemento <video>

Ci sono numerose altre funzionalità che possono essere incluse in un video HTML5. Dai un occhiata al nostro terzo esempio:

<video controls width="400" height="400"
       autoplay loop muted
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

Questo ci darà un output simile a questo:

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!Le nuove funzionalità sono:

width e height
Puoi controllare la dimensione del video sia con questi attributi che con i CSS. In entrambi i casi i video mantengono il loro rapporto larghezza-altezza nativo, conosciuto come aspect ratio. Se il rapporto d'aspetto non è mantenuto dalle dimensioni impostate da te, il video sarà ridimensionato fino alla dimensione orizzontale e lo spazio non occupato verticalmente verrà riempito, di default, con uno sfondo colorato.
autoplay
Questo attributo fa partire l'audio o il video immediatamente, durante il caricamento della pagina. Ti suggeriamo di non usare l'autoplay nel tuo sito, perché gli utenti possono trovarlo molto fastidioso.
loop
Questo attributo fa ricominciare il video (o l'audio) nuovamente, ogni volta che finisce. Anche questo può essere fastidioso, quindi usalo solo se necessario.
muted
Questo attributo fa si che il video parta con l'audio disattivato per default.
poster
Questo attributo ha per valore l'URL di una immagine che sarà mostrata prima dell'avvio del video. Si suppone sia usata come schermata di lancio, promozionale.

Puoi trovare gli esempi sopra su play live on Github (also see the source code). Nota che non abbiamo incluso l'attributo autoplay nella versione live — se il video parte appena la pagina viene caricata, non potrai vedere il poster!

L'elemento <audio>

L'elemento <audio> funziona esattamente come l'elemento <video>, con poche minime differenze illustrate qui sotto. Un esempio tipico potrebbe apparire così:

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

Ciò produce qualcosa del genere, in un browser:

A simple audio player with a play button, timer, volume control, and progress bar

Nota: Puoi riprodurre the audio demo live on Github (also see the audio player source code.)

Questo occupa meno spazio di un player video, perché non c'è la componente visiva — devi solo visualizzare i controlli per l'audio. Altre differenze dall'HTML5 video sono queste:

  • l'elemento <audio> non supporta gli attributi width/height — non essendoci la componente video, non c'è nulla a cui poter assegnare larghezza o altezza.
  • non supporta neanche l'attributo poster — per la stessa ragione: nessuna componente visiva.

A parte ciò,  <audio> supporta tutte le caratteristiche di <video> — puoi vedere la precedente sezione per avere informazioni a riguardo, se non l'hai ancora vista.

Mostrare le traccie testuali (sottotitoli) dei video

Adesso discuteremo un concetto leggermente più avanzato, che è molto utile conoscere. Molta gente non può o non vuole ascoltare il contenuto audio del web, almeno certe volte. Per esempio:

  • molta gente ha invalidità uditive (difficoltà di ascolto, sordità) e non può sentire l'audio.
  • altri potrebbero non essere in grado di sentire perchè si trovano in un ambiente rumoroso (come un bar affollato quando viene trasmesso un evento sportivo) o potrebbero voler evitare di disturbare gli altri, se si trovano in un ambiente silenzioso (come una bibblioteca).
  • le persone che non parlano la lingua del video, potrebbero desiderare una trascrizione o una traduzione che gli aiuti a capire il contenuto del media.

Non sarebbe bello poter fornire a queste persone una trascrizione del testo enunciato nel video/audio? Bene, grazie all'HTML5 si può; con il formato WebVTT e l'elemento <track>.

Nota: "Transcribe (trascrivere)" e "transcript (trascrizione)" significa creare un testo scritto che riproduce le parole come sono pronunciate.

WebVTT è un formato  per scrivere file di testo contenenti molteplici stringhe di testo insieme a metadati come il tempo a cui vuoi che ogni stringa sia mostrata e limitate informazioni relative allo stile e alla opsizione. Queste stringhe di testo sono chiamate cues (battute), e se ne possono visualizzare diversi tipi che hanno scopi diversi; le più comuni sono:

subtitles
Traduzioni di materiale straniero, per chi non capisce la lingua
captions
trascrizioni sincronizzate di dialoghi o descrizioni di suoni significativi, per permettere a chi non può sentire l'audio di capire cosa sta succedendo.
timed descriptions
testo che deve essere convertito in audio, per essere disponibile a chi ha disabilità visive.

Un tipico file WebVTT appare così:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

Per visualizzarlo insieme al riproduttore di media HTML, devi:

  1. salvarlo come file .vtt in un posto adatto
  2. collegare il file .vttcon l'elemento <track>. Questo elemento <track> deve essere annidato dentro <audio> o <video>, ma dopo tutti gli elementi <source>. Usa l'attributo kind per specificare se le battute sono subtitles, captions, o descriptions. Inoltre, usa l'attributo srclang per dire al browser in quale lingua sono scritti i sottotitoli.

Ecco un esempio:

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
</video>

Ciò produrrà un video coi sottotitoli visualizzati più o meno così:

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

Per avere più dettagli, leggi Adding captions and subtitles to HTML5 video. Puoi trovare l'esempio sviluppato in questo articolo qui: find the example, su Github, scritto da Ian Devlin (guarda anche il codice sorgente). Questo esempio usa alcuni JavaScript per permettere agli utenti di scegliere tra differenti sottotitoli. Nota che per attivare i sottotitoli, devi premere il bottone "CC" e selezionare un'opzione — English, Deutch, o Español. 

Nota: le "Text tracks" ti aiutano anche con la SEO, perché i motori di ricerca brillano particolarmente coi testi.  I sottotitoli (Text tracks/traccie di testo) permettono ai motori di ricerca, persino di linkare direttamente una certa parte del video.

Active learning: Includere un proprio audio o video

Per questo apprendimento attivo, ci piacerebbe che tu andassi fuori a registrare alcuni video tuoi — molti telefoni, oggi, consentono di registrare audio e video molto facilmente e se riesci a trasferirli sul tuo computer, li puoi usare. Potresti dover fare alcune conversioni per ottenere i formati WebM o MP4, per i video, oppure MP3 o Ogg, per l'audio, ma ci sono molti programmi che permettono di farlo senza problemi, come Miro Video Converter e Audacity. Ci piacerebbe che facessi un tentativo!

Se non sai generare acun video o audio, allora puoi usare i nostri campioni di file video e audio per portare a termine l'esercizio. Puoi anche usare i campioni di codice come riferimento.

Ci piacerebbe che:

  1. salvassi i tuoi file audio e video in una nuova directory sul tuo computer,
  2. creassi un nuovo file index.html nella stessa directory,
  3. aggiungessi gli elementi <audio> e <video> alla pagina facendogli mostrare i controlli di default del browser,
  4. dessi a entrambi degli elementi <source> così che il browser trovi il formato che supportano meglio e lo caricassero; ciò include l'uso dell'attributo type,
  5. dessi all'elemento <video> un poster da visualizzare prima che il video venga avviato. Divertiti a creare il tuo personale poster disegnato.

Per raggiungere dei bonus, puoi provare a cercare text tracks (sottotitoli) e studiare come aggiungere qualche trascrizione al tuo video.

Conclusioni

Questo è quanto. Speriamo tu ti sia divertito/a a giocare con contenuti video e audio! Nel prossimo articolo vedremo altri modi per inserire contenuti nelle pagine web, usando tecnologie come gli <iframe> e gli <object>.

Vedi anche

Tag del documento e collaboratori

 Ultima modifica di: howilearn,