HTML5 introduceert ingebouwde media ondersteuning via de <audio> en <video> elementen, waarmee het mogelijk wordt om op een eenvoudige manier media in te sluiten in HTML documenten.

Media insluiten

Het insluiten van media in uw HTML document stelt niet zoveel voor:

<video src="https://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Uw browser ondersteunt het element <code>video</code> niet.
</video>

Dit voorbeeld speelt een sample video van de Theora website inclusief controls voor het afspelen.

En hier is een voorbeeld van het inbedden van een audio element in uw HTML document.

<audio src="/test/audio.ogg">
<p>Het audio element wordt niet door uw browser ondersteund.</p>
</audio>

The src attribuut bevat een URL van een geluidsbestand of een pad naar een lokaal geluidsbestand.

<audio src="audio.ogg" controls autoplay loop>
<p>Het audio element wordt niet door uw browser ondersteund.</p>
</audio>

Dit voorbeeld van de code gebruikt attributen van het <audio> element:

controls : Toont de standaard HTML5 controls ten behoeve van audio op de webpagina.
autoplay : Zorgt ervoor dat het bestand automatisch afspeelt.
loop : Zorgt ervoor dat het bestand herhaalt wordt.

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

Het preload attribuut wordt gebruikt in een audio element om grote bestanden te bufferen. U kunt hierbij 3 waarden gebruiken:

"none" maakt dat er geen buffering wordt gebruikt
"auto" buffers het mediabestand
"metadata" buffers alleen de metagegevens van het bestand

Meerdere bronbestanden kunnen vastgelegd worden met behulp van het <source> element om verschillende formaten in verschillende browsers te ondersteunen voor geluid of beeld. Bijvoorbeeld:

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Het <code>video</code> element wordt niet ondersteund door uw browser.
</video>

In dit voorbeeld wordt het Ogg-bestand afgespeeld in browsers die Ogg ondersteunen. Als de browser dat niet doet, wordt automatisch het MPEG-4-bestand gebruikt. Kijk ook naar de lijst met media formaten die ondersteund worden door de audio en video elementen in de diverse browsers.

U kunt ook opgeven welke codes het mediabestand vereist; dit maakt het mogelijk voor de browser om nog intelligentere beslissingen te nemens:

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
  Het <code>video</code> element wordt niet ondersteund door uw browser.
</video>

We hebben hier vastgelegd dat deze via de Dirac en Speex codes gebruikt. Als de browser wel Ogg ondersteund, maar niet deze codes dan zal de video niet laden.

Wanneer het type attribuut niet gespecificeerd is dan wordt het mediatype van de server gehaald en er wordt gecontroleerd of de browser er mee om kan gaan; als het niet weergegeven kan worden, zal de volgende source gecontroleerd worden. Wanneer niet een van de source elementen gebruik kan worden, wordt een error gebeurtenis naar het video element verzonden. Wanneer het type attribuut vastgelegd is, wordt deze vergeleken met de types die de browser kan afspelen en wanneer het niet herkend wordt, zal direct volgende source gecontroleerd worden. Er wordt dan dus niets via de server opgehaald of gecontroleerd.

Bekijk ook Media gebeurtenissen voor een complete lijst van gebeurtenissen die die aan het afspelen van media gekoppeld kunnen worden. Voor details van media formaten die ondersteund worden door de diverse browsers bekijk Media formaten die ondersteund worden door de audio en video elementen.

Het afspelen van media

Als je eenmaal de media hebt ingebed in het HTML document met de nieuwe elementen kun je ze programma-technisch gaan besturen met JavaScript code. Een voorbeeld: om het afspelen te starten of the herstarten, kun je het volgende doen:

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

De eerste regel haalt het eerste video-element van het document op en de tweede regel roept de play() methode, zoals deze gedefinieerd is in de nsIDOMHTMLMediaElement interface die gebruikt wordt om media-element te implementeren.

