Multimedialità audio e video con 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.
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.
Contenuti dell'articolo
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare politiche di resiliency con Azure Container App
Hosting di componenti WebAssembly in un'applicazione Blazor static
Creare una libreria CSS universale: Clip-path
Utilizzare il trigger SQL con le Azure Function
Proteggere le risorse Azure con private link e private endpoints
Gestione dell'annidamento delle regole dei layer in CSS
Disabilitare automaticamente un workflow di GitHub
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Creare un'applicazione React e configurare Tailwind CSS
Migliorare i tempi di risposta di GPT tramite lo streaming endpoint in ASP.NET Core
Effettuare il refresh dei dati di una QuickGrid di Blazor
Top Ten Articoli
- Realizzare una Progressive Web Application con Blazor e ASP.NET Core
di Giampaolo Tucci - Gestire le chiamate a servizi esterni in ASP.NET Core e Blazor tramite Polly
di Morgan Pizzini - Usare gRPC come infrastruttura per i nostri servizi web
di Morgan Pizzini - Abilitare e gestire il prerendering nelle applicazioni Blazor WebAssembly
di Marco De Sanctis - Creare API GraphQL con ASP.NET Core e HotChocolate
di Moreno Gentili - Le novità di Blazor in .NET 6.0
di Morgan Pizzini - Blazor e il pattern Model-View-ViewModel
di Giampaolo Tucci - Le novità in ASP.NET Core e Blazor con .NET 7
di Morgan Pizzini - Introduzione a Blazor WebAssembly
di Marco De Sanctis, Moreno Gentili - Le novità di ASP.NET Core 5
di Marco De Sanctis
Articoli via e-mail
Iscriviti alla nostra newsletter nuoviarticoli per ricevere via e-mail le notifiche!
In primo piano
I più letti di oggi
In evidenza
- Eseguire script pre e post esecuzione di un workflow di GitHub
- Creare una libreria CSS universale: Cards
- Migliorare l'organizzazione delle risorse con Azure Policy
- Effettuare il log delle chiamate a function di GPT in ASP.NET Web API
- Leggere la posta usando il protocollo IMAP tramite la libreria MailKit
- Eseguire una ricerca avanzata per recuperare le issue di GitHub
- Creare una libreria CSS universale: Clip-path
- Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database