Audio e video

Come hai appreso nel modulo Immagini, il codice HTML consente di incorporare contenuti multimediali in una pagina web. In questa sezione, esaminiamo i file audio e video, come incorporarli, controlli utente, forniscono un segnaposto di immagini statiche per i tuoi video e best practice, tra cui rendere accessibili i file audio e video.

<audio> e <video>

<video> e <audio> possono essere utilizzati per incorporare player multimediali direttamente con l'attributo src oppure come elemento contenitore per una serie di elementi <source>, ognuno dei quali fornisce un suggerimento per il file src. Sebbene sia possibile utilizzare <video> per incorporare un file audio, è preferibile usare l'elemento <audio> per l'incorporamento. file audio.

I tag di apertura <video> e <audio> possono contenere diversi altri attributi, tra cui controls, autoplay, loop, mute, preload e gli attributi globali. L'elemento <video> supporta anche height, width e poster attributi.

<video src="videos/machines.webm" poster="images/machine.jpg" controls>
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Questo esempio di <video> ha una singola sorgente con l'attributo src che rimanda alla sorgente del video. Attributo poster fornisce un'immagine da visualizzare durante il caricamento del video. Infine, l'attributo controls fornisce i controlli video all'utente.

I contenuti di riserva sono inclusi tra i tag di apertura e chiusura. Se lo user agent non supporta <video> (o <audio>, questi contenuti vengono mostrati. Il tag </video> di chiusura è obbligatorio, anche se non ci sono contenuti tra i due (ma dovrebbero sempre essere presenti contenuti di riserva , giusto?).

Se non è incluso alcun attributo src nei tag di apertura <video> o <audio>, includi uno o più elementi <source>, ciascuna con un attributo src a un file multimediale. Il seguente esempio include tre opzioni per i file multimediali: contenuti di fallback, e sottotitoli in inglese e francese tra i tag di apertura e chiusura.

<video controls poster="images/machine.jpg">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
  <track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
  <track label="Francais" kind="subtitles" srclang="fr" src="vtt/subtitles-fr.vtt" />
  <p>Watch <a href="https://youtube.com/link">video on Youtube</a></p>
</video>

Ogni elemento figlio <source> include un attributo src che punta alla risorsa, mentre l'attributo type informa il browser del tipo multimediale del file collegato. Questo impedisce al browser di recuperare file multimediali che non sarebbe in grado di decodificare.

All'interno dell'attributo type, puoi includere un parametro codecs, che specifica esattamente come è codificata la risorsa. I codec consentono di includere ottimizzazioni dei media non ancora supportate su tutti i browser. Il codec è separato dal tipo multimediale da un punto e virgola. Ad esempio, il codec può essere scritto utilizzando una sintassi intuitiva, come <source src="videos/machines.webm" type="video/webm;codecs=vp8,vorbis">, che indica che I file WebM contengono video VP8 e audio vorbis. I codec possono anche essere più difficili da decifrare, ad esempio <source src="videos/machines.mp4" type="video/mp4; codecs=avc1.4d002a"> che indica che la codifica MP4 è Advanced Video Coding Main Profile Level 4.2. Spiegare questa sintassi va ben oltre l'ambito di questa lezione. Jake Archibald ha un post che spiega come determinare il parametro del codec per un video AV1 per saperne di più.

Quando si visualizza un video, per impostazione predefinita, il primo fotogramma del video viene mostrato come fermo immagine quando diventa disponibile. Questo è qualcosa che può essere controllato. L'attributo poster consente di mostrare l'origine di un'immagine durante il download del video e fino a quando non viene riprodotto. Se il video viene riprodotto e poi messo in pausa, il poster non viene mostrato nuovamente.

Assicurati di definire le proporzioni del video, in quanto al caricamento del video c'è una differenza di dimensioni. tra il poster e il video provocherà l'adattamento dinamico del contenuto e la ripetizione del colore.

Includi sempre l'attributo controls booleano. In questo modo l'utente controlla visibili, offrendo agli utenti la possibilità di controllare i livelli audio, disattivare completamente l'audio ed espandere il video a schermo intero. L'omissione di controls causa un'esperienza utente negativa, soprattutto se viene incluso l'attributo booleano autoplay. Tieni presente che alcune browser non prenderà in considerazione l'istruzione dell'attributo autoplay se l'attributo booleano muted viene omesso perché dei file multimediali è generalmente un'esperienza utente negativa, anche se l'audio è disattivato e con controlli visibili.

Tracce

Includi uno o più <track> tra i tag di apertura e di chiusura obbligatori dell'audio e del video. per specificare tracce di testo temporizzate. L'esempio seguente include due file <track>, che forniscono sottotitoli con timestamp sia in inglese che in francese.

<track label="English" kind="subtitles" srclang="en" src="vtt/subtitles-en.vtt" default />
<track label="Français" kind="subtitles" srclang="fr" lang="fr-fr" src="vtt/subtitles-fr.vtt" />

I file delle tracce, specificati nell'attributo src, devono essere in formato WebVTT (.vtt). I file devono trovarsi nello stesso dominio del documento HTML, a meno che il file crossorigin .

Esistono cinque valori enumerati per l'attributo traccia kind: subtitles, captions, descriptions, chapters e altri metadata.

Includi subtitles insieme all'attributo srclang per la trascrizione e le traduzioni dei dialoghi. Il valore di ogni attributo label viene mostrata come opzione all'utente. I contenuti dell'opzione VTT selezionata vengono visualizzati sopra il video. L'aspetto dei modelli ai sottotitoli possono essere definiti come target ::cue/ ::cue().

Il valore kind="caption" deve essere riservato alle trascrizioni e alle traduzioni che includono effetti sonori e altre informazioni audio pertinenti. Questo non è solo per gli spettatori sordi. Magari un utente non riesce a trovare le cuffie e ha attivato i sottotitoli codificati. O forse non è stato non sono abbastanza gli ultimi punti di discussione di un podcast preferito, quindi vogliono leggere la trascrizione per confermare di aver compreso il contenuto. Avere metodi alternativi per accedere a contenuti audio e video è importante e pratico.

kind="description" è destinato alle descrizioni testuali dei contenuti visivi del video per gli utenti che non possono vedere il video, sia utilizzano un impianto sprovvisto di schermo (ad esempio Google Home o Alexa) oppure non hanno la vista.

Fornire sottotitoli codificati e sottotitoli utilizzando il formato WebVTT rende il video accessibile alle persone con disabilità uditiva. Ricorda, la disabilità è una mancata corrispondenza tra una persona e il suo ambiente attuale. La disabilità uditiva può essere dovuta all'utente che si trova in un ambiente rumoroso, ha altoparlanti difettosi o cuffie rotte oppure perché soffre di perdita dell'udito è sorda. Garantire che i tuoi contenuti siano accessibili aiuta molte più persone di quanto pensi. è utile per tutti.

Considerazioni sui video di background

Il team di marketing o di design potrebbe voler includere nel sito un video in background. In genere, ciò significa che vogliono che l'audio sia disattivato, riproduzione automatica e loop di video senza controlli. Il codice HTML potrebbe avere un aspetto simile al seguente:

<video autoplay loop muted poster="images/machine.jpg" role="none">
  <source src="videos/machines.webm" type="video/webm">
  <source src="videos/machines.mp4" type="video/mp4">
  <source src="videos/machines.ogv" type="video/ogg">
</video>

I video in background non sono accessibili. I contenuti non devono essere trasmessi tramite video in background senza fornire agli utenti controllo sulla riproduzione e sull'accesso a tutti i sottotitoli codificati. Poiché questo video è puramente decorativo, include il ruolo ARIA. di none e omette eventuali contenuti di riserva. Per migliorare il rendimento dei video sempre con l'audio disattivato, rimuovi la traccia audio dalle sorgenti multimediali.

Se il video viene riprodotto per cinque secondi o meno, le linee guida per l'accessibilità non richiedono un meccanismo di pausa, ma nulla con l'attributo booleano loop esegue il loop permanente per impostazione predefinita, superando questo limite di cinque secondi o qualsiasi altro limite di tempo. Per sempre esperienza utente, includi sempre un metodo per mettere in pausa il video. Per farlo, devi includere controls.

Controlli multimediali personalizzati

Per visualizzare i controlli video o audio personalizzati anziché i controlli integrati del browser, includi l'attributo controls. Quindi utilizza JavaScript per aggiungere controlli multimediali personalizzati e rimuovere l'attributo controlli. Ad esempio, puoi aggiungere un <button> che attiva/disattiva lo stato di riproduzione di un file audio.

<button id="playPause" aria-controls="idOfAudio"
  data-pause-text="Pause audio"
  data-play-text="Play audio">Pause audio</button>

Questo esempio include un pulsante con attributi dataset contenente il testo che verrà aggiornato quando il visitatore attiva/disattiva tra gli stati di riproduzione e pausa. L'attributo aria-controls è incluso con il id dell'elemento controllato dal pulsante; in questo caso l'audio. Ogni pulsante che controlla l'audio ha un gestore di eventi.

Per creare controlli personalizzati, usa HTMLMediaElement.play() e HTMLMediaElement.pause(). Quando attivi/disattivi lo stato di riproduzione, attiva/disattiva anche il testo del pulsante:

const pauseButton = document.getElementById('playPause');

pauseButton.addEventListener("click", pauseAndPlay, false);

function pauseAndPlay() {
  console.log(this);
  const media = document.getElementById(this.getAttribute('aria-controls'));

  if (media.paused) {
    media.play();
    this.innerText = this.dataset.pauseText;
  } else {
    media.pause();
    this.innerText = this.dataset.playText;
  }
}

Con l'inclusione dell'attributo controls, l'utente può controllare l'audio (o il video) anche se JavaScript non funziona. Rimuovi l'attributo controlli solo dopo aver creato l'istanza di un pulsante sostitutivo.

document.querySelector('[aria-controls]').removeAttribute('controls');

Includi sempre controlli esterni quando gli utenti non possono accedervi, ad esempio con video in background in cui i controlli sono nascosti dietro i contenuti del sito. È importante comprendere le basi dei requisiti di accessibilità dei contenuti multimediali per venire incontro alle esigenze degli utenti diverse esigenze ambientali e sensoriali, incluse le milioni di persone con disabilità uditiva e disabilità visive. Abbiamo appena accennato alla HTMLMediaElement, che fornisce diverse proprietà, metodi ed eventi ereditati da entrambe le proprietà HTMLVideoElement e HTMLAudioElement, con HTMLMediaElement che aggiunge alcune proprietà, metodi ed eventi propri. Esistono molte altre API multimediali, inclusa un'API TextTrack. Puoi usare lo strumento Acquisizione di contenuti multimediali e Stream e le API MediaDevices per registrare l'audio tramite il microfono di un utente. oppure registrare lo schermo di un utente. L'API Web Audio attiva la manipolazione di audio in diretta e preregistrati e lo streaming, il salvataggio o l'invio dell'audio all'elemento <audio>.

Verifica le tue conoscenze

Verifica le tue conoscenze in materia di audio e video.