Utilizziamo i cookie per analisi, contenuti personalizzati e pubblicità.

Queste informazioni possono essere condivise con i nostri partner per fornire i servizi necessari.

Approfondisci

AccettoRifiuto

Dall'archivio articoli > HTML5

Multimedialità audio e video con HTML5

di Cristian CiveraCristian Civera, in HTML5,


Questo articolo è tratto dal capitolo 5 ("Audio e video in HTML5") del libro HTML5 Espresso, di Daniele Bochicchio, Cristian Civera, Matteo Casati, Riccardo Golia, Stefano Mostarda (Hoepli, 2011)

Acquista subito la tua copia ad un prezzo vantaggioso!

Grazie alla sempre più ampia diffusione di internet e alla disponibilità di banda, consumare contenuti multimediali è, ormai, all'ordine del giorno. Oggi, questa operazione è possibile solo attraverso plug-in, come Adobe Flash o Microsoft Silverlight, che sono in grado di decodificare, anche con accelerazione hardware, i più diffusi formati audio e video disponibili.

HTML5 viene incontro, quindi, a questa necessità, introducendo due nuovi tag, di nome audio e video, che sebbene siano ancora in corso di definizione per quanto concerne alcuni aspetti, possono essere usati per sviluppare già un player multimediale, che possa sostituirsi quasi in tutto all'uso dei plug-in.

I tag audio e video

Come abbiamo anticipato, in HTML5 abbiamo a disposizione due nuovi tag molto simili nell'utilizzo, ma che differiscono per il fatto che uno, il tag audio, ha il compito di riprodurre un contenuto audio, mentre l'altro, il tag video, ha il compito di riprodurre video.

Contrariamente a quanto possiamo pensare, anche il tag audio produce un'interfaccia, perché entrambi i tag possono avere la barra di controllo, per agire sul contenuto in ascolto o in visualizzazione. Questi tag vanno, quindi, inseriti all'interno della pagina, nel punto in cui lo riteniamo opportuno, e rientrano nel DOM della stessa, interagendo e influenzando gli altri elementi presenti.

Nell'esempio 5.1 possiamo vedere come usare i due tag per inserire due contenuti audio e video all'interno della nostra pagina.

Esempio 5.1
<!DOCTYPE html>
<html>
  <head>
    <title>HTML5: audio e video</title>
  </head>
  <body>
    <h1>Audio</h1>
    <audio src="test.mp3" controls />

    <h1>Video</h1>
    <video src="test.mp4" controls>
      Il tuo browser non supporta i video
    </video>
  </body>
</html>

L'attributo src ci permette di indicare con un URI (nell'esempio una risorsa locale) il riferimento al contenuto multimediale da riprodurre. L'attributo controls indica di visualizzare i controlli standard offerti dal browser per la classica gestione di play, pause, seek e volume, di cui ogni contenuto multimediale normalmente necessita. Da notare, infine, che all'interno del tag possiamo indicare il markup da visualizzare nel caso il browser non dovesse supportare HTML5. Nella figura 5.1 possiamo vedere il rendering standard offerto da Internet Explorer 9, utilizzato in questo caso perché supporta i file MP4.

Figura 5.1 - Tag audio e video con i controlli predefiniti di IE9.

Tag audio e video con i controlli predefiniti di IE9

Per il tag audio la mancata indicazione dell'attributo controls comporta l’avvio della traccia audio, mentre per il tag video la riproduzione non risulta controllabile, se non sfruttando il menu contestuale del browser. La barra di controllo è, comunque, visibile solo passando con il mouse sul video visualizzato.

4 pagine in totale: 1 2 3 4
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

Top Ten Articoli

Articoli via e-mail

Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!

In primo piano

.NET Conference Italia 2023 - Milano e Online

Le novità di .NET 7 e C# 11

Le novità in ASP.NET Core e Blazor con .NET 7

Le novità di Entity Framework (Core) 7

I più letti di oggi

In evidenza

Misc