Come funziona l'elemento video HTML5? | Video HTML

Che cos'è HTML5?

HTML5 è l'ultima versione di Hypertext Markup Language (HTML), un linguaggio di codifica per la formattazione dei contenuti su Internet. Tutte le pagine web utilizzano HTML per indicare ai browser come visualizzare i propri contenuti. Rispetto alle versioni precedenti di HTML, HTML5 offre diverse funzionalità aggiuntive, tra cui la possibilità di aggiungere dei video a una pagina. Altre funzionalità di HTML5 includono il supporto per la grafica SVG, i tag per definire la navigazione in un sito e i tag di intestazione e piè di pagina.

Come funziona l'elemento video di HTML5?

L'elemento video di HTML5 istruisce il browser a caricare un file video da un'altra origine specificando l'ubicazione del file. Il processo è simile al modo in cui browser carica un file immagine (l'immagine non è memorizzata nel file HTML: il browser la recupera da un'altra posizione). È possibile inoltre includere attributi quali la larghezza e l'altezza, in modo da indicare al browser come visualizzare il video. L'inserimento di un codice di markup consentirà al browser di sapere dove posizionare il video nella pagina.

Il tag video HTML5 è <video> e il tag viene chiuso, come altri elementi HTML, con </video>.

Tra questi tag, il tag <source> indica la posizione del file. All'interno di questo tag, la sorgente video (src) sia il tipo di file (type) sono indicati come segue:

<video> <source src="example.mp4" type="video/mp4">
</video>

All'interno del tag <video> è possibile inserire anche i seguenti attributi:

• Larghezza: specifica la larghezza del video in pixel. Il numero di pixel va racchiuso tra virgolette: width="370".
• Altezza: specifica l'altezza del video. Il funzionamento è simile all'attributo della larghezza.
• Riproduci, metti in pausa, volume: questi controlli consentono all'utente di controllare la riproduzione video. Aggiungi controls al tag <video> per includerli.

È possibile inserire delle origini alternative per il video tra i tag <video>, qualora un browser non supporti il primo formato del file. I browser utilizzano sempre la prima origine indicata.

Tra i tag <video> è possibile infine inserire del testo, che viene visualizzato solo se il browser dell'utente non supporta i video HTML5.

Mettendo tutto insieme, il codice HTML5 per un video incorporato apparirà come segue:

<video controls width="370" height="130">
  <source src="example.mp4" type="video/mp4">
  <source src="alternate-example.webm" type="video/webm">
Il tuo browser non supporta i video HTML5.
</video>

All'interno dell'elemento video è possibile inserire una serie ulteriore di attributi, come autoplay (per riprodurre il video non appena si carica la pagina, loop (per riprodurre i video a ciclo continuo), muted (per silenziare i video) e poster (per mostrare un'immagine prima del caricamento del video). Mozilla dispone di un'eccellente documentazione su questi attributi.

Quale protocollo di streaming viene utilizzato con HTML5?

HTML5 non è di per sé un protocollo di streaming. I siti web creati con HTML5 possono utilizzare diversi protocolli di streaming per riprodurre video, tra cui HTTP Live Streaming (HLS) e MPEG-DASH. Questi protocolli vengono configurati nel lato server, non nel codice di markup HTML.

Tutti i browser supportano HTML5?

Tutti i principali browser supportano HTML5, e ciò vuol dire che sono in grado di interpretare i tag HTML5 non inclusi nelle versioni precedenti di HTML. Tuttavia, non tutti i browser supportano l'intero set di funzionalità offerto da HTML5. Gli sviluppatori devono tenere presente che alcuni utenti potrebbero disporre di una versione obsoleta di un dato browser, non in grado di interpretare l'elemento video HTML5.

Prima di HTML5, come era possibile incorporare contenuti video in un sito web?

Prima del rilascio di HTML5, avvenuto nel 2008, i video venivano generalmente incorporati tramite il plug-in Adobe Flash. HTML5 ha permesso agli sviluppatori di inserire elementi video nelle pagine web utilizzando pochi tag HTML, eliminando la necessità di un plugin. Di conseguenza, Flash è diventato meno necessario e Adobe ha interrotto definitivamente il supporto al software il 31 dicembre 2020.

Oggi, la maggior parte degli utenti può riprodurre video in streaming senza caricare plug-in aggiuntivi nei browser, e gli sviluppatori possono utilizzare diversi metodi per incorporare dei video senza dover ricorrere a un plug-in. Uno dei metodi più diffusi è l'elemento video HTML5.

Cos'è un plug-in del browser?

Un plug-in per browser è un software che aggiunge una funzionalità a un browser che non era precedentemente inclusa. In passato, i browser non avevano la possibilità di riprodurre video. I plug-in di terze parti, come Adobe Flash, hanno contribuito a colmare questa lacuna.

I plug-in possono costituire una minaccia per la sicurezza. Essi presentano infatti un'ulteriore superficie d'attacco, ovvero un modo aggiuntivo per aggressori esterni di compromettere una sessione di navigazione. Questa superficie si somma a quelle rappresentate dal browser e dal sito web. Inoltre, i plug-in possono rallentare la funzionalità della pagina. Affidarsi ai plug-in significa che più componenti software devono funzionare correttamente e rapidamente per caricare una data pagina, non solo uno.

Se un video è incorporato nativamente, cosa possibile in HTML5, si caricherà più velocemente. Anche evitare l'uso di un plug-in è un accorgimento più sicuro.

Come si incorporano i video su Cloudflare Stream?

Cloudflare Stream è una piattaforma video on demand che combina codifica, archiviazione, distribuzione e riproduzione video. Consulta la documentazione di Cloudflare Stream per scoprire come caricare file video e incorporarli nelle pagine web. Oppure, scopri di più su Cloudflare Stream prima di iniziare.