Corso di HTML / Incorporare audio, video e contenuti esterni
HTML può riprodurre file multimediali con audio e video o visualizzare un altro documento all'interno di una pagina con iframe. Il corretto inserimento dipende dai percorsi dei file reali e dai formati supportati. Controlli utili, sottotitoli o trascrizioni, così come l'affidabilità dei contenuti esterni, sono anch'essi importanti.
Riprodurre file audio e video
L'esempio presuppone che sample.mp3, sample.mp4 e sample-poster.webp si trovino accanto al file HTML. Per eseguirlo, fornite i file che potete utilizzare e adattate i nomi se necessario. Anche i media richiedono nomi di file, percorsi e dimensioni corretti, secondo i principi di Immagini: img, testo alternativo e dimensioni.
<audio controls>
<source src="sample.mp3" type="audio/mpeg">
Il tuo browser non supporta la riproduzione audio.
</audio>
<video controls width="640" height="360" poster="sample-poster.webp">
<source src="sample.mp4" type="video/mp4">
<track src="sample-it.vtt" kind="captions" srclang="it-IT"
label="Sottotitoli in italiano" default>
Il tuo browser non supporta la riproduzione video.
</video>controls fornisce i controlli di riproduzione del browser e poster viene visualizzato prima della riproduzione di un video. Per linguaggio o suoni significativi, fornite sottotitoli precisi. Il sample-it.vtt referenziato non viene creato automaticamente. Senza questo file, i sottotitoli non possono essere visualizzati.
Un file di sottotitoli WebVTT è un testo UTF-8. Questo esempio minimo mostra solo una singola visualizzazione per i primi tre secondi; i sottotitoli effettivi dovrebbero coprire i contenuti parlati del video e i suoni importanti nei tempi corrispondenti.
WEBVTT
00:00:00.000 --> 00:00:03.000
Benvenuti nel Piccolo Giardino.
Salvate questo testo come sample-it.vtt con codifica UTF-8. Tra la riga dei tempi e il testo del sottotitolo non ci devono essere righe vuote. Una riga vuota separa solo il blocco di sottotitolo successivo. Il riferimento WebVTT su MDN descrive la struttura del formato.
Quando vengono trasmesse informazioni importanti tramite audio, fornite anche una trascrizione del testo. Consentite agli utenti di avviare la riproduzione da soli, invece di far partire l'audio automaticamente e inaspettatamente. Se si offrono più formati source, i file sottostanti devono effettivamente utilizzare tali formati; rinominare un'estensione non converte il file multimediale.
Incorporare contenuti esterni con iframe
Un iframe mostra un altro documento all'interno della pagina corrente. L'URL sottostante è un segnaposto strutturale e non un vero embed multimediale. Sostituitelo con un URL di incorporamento ufficiale fornito dal provider.
<iframe
src="https://example.com/embed/example"
title="Presentazione del contenuto di esempio"
width="640" height="360"
loading="lazy"></iframe>L'attributo title descrive lo scopo del frame. Un fornitore può vietare l'incorporamento, anche se l'URL normale della sua pagina funziona. I contenuti esterni possono influenzare la privacy, i cookie e le prestazioni, quindi utilizzate solo il codice di incorporamento ufficiale di un fornitore affidabile, se fornisce un valore aggiunto. Indicate il titolo o il contesto dell'elemento incorporato nel testo circostante, in modo che l'articolo sia comprensibile anche se non viene caricato.
Adattare i media e provare un frame locale
Una larghezza HTML di 640 non si adatta automaticamente a una finestra stretta. Inserite questo CSS in un elemento style nel head o in un file di stylesheet collegato. Il video manterrà il suo rapporto intrinseco; l'esercizio con l'iframe utilizza una cornice di visualizzazione 16:9. Adattate questo rapporto se il contenuto incorporato richiede un rapporto differente.
video, iframe {
display: block;
width: 100%;
max-width: 640px;
}
video { height: auto; }
iframe {
height: auto;
aspect-ratio: 16 / 9;
}Potete verificare i percorsi dei file del frame, il layout e la navigazione alternativa senza il file video. Salvate questi due file insieme come UTF-8. Questo esercizio non dipende da alcun servizio esterno o dati personali.
embed.html
<!doctype html>
<html lang="it-IT">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Istruzioni per l'esercizio</title>
</head>
<body>
<h1>Istruzioni per Piccolo Giardino</h1>
<p>Questo esempio locale viene visualizzato in un iframe.</p>
</body>
</html>frame.html
<!doctype html>
<html lang="it-IT">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Esercizio sugli iframe</title>
<style>
video, iframe {
display: block;
width: 100%;
max-width: 640px;
}
video { height: auto; }
iframe {
height: auto;
aspect-ratio: 16 / 9;
}
</style>
</head>
<body>
<h1>Leggere le istruzioni</h1>
<iframe src="embed.html" title="Istruzioni per Piccolo Giardino" width="640" height="360"></iframe>
<p><a href="embed.html">Aprire le istruzioni in una pagina separata</a></p>
</body>
</html>Aprite frame.html e controllate il titolo e il paragrafo incorporati, quindi verificate se il frame si adatta a una finestra di 390px. Seguite inoltre il link alla pagina separata. Se successivamente userete un incorporamento esterno, verificate l'URL ufficiale di questo fornitore e le sue linee guida per l'incorporamento.
WebVTT è un formato di testo che associa intervalli di tempo ai sottotitoli. Se i sottotitoli da un file locale non funzionano, controllate prima la presenza, l'estensione, la codifica UTF-8 e gli intervalli dei sottotitoli, e poi confrontare fornendo HTML, video e VTT dallo stesso server di sviluppo HTTP con la stessa origine. Le limitazioni sugli URL dei file e sui tipi di media del server possono influire sul caricamento. Rinominare un'estensione non è una conversione multimediale.
<p><a href="sample.mp4">Aprire il file video di esempio</a></p>
<p><a href="transcript.html">Leggere la trascrizione del video</a></p>Allineate le alternative sui file e su una trascrizione che avete effettivamente preparato. Il testo sostitutivo all'interno dell'elemento audio/video è pensato per browser che non supportano l'elemento; non si tratta di un messaggio di errore garantito che viene visualizzato quando un browser compatibile non riesce a caricare un file. Rendete disponibili le alternative e le trascrizioni richieste anche al di fuori del lettore.
Se il media non viene riprodotto o non è adatto
- Verificate che il file esista nel percorso indicato e che il server invii il tipo di media corrispondente.
- Verificate che il browser supporti la codifica effettiva del file e non solo l'estensione del nome del file.
- Usate il CSS per limitare la larghezza sui piccoli schermi senza distorcere il rapporto d'aspetto del video.
- Per i contenuti esterni, controllate le linee guida di incorporamento e le condizioni del fornitore.
Consultate la documentazione video su MDN e la documentazione di iframe per gli attributi specifici degli elementi. Applicate l'ambito dei test manuali in Fondamenti di accessibilità: Titoli, Link, Immagini e Tastiera ai comandi di riproduzione, ai link alternativi e all'uso della tastiera.
