Inserire video, audio e iframe in un documento HTML

Inserire video e audio in un documento HTML oggi è una passeggiata, il supporto nativo di HTML5 rende tutto molto più veloce e fluido, ma non è sempre stato così.

Devi sapere che tanti anni fa, in particolare i video, venivano visualizzati sul browser grazie al supporto di plugin come Adobe Flash e Microsoft Silverlight. Questi due software dovevano essere installati a parte del browser (non erano estensioni) e permettevano di vedere questi speciali tipo di contenuti. Assurdo a pensarci oggi, eppure 15 anni fa era così.

Ormai obsoleti, Adobe ha interrotto il supporto a Flash nel 2020, ma considera che iPhone non ha mai supportato Flash, quindi era veramente una tecnologia destinata a morire, oggi abbiamo tag HTML nativi che permettono di incorporare in un documento HTML video e audio. Usarli è semplice come incorporare un'immagine, abbiamo solo qualche controllo in più, ma cerchiamo di andare con ordine.

Come inserire un video in un documento HTML

Con l’uso del tag <video> possiamo caricare un video nel documento HTML. Per quanto la configurazione avvenga attraverso gli attributi, l’elemento accetta vari elementi come contenuto, il quale verrà mostrato nel caso il browser non supportasse i video in HTML, ma non solo.

1<video controls width="250" src=”video/il-mio-video.mp4”>
2   <p>Il tuo browser non supporta i video,  <a href="video/il-mio-video.mp4">scaricalo per poterlo visualizzare</a></p>
3</video>

Come contenuto dell’elemento <video> possiamo usare il già noto tag <source> per mettere a disposizione formati differenti i quali verranno scelti in base a quelli supportati dal browser.

1<video controls width="250">
2   <source src=”video/il-mio-video.mp4” type=”video/mp4” />
3   <source src=”video/il-mio-video.webm” type=”video/webm” />
4   <p>Il tuo browser non supporta i video,  <a href="video/il-mio-video.mp4">scaricalo per poterlo visualizzare</a></p>
5</video>

Gli attributi del tag

Come menzionato in precedenza il tag <video> è ricchissimo di attributi, nello specifico abbiamo:

• controls: abilita i controlli del player
• width: larghezza del player video
• height: altezza del player video
• autoplay: fa partire il video in automatico al caricamento della pagina
• loop: una volta terminato il video questo riparte
• muted: il video ha l’audio mutato

• preload: suggerisce al browser il da farsi nel momento del caricamento, i valori consentiti sono:

  • none: nessun preload verrà effettuato
  • metadata: verranno pre caricati solo i metadati come la lunghezza

  • auto: indica che l’intero video deve essere scaricato, anche se l’utente non lo guarderà.

    Il valore di default varia da browser a browser

• poster: permette di inserire un’immagine personalizzata di anteprima.
• src: URL del video.

1<video src="videos/friday.mp4" controls poster="images/poster.jpg" width="400" height="300" autoplay loop muted preload="auto">
2   <p>Il tuo browser non supporta i video,  <a href="video/friday.mp4">scaricalo per poterlo visualizzare</a></p>
3</video>

Come sottotitolare un video

Insieme a source ed eventuali fallback possiamo specificare anche un tag <track>, il quale ci permette di caricare un file .vtt (WebVTT).

<track> accetta vari tipi di sottotitoli, specificabili attraverso l’attributo kind:

• subtitles (default)
• captions
• descriptions
• chapters
• metadata

Possiamo definire <track> multiple, anche in diverse lingue, distinguibili con l’attributo srclang.

1<video src="videos/friday.mp4" controls poster="images/pixel-normale.jpg" width="400" height="300" autoplay loop muted preload="auto">
2   <track src="videos/friday.vtt" kind="subtitles" label="Sottotitoli inglesi" srclang="en" />
3   <p>Il tuo browser non supporta i video,  <a href="video/friday.mp4">scaricalo per poterlo visualizzare</a></p>
4</video>

Inserire un audio in un documento HTML

