quando il video va on line

Streaming, codifica, protocolli e reti

  • Aumenta dimensione caratteri
  • Dimensione caratteri predefinita
  • Diminuisci dimensione caratteri
home html5

HTML 5. Un possibile futuro per il video on line

E-mail Stampa PDF

<video> | Rudimenti di HTML5 | Elementi semantici | Un video in HTML5

 

Visita la pagina realizzata in HTML5

Abbiamo caricato la pagina in HTML5 all'url http://cacinski.it/H5/video_.html che risiede su un server diverso da quello che ospita questo sito, che  però supporta HTML5.

Vai direttamente al codice in HTML5

HTML5 rappresenta l’evoluzione di HTML 4.01, il linguaggio di markup con cui sono costruite le pagine web. Tra le novità di HTML5 c’è l’introduzione dell’elemento <video> che permette di inserire un file video in una pagina web con un codice semplificato simile a quello d’inserimento di un’immagine in HTML 4.01.

Le direttive del W3C[1], che gli sviluppatori dei browser stanno progres­sivamente adottando e sviluppando, vanno verso modalità standard che non prevedono l’utilizzo di plug-in.

Quanto descritto nei capitoli precedenti fotografa lo stato attuale del video on line, mentre siamo convinti che HTML5 rappresenti il futuro, dove le modalità per pubblicare un video siano basate su open standard accessibili a tutti e a cui tutti possano contribuire. L’annuncio fatto di recente da YouTube della disponibilità di una versione beta in HTML5 del proprio sito, insieme al fatto che iPhone e iPad supportano HTML5 e hanno smesso di supportare Flash Video, sono le migliori testimonianze in questo senso.

I lavori su HTML5 sono cominciati nel 2004, ad opera del Web Hypertext Application Technology Working Group (WHATWG[2]) un gruppo di web designer indipendenti. Nel 2007 le specifiche sviluppate dal WHATWG furono adottate dal W3C, World Wide Web Consortium come punto di partenza per il nuovo Working Group su HTML5.

HTML5 non rinnega, però, HTML 4, anzi ne migliora le caratteristiche applicative. Tutti i tag definiti in HTML 4 sono infatti supportati e a questi sono stati aggiunti nuovi elementi semantici.

Il miglior modo per utilizzare ed avvantaggiarsi nell’uso di HTML5 è di considerarlo non in toto, ma come la somma di singole caratteristiche che possono essere utilizzate anche in maniera indipendente. Questo perché siamo in una fase di transizione e non tutti i browser attualmente in uso supportano[3] HTML5. Sarebbe meglio dire che escluso il solo Internet Explorer, che lo ignora, non tutti i browser supportano tutto di HTML5. Così mentre Explorer nella release 9 ha promesso di aprirsi ad alcune delle applicazioni di HTML5, Firefox, Safari, Opera e Google Chrome già supportano HTML5 per quanto riguarda canvas, geolocation, video, archiviazione in locale e così via.

 


<video>

Per caricare nelle pagine web un video non occorre, come già detto,  scaricare un plug-in, ma utilizzare una procedura simile a quelle per le immagini in HTML 4: infatti come il codice per richiamare un’immagine in HTML 4 è

<img src="/url_immagine" />

così in HTML5 il codice (nella maniera più semplificata possibile) per richiamare un video è

<video src="/url_video"></video>

L’elemento <video> è stato quindi progettato per essere utilizzato senza alcun script aggiuntivo e, fatto peculiare, può accettare anche più copie, in formati di file diversi, dello stesso video: in questo modo il browser riprodurrà quello che riesce a supportare.

 


Rudimenti di HTML5

