HTML5 - Audio e video
Le funzionalità HTML5 includono il supporto nativo di audio e video senza la necessità di Flash.
I tag HTML5 <audio> e <video> semplificano l'aggiunta di contenuti multimediali a un sito Web. Devi impostaresrc attributo per identificare la sorgente multimediale e includere un attributo di controllo in modo che l'utente possa riprodurre e mettere in pausa il supporto.
Incorporamento di video
Ecco la forma più semplice per incorporare un file video nella tua pagina web:
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>L'attuale bozza di specifica HTML5 non specifica quali formati video i browser dovrebbero supportare nel tag video. Ma i formati video più comunemente usati sono:
Ogg - File Ogg con codec video Thedora e codec audio Vorbis.
mpeg4 - File MPEG4 con codec video H.264 e codec audio AAC.
È possibile utilizzare il tag <source> per specificare il supporto insieme al tipo di supporto e molti altri attributi. Un elemento video consente più elementi sorgente e il browser utilizzerà il primo formato riconosciuto -
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>Questo produrrà il seguente risultato:
Specifica degli attributi video
Il tag video HTML5 può avere una serie di attributi per controllare l'aspetto grafico e varie funzionalità del controllo:
| Sr.No. | Attributo e descrizione |
|---|---|
| 1 | autoplay Questo attributo booleano, se specificato, inizierà automaticamente la riproduzione del video non appena può farlo senza fermarsi per completare il caricamento dei dati. |
| 2 | autobuffer Questo attributo booleano, se specificato, inizierà automaticamente il buffering del video anche se non è impostato per la riproduzione automatica. |
| 3 | controls Se questo attributo è presente, consentirà all'utente di controllare la riproduzione video, inclusi volume, ricerca e pausa / ripresa della riproduzione. |
| 4 | height Questo attributo specifica l'altezza dell'area di visualizzazione del video, in pixel CSS. |
| 5 | loop Questo attributo booleano, se specificato, consentirà al video di tornare automaticamente all'inizio dopo aver raggiunto la fine. |
| 6 | preload Questo attributo specifica che il video verrà caricato al caricamento della pagina e pronto per essere eseguito. Ignorato se è presente la riproduzione automatica. |
| 7 | poster Questo è l'URL di un'immagine da mostrare fino a quando l'utente non gioca o cerca. |
| 8 | src L'URL del video da incorporare. Questo è facoltativo; puoi invece utilizzare l'elemento <source> all'interno del blocco video per specificare il video da incorporare. |
| 9 | width Questo attributo specifica la larghezza dell'area di visualizzazione del video, in pixel CSS. |
Incorporamento dell'audio
HTML5 supporta il tag <audio> che viene utilizzato per incorporare contenuto audio in un documento HTML o XHTML come segue.
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>L'attuale bozza di specifica HTML5 non specifica quali formati audio i browser dovrebbero supportare nel tag audio. Ma i formati audio più comunemente usati sonoogg, mp3 e wav.
Puoi utilizzare <source & ggt; tag per specificare il supporto insieme al tipo di supporto e molti altri attributi. Un elemento audio consente più elementi sorgente e il browser utilizzerà il primo formato riconosciuto -
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src = "/html5/audio.ogg" type = "audio/ogg" />
<source src = "/html5/audio.wav" type = "audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>Questo produrrà il seguente risultato:
Specifica dell'attributo audio
Il tag audio HTML5 può avere una serie di attributi per controllare l'aspetto grafico e varie funzionalità del controllo -
| Sr.No. | Attributo e descrizione |
|---|---|
| 1 | autoplay Questo attributo booleano se specificato, l'audio inizierà automaticamente a essere riprodotto non appena può farlo senza fermarsi per completare il caricamento dei dati. |
| 2 | autobuffer Questo attributo booleano se specificato, l'audio inizierà automaticamente il buffering anche se non è impostato per la riproduzione automatica. |
| 3 | controls Se questo attributo è presente, consentirà all'utente di controllare la riproduzione audio, inclusi volume, ricerca e pausa / ripresa della riproduzione. |
| 4 | loop Questo attributo booleano, se specificato, consentirà all'audio di tornare automaticamente all'inizio dopo aver raggiunto la fine. |
| 5 | preload Questo attributo specifica che l'audio verrà caricato al caricamento della pagina e pronto per essere eseguito. Ignorato se è presente la riproduzione automatica. |
| 6 | src L'URL dell'audio da incorporare. Questo è facoltativo; puoi invece utilizzare l'elemento <source> all'interno del blocco video per specificare il video da incorporare. |
Gestione degli eventi multimediali
Il tag audio e video HTML5 può avere una serie di attributi per controllare varie funzionalità del controllo utilizzando JavaScript:
| S.No. | Descrizione dell'evento |
|---|---|
| 1 | abort Questo evento viene generato quando la riproduzione viene interrotta. |
| 2 | canplay Questo evento viene generato quando sono disponibili dati sufficienti per la riproduzione del supporto. |
| 3 | ended Questo evento viene generato al termine della riproduzione. |
| 4 | error Questo evento viene generato quando si verifica un errore. |
| 5 | loadeddata Questo evento viene generato quando il primo fotogramma del supporto ha terminato il caricamento. |
| 6 | loadstart Questo evento viene generato quando inizia il caricamento del supporto. |
| 7 | pause Questo evento viene generato quando la riproduzione è in pausa. |
| 8 | play Questo evento viene generato quando la riproduzione inizia o riprende. |
| 9 | progress Questo evento viene generato periodicamente per informare lo stato di avanzamento del download del supporto. |
| 10 | ratechange Questo evento viene generato quando la velocità di riproduzione cambia. |
| 11 | seeked Questo evento viene generato quando viene completata un'operazione di ricerca. |
| 12 | seeking Questo evento viene generato quando inizia un'operazione di ricerca. |
| 13 | suspend Questo evento viene generato quando il caricamento del supporto viene sospeso. |
| 14 | volumechange Questo evento viene generato quando il volume dell'audio cambia. |
| 15 | waiting Questo evento viene generato quando l'operazione richiesta (come la riproduzione) viene ritardata in attesa del completamento di un'altra operazione (come una ricerca). |
Di seguito è riportato l'esempio che consente di riprodurre il video dato:
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function PlayVideo() {
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>
<body>
<form>
<video width = "300" height = "200" src = "/html5/foo.mp4">
Your browser does not support the video element.
</video>
<br />
<input type = "button" onclick = "PlayVideo();" value = "Play"/>
</form>
</body>
</html>Questo produrrà il seguente risultato:
Configurazione dei server per il tipo di supporto
La maggior parte dei server per impostazione predefinita non serve supporti Ogg o mp4 con i tipi MIME corretti, quindi è probabile che sia necessario aggiungere la configurazione appropriata per questo.
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4