Video op het web

Tot op vandaag was er geen algemene standaard om video weer te geven op het web en werd voornamelijk een plug-in gebruikt, zoals Adobe Flash. Met HTML 5 is <video> het standaard element om video te embedden op een website.

Een overzicht van de attributen van de tag: W3Schools.
Binnen de <video> tag kunnen meerdere <source> tags worden opgenomen die linken naar verschillende video-bestanden. De browser zal het eerste video-bestand kiezen dat het herkent. Er is ook het <track> element dat kan linken naar een tekst-bestand, onder meer gebruikt voor ondertitels of captions.

Er zijn momenteel 3 video-codecs ondersteunt in HTML 5:

• MP4: MPEG4-bestanden met H.264 videocompressie
• WEBM: WebM-bestanden met VP8 videocompressie en Vorbis audio-codec (open standaard)
• OGG: Ogg-bestanden met Theora videocompressie en Vorbis audio-codec (open standaard)

Controle over de playback kan in eigen handen worden genomen met diverse DOM-methods voor o.a. afspelen, pauzeren en laden, DOM-properties zoals duur, volume, seeking en DOM-events die kunnen opgevangen worden met een functie, bijvoorbeeld wanneer de video begint te spelen, gepauzeerd wordt, enz. Een overzicht is gedefinieerd door W3Schools.

Browsercompatibiliteit

Een overzicht door Longtailvideo:

	Browser	Video formaten	Audio formaten
	Internet Explorer	MP4	MP3
	Chrome	MP4, WebM	AAC, MP3, Vorbis
	Firefox	WebM	Vorbis
	Safari	MP4	AAC, MP3
	iPad/iPhone	MP4	AAC, MP3
	Opera	WebM	Vorbis
	Android	MP4	AAC

Het Ogg-formaat wordt niet breed ondersteund daar het van mindere kwaliteit is dan MP4 of WebM. Alle browsers ondersteunen MP4 en/of WebM, met uitzondering van Firefox v.3.5 (die in december 2011 overigens nog minder dan 5% van het marktaandeel bezat).

In The Chromium Blog heeft Google bekend gemaakt dat het in de toekomst mogelijk de H.264 videocompressietechnologie uit zijn browser haalt en voor de open standaard WebM zal kiezen, wat mogelijk een doorbraak zou kunnen betekenen voor deze laatste, maar hierover is nog niets met zekerheid te zeggen. Microsoft en Apple zien toekomst in de H.264 techniek, hoewel Microsoft in samenwerking met Google ook een WebM-plugin heeft voorzien in Internet Explorer 9.

Volgens Longtailvideo speelt elke browser het eerste videoformaat dat het ondersteunt wanneer een lijst van sources wordt meegegeven, maar moeten bij Chrome en Safari het Mimetype gedefinieerd worden. Android 2.2 daarentegen kan enkel meerdere sources aan wanneer geen Mimetypes gedefinieerd zijn.

Tot slot wordt het <track> element momenteel in nog geen enkele browser ondersteunt.

HTML 5

HTML 5 wordt de nieuwe standaard voor HTML, XHTML en het HTML Document Object Model (DOM). We concentreren ons voornamelijk op de nieuwe video- en audio-elementen voor media playback.

HTML 5 is momenteel nog in ontwikkeling, maar langzamerhand beginnen de moderne browsers nieuwe onderdelen te ondersteunen. De snel evoluerende specificatie en browserimplementaties maken het belangrijk voldoende tijd te investeren in het onderzoek naar de beperkingen van de nieuwe technologie, o.a. 'cross-browser/device support' zal een belangrijk kernpunt worden doorheen het onderzoek.

We bekijken de evolutie van de browsermarkt (StatCounter Global Stats - Browser Market Share):

We vergelijken dit met de HTML 5 ondersteuning (Longtailvideo, meting november 2011):

	Browser/Device	Marktaandeel	HTML5	Flash
	Internet Explorer 6/7/8	28%	NEE	JA
	Chrome	24%	JA	JA
	Firefox	23%	JA	JA
	Internet Explorer 9	9%	JA	JA
	Safari	4%	JA	JA
	iPad/iPhone	4%	JA	NEE
	Opera	2%	JA	JA
	Android	2%	JA	JA
	Andere (meestal mobiele toestellen)	4%	NEE	NEE

We kunnen concluderen dat het merendeel HTML 5 ondersteunt, maar een Flash-backup eveneens noodzakelijk zal zijn (oudere versies van Internet Explorer - zonder HTML 5 ondersteuning - maken nog steeds het grootste marktaandeel uit). Mobiele toestellen en tablets vormen een nieuwe sterk toenemende groep op de markt en ondersteunen meestal geen plugins meer (Adobe Flash).

We gaan verder dieper in op de video specificaties in HTML 5.

Welkom

Als opgave voor de bachelorproef 2012 binnen mijn opleiding aan de Universiteit Hasselt koos ik voor "Media presentatie in HTML 5". Het eindwerk kadert binnen het "synchronous MediaSharing" (sMS) onderzoek van het wetenschapscentrum EDM.

Het sMS-framework laat gedistribueerde gebruikers toe multimedia te delen met elkaar en op een gesynchroniseerde wijze te consumeren. Voor de media presentatie steunt de dienst op Adobe's Flash technologie, wat op een aantal platformen zoals mobiele toestellen echter niet is ondersteund. HTML 5, de meest recente, maar nog niet volledig gestandaardiseerde versie van HTML, voorziet een aantal nieuwe features om interactieve content te integreren zonder dat hiervoor beroep gedaan moet worden op proprietary plug-ins zoals de Adobe Flash Player. Dit maakt HTML 5 een geschikte kandidaat om het sMS-framework te verlossen van zijn Flash afhankelijkheid zodat de toepassing ook beschikbaar wordt voor o.a. mobiele gebruikers.

Concreet ga ik starten met een onderzoek naar de nieuwe mogelijkheden die HTML 5 biedt om multimedia te integreren in websites. Na deze studie wordt de verworven kennis toegepast in het sMS-framework, met als doelstelling de web-gerelateerde codebase van het platform om te zetten van HTML 4 naar HTML 5.

Het eindwerk verwacht zijn voltooiing omstreeks juni (specifieke datum volgt later). Het resultaat zal een proefschrift omvatten met een uiteenzetting van de literatuurstudie en de concrete werkwijze om tot de voltooiing van de doelstellingen te komen.

Hieronder volgt een beknopt schema van het verloop van het eindwerk, behoudens kleine wijzigingen naarmate het studieprogramma van het tweede semester bekend raakt. Naarmate het eindwerk vordert zal overigens een meer concrete planning van periodes duidelijk worden.

• 12 februari: Verzameling literatuur en basis van de studie
• 24 maart: Afronding principieel literatuuronderzoek. Starten met studie naar concrete implementatiemethoden en test cases.
• 15 april: Een concreet idee voor implementatie zou hier ongeveer moeten verworven zijn.
• Vanaf 15 april: Implementatie sMS-framework en afwerking proefschrift.

Deze webblog is opgesteld om de projectbegeleiders evenals u, geïnteresseerde lezer, te informeren over het verloop van het onderzoek. Met regelmaat zal ik hier updates publiceren over vorderingen en bevindingen. Reacties, opmerkingen of informatie zijn altijd welkom.

Student: Steven Thijs

Bachelorproef: Media Presentatie in HTML 5

Promotor: Prof. dr. Wim Lamotte

Begeleider: dr. Maarten Wijnants