Questo non è un manuale di HTML5. Non staremo qui ad illustrare nel dettaglio le ragioni delle varie innovazioni. Piuttosto le registreremo, confronteremo le differenze nel codice e lo utilizzeremo. Cominciamo con il ribadire che HTML 4.01 è perfettamente letto in HTML5, per cui non occorre dimenticare quanto già si conosce. Sia in HTML 4.01 sia in HTML5 una pagina è formata dalle sezioni  <head> e <body>, ma anche dalla dichiarazione DOCTYPE e dall’elemento root, l’elemento radice. Vediamo le differenze.

 

DOCTYPE
Per capire la versione HTML utilizzata da una pagina Web, i browser leggono la dichiarazione DOCTYPE che è posta prima dell´apertura della sezione <head>. La dichiarazione non ha alcun effetto sulla visua­lizzazione della pagina ed indica l´insieme di regole alle quali ci si è attenuti nella costruzione del documento.

Questa è una dichiarazione DOCTYPE classica in HTML 4.01:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

HTML5, invece, semplifica e presenta questo tipo di DOCTYPE

<!DOCTYPE html>

 

Root element
Anche il root element, l’elemento radice, da cui, in un linguaggio nidificato come HTML, derivano tutti gli elementi (detto anche l’elemento documento) è semplificato:

HTML 4.01

<html xmlns="http://www.w3.org/1999/
xhtml"
lang="en" xml:lang="en">

HTML5

<html lang="en">

Viene conservato solo l’attributo relativo alla lingua scelta, rinunciando alla doppia definizione, insieme ai retaggi non più in uso di XHTML.


<head>
L'elemento head, come è noto, contiene informazioni sul documento come il titolo, il nome dell'autore, le parole chiave (utili per il motore di ricerca) e tutta una serie di (meta) dati e di link (fra cui quelli ai fogli di stile che sono gli unici che mostreremo) che non fanno parte del contenuto del documento.

HTML 4.01

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>il mio sito in HTML5</title><link rel="stylesheet" href="/style-original.css" />
</head>

HTML5

<head>
<meta charset="utf-8" />
<title>il mio sito in HTML5</title><link rel="stylesheet" href="/style-original.css" />
</head>

Non è difficile notare che di tutto l’elemento <meta> viene lasciato soltanto con l’attributo charset e il relativo valore “utf-8”. Quest’ultimo indica il tipo di codifica dei caratteri, riconosciuta da tutti i tipi di browser.

Per quanto riguarda il link ai fogli di stile, in HTML5 viene perduta la specifica/css perché ritenuta pleonastica dal momento che nel web esiste un solo tipo di linguaggio per i fogli di stile. Quindi, perché specificarlo?[4]

Riepilogando, una pagina in HTML5 si presenta così:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>il mio sito in HTML5</title>
<script src="/modernizr.min.js"></script>

<link rel="stylesheet" href="/style-original.css" />
</head>
</body>
</html>

In questo codice di un’ipotetica pagina HTML5 abbiamo evidenziato la presenza dello script: <script src="/modernizr.min.js"></script> poiché, finora, nel confronto con HTML 4.01 non era mai apparsa.

Modernizr si avvia automaticamente ed è una library open source di JavaScript che da un lato  supporta molte delle caratteristiche di CSS3 e HTML5, dall’altro mantiene un buon livello di controllo rispetto ai vecchi browser che non li possono ancora sostenere.

 


Elementi semantici

HTML5 introduce inoltre nuovi elementi semantici. Eccoli in breve:

  • <header>: sezione della pagina in cui inserire la testata del sito web, ma anche un logo o un claim.
  • <hgroup>: contenitore per la gestione dei titoli e dei sottotitoli.
  • <nav>: sezione della pagina in cui sono inseriti i link principali di navigazione
  • <section>: area in cui inserire del contenuto generico.
  • <article>: sezione della pagina indipendente, utilizzabile per articoli
  • <aside>: sezione della pagina collegata al sito e non obbligato­riamente al contenuto. Utile per una colonna posta a lato dell’argomento principale.
  • <footer>: sezione conclusiva della pagina in cui è possibile inserire informazioni del sito.
  • <time>: per la gestione di date ed orari.
  • <mark>: per evidenziare un termine.

