HTML5 introduce un supporto integrato per i media attraverso gli elementi <audio> e <video>, offrendo la capacità di integrare facilmente media in documenti HTML

Incorporare i media

Integrare i media nel documento HTML è banale:

<video src="https://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Your browser does not support the <code>video</code> element.
</video>

Questo esempio riproduce un video d'esempio, con controlli di riproduzione, dal sito web Theora.

Ecco un esempio per incorporare audio nel tuo documento HTML

<audio src="/test/audio.ogg">
<p>Your browser does not support the audio element.</p>
</audio>

L'attributo src può essere una URL del file audio o il percorso al file sul sistema locale.

<audio src="audio.ogg" controls autoplay loop>
<p>Your browser does not support the audio element </p>
</audio>

Questo esempio di codice utilizza gli attributi dell'elemento <audio>:

controls : Visualizza di controlli standard di HTML5 per l'audio su pagina web.
autoplay : Rende automatica la riproduzione dell'audio.
loop : Rende automatica la ripetizione (ciclo) dell'audio.

<audio src="audio.mp3" preload="auto" controls></audio>

L'attributo preload è utilizzato nell'elemento audio per bufferizzare file di grandi dimensioni:

"none" non bufferizza il file
"auto" bufferizza il media
"metadata" bufferizza solo i metadati del file

Possono essere specificati più file sorgenti utilizzando l'elemento <source> al fine di fornire codifiche audio e video differenti per differenti browser. Per esempio:

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

In tal modo è riprodotto il file Ogg nei browser che supportano lo supportano. Se non supportato, il browser utilizza il file MPEG-4. Vedi anche la lista dei formati supportati dagli elementi audio e video nei differenti browser.

E' anche possibile specificare quali codec sono necessari ai media; ciò permette al browser di prendere decisioni più intelligenti:

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
  Your browser does not support the <code>video</code> element.
</video>

Nell'esempio è specificato che il video utilizza i codec Dirac e Speex. Se il browser supporta Ogg, ma non i codec specificati, il video non sarà caricato.

SE l'attributo type non è specificato, il tipo del media è recuperato dal server e controllato per verificare che il browser possa gestirlo; se non può essere riprodotto, è controllata la sorgente successiva. Se nessuno degli elementi sorgente specificati può essere utilizzato, un evento di errore è inviato all'elemento video. Se è specificato l'attributo type, questi è confrontato con i tipi riproducibili dal browser e se non riconosciuto, il server non viene interrogato; invece, la sorgente successiva è immediatamente controllata.

Vedere eventi dei media per un elenco completo degli eventi associati con la riproduzione dei media. Per dettagli sui formati dei media supportati dai differenti browser, vedere formati dei media supportati degli elementi audio e video.

Controllare la riproduzione dei media

Una volta incorporato il media nel documento HTML utilizzando i nuovi elementi, è possibile controllarli tramite codice JavaScript. Per esempio, per avviare (o riavviare) la riproduzione, puoi fare:

var v = document.getElementsByTagName("video")[0];
v.play();

La prima linea ottiene il primo elemento video nel documenti, e il secondo chiama il metodo play() dell'elemento, come definitto nell'interfaccia nsIDOMHTMLMediaElement che è utilizzata per implementare gli elementi dei media.

Controlalre un riproduttore audio in HTML5 per riprodurre, porre in pausa, aumentare e diminuire il volume utilizzando Javascript è semplice.

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">Play the Audio</button>
  <button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
  <button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
  <button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>

Fermare il download del media

Se fermare la riproduzione del media è tanto semplice quanto chiamare il metodo pause() dell'elemento, il browser continua a scaricare il media finché l'elemento non è elimitao tramite il garbage collector.

Segue un trucco per fermare immediatamente il download:

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src = "";

Impostando l'attributo src dell'elemento del media a una stringa vuota, è distrutto il decoder interno dell'elemento, che ferma il download della rete.

Cercare attraverso i media

Gli elementi per i media forniscono il supporto per spostare la posizione corrente di riproduzione ad un punto specificato nel contenuto del media. Ciò è fatto impostando il valore della proprietà currentTime dell'elemento; vedere HTMLMediaElement per ulteriori dettagli sulle proprietà dell'elemento. Settare semplicemente il valore del tempo, in secondi, al punto in cui si desidera far continuare la riproduzione.

