Archief May 2011

HTML5 videospeler

Met de komst van HTML5 werd de video-tag geïntroduceerd en daarmee een alternatief voor de Adobe Flash-player om video in een site af te spelen. Dat is vooral handig op devices die geen Flash ondersteuning aanbieden.
Zoals verder in detail aangegeven is implementatie in de huidige browsers niet optimaal en voorzien we nog altijd een Flash-player als fallback voor browsers zoals Internet Explorer 6, 7 en 8.

De basiscode

  1. <video width="608" height="256" controls">
  2. <source src="video/walle_small.mp4">
  3. </video>

Ondersteuning van video

  • Firefox 3.5+, Chrome 5.0+, Opera 10.5+: Theora (.ogv files)
  • Safari 3.0+, Chrome 5.0+, iPhone 3.0+, Android 2.0+: H.264 (.mp4 files, baseline Profile + AAC audio met een “low-complexity” profile)
  • Internet Explorer 9, Firefox 4.0+, Chrome 6.0+, Opera 11.0+: WebM (.webm files)

Zoals je ziet, wordt de video-tag enkel in recente browsers ondersteund, en bovendien ondersteunen ze niet allemaal hetzelfde formaat. We moeten daarom 3 verschillende sources vermelden in de code. Daarbij vermelden we ook het type en de codec die gebruikt moet worden op het bijhorende bestand te kunnen lezen. De enige uitzondering daarop is de .mp4 want Android 2.2 kan dit dan weer niet lezen.
Ook de volgorde is belangrijk. De .mp4 moet eerst staat, vooral omdat iOS 3.x enkel de eerste source-tag leest en de rest overslaat.
Meer informatie over codecs en converteren vind je op Dive into HTML5

De code

  1. <video width="608" height="256" controls>
  2. <source src="video/walle_small.mp4"><!-- H.264 -->
  3. <source src="video/walle_small.webm" type="video/webm; codecs="vp8, vorbis""><!-- WebM -->
  4. <source src="video/walle_small.ogv" type="video/ogg; codecs="theora, vorbis""><!-- Theora/Vorbis -->
  5. <!-- Include fallback here -->
  6. </video>

Om ervoor te zorgen dat de server het juiste mime-type gebruikt plaatsen we nog deze regels in onze .htaccess file. als dit niet werkt moeten de mime-types waarschijnlijk nog toegevoegd worden aan de server zelf.

  1. AddType video/ogg .ogv
  2. AddType video/mp4 .mp4
  3. AddType video/webm .webm

Oudere browsers

De fall-back code (bvb. een embed van een Flash player of een YouTube video) mag je tussen de video-tags, na de source-tags zetten. Recente browsers zullen die code negeren, terwijl oudere browsers de video- en source-tags dan weer niet gebruiken.

Mobiele browsers

  • Android 2.2 bevat een bug waardoor de default controls van video niet gebruikt kunnen worden, we zijn dus genoodzaakt om via javascript custom controls te voorzien.
  • iPad/iPhone kunnen dan weer geen custom controls inlezen dus moeten we daar terugvallen op de default controls.
  • iOS 3.x op iPad en iPhone bevat een bug waardoor de video niet zal spelen als er een poster-attribute meegegeven is aan de video. Dus vooral geen poster gebruiken als je deze wil ondersteunen.

Custom controls

Als we graag wat meer controle hebben over hoe onze player eruit ziet (en als we Android 2.2 willen ondersteunen) gaan we zelf knoppen toevoegen en aansturen via JavaScript. In onderstaande custom player gebruiken we alvast deze functies, opgebouwd via JQuery:

  • Play/pauze knop
  • Grote play/pauze knop als overlay
  • Rewind
  • Tijdsverloop
  • scrubber
  • Totale speeltijd
  • Mute
  • Volume slider

Demo

Je kan de player zien in deze demo.