Immaginiamo un documento molto semplice: con un header, un footer, una colonna con il contenuto principale e una barra laterale. In HTML 4.01 le varie sezioni del documento sarebbero così individuate:

In HTML5 invece

Riassumendo:

HTML 4.01

HTML5

<div id=”header”>

<header>

<div id=”sidebar”>

<aside>

<div id=”main_content”>

<section>

<div id=”footer”>

<footer>

I <div> sostituiti sarebbero stati comunque letti in HTML5. Si tratta di qualcosa di più di una semplice sostituzione: i nuovi elementi semantici definiscono più appropriatamente le sezioni della pagina e danno maggiore profondità al codice.

 

Un video in HTML5

Dopo aver presentato velocemente HTML5, andiamo alle caratteristiche dell’elemento <video>, sempre continuando nel confronto con HTML 4.01 e passiamo dalla teoria alla pratica pubblicando un video in una pagina di HTML5.

Prendiamo direttamente da YouTube.com, il codice del video Minibasket, Emozione, Scoperta, Gioco:

<object width="480" height="385"><param value="http://www.youtube.com/v/3cK10v0yA2w?fs=1&amp;hl=it_IT"></param><param value="true"></param><param value="always"></param><embed src="http://www.youtube.com/v/3cK10v0yA2w?fs=1&amp;hl=it_IT"allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Non è un codice di facile interpretazione, sicuramente. Inizia con l’elemento <object>, un contenitore generico che include il video in formato Flash. Poi l’elemento <embed> che duplica alcuni dei parametri dell’<object>.

Questo il codice per l’inserimento del file video in una pagina HTML5

<video width="320" height="240" preload controls>
<source src="/tappeto_prova.ogv"
type='video/ogg; codecs="theora, vorbis" '>
<source src="/tappeto_prova.m4v"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

poster="http://cacinski.it/H5/poster_tappeto.jpg"
</video>

L’elemento <video> apre e chiude la sezione di codice dedicata al file video. Gli attributi riguardano la larghezza (width), l’altezza (height) del formato del fotogramma, i comandi standard della schermata video (con l’attributo booleano controls) e lo stato in cui vogliamo trovare il video una volta caricata la pagina (preload: già caricato e pronto ad essere riprodotto. L’alternativa a preload è autoplay che riproduce in automatico il file video, mentre loop lo riproduce in continuazione).

I valori degli attribuiti sono tra virgolette "", ma potrebbero tranquillamente essere scritti senza (a patto che lo siano tutti).

Visita la pagina realizzata in HTML5.

L’elemento <source> ha una valenza precisa. Viene utilizzato quando di uno stesso file video se ne debbono mettere a disposizione del browser diversi formati. Il browser leggerà solo quello che riconosce e lo riprodurrà. Questo perché non tutti i browser riproducono tutti i formati di file e riconoscono diversi codec audio e video.

L’attributo src regge l’url del file, mentre l’attributo type (che rappresenta il MIME Type) specifica il formato del file (nel primo esempio OGG) e i codec usati, prima quello video e poi quello audio (type='video/ogg; codecs="theora, vorbis" '). Formato e codec rappresentano il valore dell’attributo type.

Per vedere realizzato in pratica quanto fin qui descritto click qui o sulla foto.


 

 


Note

[1] Il World Wide Web Consortium definisce gli standard per lo sviluppo del web http://www.w3.org [Torna su]

[2] http://www.whatwg.org/ [Torna su]

[3] Collegandosi al sito http://html5test.com/ è possibile capire quanto il proprio browser supporti HTML5 [Torna su]

[4] Per tutti gli altri tipi di link che possono apparire in una sezione <head> consigliamo l’approfondito capitolo  Friend & (Link Relations) in Mark Pilgrim, Dive Into HTML5, 2009-10 http://www.diveintohtml5.org/semantics.html [Torna su]