Het besturen van een HTML5 audio element om af te spelen, te pauzeren, het volume te verhogen of te verlagen met gebruik van Javascript is eenvoudig.

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">Audio afspelen</button>
  <button onclick="document.getElementById('demo').pause()">Audio pauzeren</button>
  <button onclick="document.getElementById('demo').volume+=0.1">Volume verhogen</button>
  <button onclick="document.getElementById('demo').volume-=0.1">Volume verlagen</button>
</div>

Het downloaden van media stoppen

Het afspelen stoppen van media is zo eenvoudig als het aanroepen van de de pause() methode, maar de browser zal blijven downloaden totdat het media-element wordt afgevoerd door de garbage collector.

Bij deze de truck om het downloaden direct te stoppen:

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src");

Door het src attribuut van het media-element te verwijderen (of deze met een lege string te vullen, dat kan van de browser afhangen) wordt de interne decoder van het element gesloopt en dat zal het downloaden doen stoppen. The specificaties zijn echter nog tamelijk onduidelijk wat betreft het removeAttribute() scenario en het leegmaken (lege string) van het <video> 'src' attribuut kan een ongewenst verzoek veroorzaken (Mozilla Firefox 22).

Het doorzoeken van media

Media elementen voorzien in ondersteuning van het wijzigen van de afspeelpositie naar specifieke punten in de inhoud van de media. Dit wordt gedaan via het invullen van de eigenschap currentTime op het element; zie hiervoor HTMLMediaElement voor meer details over de eigenschappen van een media-element. Zet eenvoudig de waarde op de tijd, in seconden, van de positie waarop het afspelen moet doorgaan.

U gebruikt de eigenschap seekable om het gebied dat beschikbaar is te doorzoeken. De eigenschap retourneert een TimeRanges object waarbinnen een lijst bestaat met de tijden waarop gezocht kan worden.

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();  // Retourneert de starttijd (in seconden)
mediaElement.seekable.end();    // Retourneert de einddtijd (in seconden)
mediaElement.currentTime = 122; // Ga naar 122 seconden
mediaElement.played.end();      // Retourneert het aantal seconden dat de browser heeft afgespeeld

Leg het afspeelgebied vast

Bij het opgeven van de URI van de media voor een {{HTMLElement ("audio")}} of {{HTMLElement ("video")}} element kunt u desgewenst aanvullende informatie geven voor het deel van de media dat afgespeeld moet worden. Om dit te doen, voeg een hekje ("#"), gevolgd door de media fragment beschrijving.

Een tijdsgebied wordt opgegeven met de syntaxis:

#t=[starttime][,endtime]

De tijd kan worden opgegeven als een aantal seconden (als een floating-point waarde) of als een uren / minuten / seconden tijd gescheiden met dubbele punten (zoals 02:05:01 2 uur, 5 minuten en 1 seconde).

Een paar voorbeelden:

https://foo.com/video.ogg#t=10,20: Laat de video afspelen te beginnen bij 10 seconden en ga door tot en met de 20 seconden.
https://foo.com/video.ogg#t=,10.5: Speel de video af vanaf het begin tot en met 10,5 seconden.
https://foo.com/video.ogg#t=,02:00:00: Speel de video af vanaf het begin en voor de duur van 2 uur.
https://foo.com/video.ogg#t=60: Speel de video af vanaf de 60ste seconden en speel tot het einde.

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.

Uitwijkmogelijkheden

HTML opgenomen tussen bijvoorbeeld de openings- en de sluittags van media-elementen wordt verwerkt door browsers die geen ondersteuning hebben voor HTML5 media. U kunt profiteren van dit feit om alternatieve fallback media te bieden voor die browsers.

Dit gedeelte bevat twee mogelijke fallback opties voor video. Voor elk geval, als de browser HTML5 video ondersteunt, dan wordt die gebruikt; in alle andere gevallen wordt de optie fallback gebruikt.

Het gebruik van Flash

U kunt Flash gebruiken om een Flash-formaat film af te spelen als de {{HTMLElement ("video")}} element niet wordt ondersteund:

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

NB: gebruik geen classid in het object-tag om compatibel te zijn/blijven met andere browsers dan Internet Explorer.

Ogg videos afspelen met gebruik van een Java applet