Quello che abbiamo visto per <video> è valido per anche per il tag <audio> con alcune differenze (oltre al formato).

<audio> non supporta width, height e poster. Non avendo elementi visuali a parte i controlli non sono necessari.

1<audio src="audios/t-rex-roar.mp3" controls></audio>

Embedding di altre risorse

Oltre ad immagini, video e audio possiamo inserire nel documento elementi più complessi, come<iframe>.

Nota bene: esistono anche <embed> e <object> che sono due elementi più generici di iframe, il cui uso storico (fine anni 90 e inizio anni 2000) era legato all’incorporamento di Flash e altre tecnologie ormai oggi obsolete. Oggi sono usati molto di meno e non li approfondirò.

Tornando ad <iframe> è un elemento che ci permette di incorporare altri documenti web in quello corrente. Un sistema perfetto per mostrare contenuti di terze parti, come ad esempio una mappa o un video.

1<iframe width="560" height="315" src="https://www.youtube.com/embed/1CglgIdevSs?si=snGsPoX5A4djz7Cd" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Gli attributi di

• allowfullscreen: l’iframe può essere visualizzato a schermo intero
• height: altezza dell’iframe
• loading: se impostato a lazy l’iframe viene caricato quando il browser lo riterrà necessario, se vuoi approfondire c’è uno short di circa un minuto dove parlo dell’attributo loading e del valore lazy.
• title: utile per questioni di accessibilità comunica agli utenti che usano uno screen reader di cosa tratta l’iframe. Senza l’attributo gli utenti saranno costretti a navigare l’iframe per capire di cosa si tratta.
• referrerpolicy: il nostro caro amico fa sempre la stessa cosa anche qui, indica come deve essere compilato l’header Refer.
• sandbox: attributo importantissimo per questioni di sicurezza, spiego meglio tra qualche riga.
• src: URL della pagina da incorporare
• width: larghezza dell’iframe

e sicurezza

Quando si usa iframe bisogna fare molta attenzione perchè è un vettore d’attacco molto comune usato dai crackers per modificare la pagina web attraverso l’uso di codice malevolo.

Per questo motivo iframe è stato oggetto di notevoli aggiornamenti in termini di sicurezza.

Questo attenzione non significa che non dobbiamo usare iframe, dobbiamo solo fare un filo più di attenzione. Per minimizzare al minimo il potere d’attacco di eventuali malintenzionati possiamo prendere alcune precauzioni:

• Attraverso impostazioni specifiche del server possiamo decidere di negare completamente l’embedding del nostro documento.
• Incorporare solo se necessario
• Usare HTTPS
• Usare l’attributo sandbox di iframe (nella maggior parte dei casi basta solo l’attributo senza alcun valore).

Su quest’ultimo vorrei spendere qualche parola in più. Vero che nella maggior parte dei casi il solo uso di sandbox è più che sufficiente, ma cosa fa e quali sono alcuni dei valori disponibili? Vediamo.

sandbox permette di controllare le restrizioni applicate ad un contenuto incorporato con iframe. Il valore dell’attributo può essere vuoto (o assente) e ciò significa che tutte le restrizioni verranno applicate, altrimenti possiamo usare dei valori specifici separati da spazio per eliminarle.

Alcune delle restrizioni che possiamo rimuovere sono:

• allow-downloads: permette il download di risorse direttamente dall’iframe
• allow-forms: permette alla pagina nell’iframe di inviare un form
• allow-modals: permette alla pagina nell’iframe di usare alert, confirm, print e prompt (metodi di Window, oggetto disponibile in JavaScript)
• allow-popup: permette l’apertura di popup (anche link con target _blank)
• allow-scripts: permette alla pagina di eseguire script
• allow-top-navigation: ricordi _top che permette di dare istruzioni alla pagina principale (quella che contiene l’iframe) di navigare altrove? Ecco questo gli permette di farlo, senza non succederebbe nulla.

Il consiglio rimane quindi quello di usare sandbox e di eliminare delle restrizioni solo estremamente e assolutamente necessario.