E' possibile utilizzare la proprietà seekable per determinare l'intervallo dei media che è attualmente disponibile per la ricerca. Questi ritorna un oggetto TimeRanges che elenca gli intervalli di tempo in cui cercare.

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();  // Returns the starting time (in seconds)
mediaElement.seekable.end();    // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end();      // Returns the number of seconds the browser has played

Specificare l'intervallo di riproduzione

When specifying the URI of media for an <audio> or <video> element, you can optionally include additional information to specify the portion of the media to play. To do this, append a hash mark ("#") followed by the media fragment description.

A time range is specified using the syntax:

#t=[starttime][,endtime]

The time can be specified as a number of seconds (as a floating-point value) or as an hours/minutes/seconds time separated with colons (such as 2:05:01 for 2 hours, 5 minutes, and 1 second).

A few examples:

https://foo.com/video.ogg#t=10,20: Specifies that the video should play the range 10 seconds through 20 seconds.
https://foo.com/video.ogg#t=,10.5: Specifies that the video should play from the beginning through 10.5 seconds.
https://foo.com/video.ogg#t=,02:00:00: Specifies that the video should play from the beginning through two hours.
https://foo.com/video.ogg#t=60: Specifies that the video should start playing at 60 seconds and play through the end of the video.

Gecko 9.0 note

(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)

The playback range portion of the media element URI specification was added to Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6). At this time, this is the only part of the Media Fragments URI specification implemented by Gecko, and it can only be used when specifying the source for media elements, and not in the address bar.

Fallback options

HTML included between, for example, the opening and closing tags of media elements is processed by browsers that don't support HTML5 media. You can take advantage of this fact to provide alternative fallback media for those browsers.

This section provides two possible fallback options for video. In each case, if the browser supports HTML5 video, that is used; otherwise, the fallback option is used.

Using Flash

You can use Flash to play a Flash format movie if the <video> element isn't supported:

<video src="video.ogv" controls>
    <object data="flvplayer.swf" type="application/x-shockwave-flash">
      <param value="flvplayer.swf" name="movie"/>
    </object>
</video>

Note that you shouldn't include classid in the object tag in order to be compatible with browsers other than Internet Explorer.

Playing Ogg videos using a Java applet

There's a Java applet called Cortado that you can use as a fallback to play Ogg videos in browsers that have Java support but don't support HTML5 video:

<video src="my_ogg_video.ogg" controls width="320" height="240">
  <object type="application/x-java-applet" width="320" height="240">
     <param name="archive" value="cortado.jar">
     <param name="code" value="com.fluendo.player.Cortado.class">
     <param name="url" value="my_ogg_video.ogg">
     <p>You need to install Java to play this file.</p>
  </object>
</video>

If you do not create an alternate child element of the cortado object element, such as the <p> element above, FireFox 3.5 installations that handle the video natively but do not have Java installed will incorrectly inform the user that they need to install a plugin to view content on the page.

(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

Error handling

Starting in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), error handling has been revised to match the latest version of the HTML5 specification. Instead of the error event being dispatched to the media element itself, it now gets delivered to the child <source> elements corresponding to the sources resulting in the error.

This lets you detect which sources failed to load, which may be useful. Consider this HTML:

<video>
<source id="mp4_src"
  src="video.mp4"
  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</source>
<source id="3gp_src"
  src="video.3gp"
  type='video/3gpp; codecs="mp4v.20.8, samr"'>
</source>
<source id="ogg_src"
  src="video.ogv"
  type='video/ogg; codecs="theora, vorbis"'>
</source>
</video>

Since Firefox doesn't support MP4 and 3GP due to their patent-encumbered nature, the <source> elements with the IDs "mp4_src" and "3gp_src" will receive error events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources aren't tried at all.

Detecting when no sources have loaded

To detect that all child <source> elements have failed to load, check the value of the media element's networkState attribute. If this is HTMLMediaElement.NETWORK_NO_SOURCE, you know that all the sources failed to load.

If at that point you add another source by inserting a new <source> element as a child of the media element, Gecko attempts to load the specified resource.

HTML	Audio/Video Canvas WebGL SVG MathML WebForms AppCache Microformats SemanticTags
JavaScript	Storage IndexedDB WebSockets WebWorkers Events Drag/Drop ProtocolHandler Geolocation Focus
CSS	NewSelectors Typography Visual Effects

Utilizzare audio e video di HTML5