Er is een Java appletCortado die je kunt gebruiken las uitwijkmogelijkheid voor het afspelen van Ogg videos in browsers die Java ondersteunen, maar dat niet doen voor 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>

Als u geen alternatief kind-element creëert van het cortado object element, zoals het {{HTMLElement ("p")}} element hierboven, dan zullen FireFox 3.5 installaties die de video native behandelen, maar geen Java geïnstalleerd hebben ten onrechte de gebruiker informeren dat ze een plugin moeten installeren om de inhoud op de pagina te bekijken.

Foutafhandeling

(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

Met ingang van Gecko 2.0 is de foutafhandeling is herzien om te voldoen aan de meest recente versie van de HTML5 specificaties. De error gebeurtenis wordt nu naar afgeleverd bij het kind-element dat behoort bij de bron die de fout laat ontstaan in plaats van bij het media-element zelf.

Dit zorgt er voor dat u kunt bepalen welke bron niet geladen werd, dit kan nuttig zijn. Bekijk deze HTML maar eens:

<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>

Omdat Firefox MP4 en 3GP niet ondersteunt vanwege principe van patentbezwaren zullen <source> elementen met de ID's "mp4_src" en "3gp_src" in een error gebeurtenis lopen voordat de Ogg bron geladen wordt. De bronnen worden uitgevoerd in de volgorde waarin ze staan en wanneer er eenmaal een succesvol geladen is dan worden de overige bronnen helemaal niet meer geraadpleegd.

Detecteren of er geen bronnen zijn geladen

Om vast te stellen dat niet een <source> kindelement is geladen kunt u de waarde van het attribuut networkState van het media-element controleren, Wanneer de waarde HTMLMediaElement.NETWORK_NO_SOURCE is dan weet u dat geen van de bronnen geladen is.

Op dat punt gekomen kunt u een andere bron invoegen met behulp van een nieuw <source> element als child van het media element en Gecko zal een poging doen om die bron te laden.

Inhoud tonen wanneer geen bron gedecodeerd kon worden

Een andere manier om de fallback inhoud van een video te tonen als geen van de bronnen kan worden gedecodeerd in de huidige browser's is het toevoegenvan foutafhandeling in het laatste bronelement. Dan kunt u de video vervangen met zijn fallback inhoud:

<video controls>
  <source src="dynamicsearch.mp4" type="video/mp4"></source>
  <a href="dynamicsearch.mp4">
    <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS">
  </a>
  <p>Klik op de afbeelding om een video demo van een dynamische app zoekopdracht af te spelen</p>
</video>

var v = document.querySelector('video'),
    sources = v.querySelectorAll('source'),
    lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
  var d = document.createElement('div');
  d.innerHTML = v.innerHTML;
  v.parentNode.replaceChild(d, v);
}, false);

Bekijk ook

De HTML elementen voor media: <audio>, <video>, <source>;
Het manipuleren van video met beulp van canvas
Introductie van de Audio API Extension
nsIDOMHTMLMediaElement
Media formats die ondersteuend worden door de audio en video elementen
Theora Cookbook
Popcorn.js - The HTML5 Media Framework
Kaltura Video Library Solution, een JavaScript bibliotheek (mwEmbed) die een naadloze uitwijkmogelijkheid ondersteund voor HTML5, VLC Player, Java Cortado en OMTK Flash Vorbis player (wordt gebruikt door Wikimedia).
OMTK - Flash, een Flash bibliotheek die een Vorbis decoder implementeert
Projekktor Player, een JavaScript wrapper voor audio- and video-tags met flash fallback, open source, GPL
Applet Cortado, een audio/video playback oplossing in Java die wordt onderhouden door Xiph.org
Video.JS, een open source HTML5 video player en framework.
MediaElement.js - open source HTML5 audio/video framework met een aangepaste Flash shim API die HTML5 media nabootst tbv oudere browsers.
Flv Player - HTML5 fallback support video player
DASH - Dynamic Adaptive Streaming over HTTP - tbv HTML5 video
jPlayer een open source audio en video libray voor jQuery enZepto

HTML5 audio en video gebruiken