Audio en video op het web (formaten, ondersteuning in browsers, embedding, standaarden)
Video Waarvoor wordt het gebruikt? Tegenwoordig is video op het web onmisbaar, denk alleen al aan YouTube, maar ook voor online advertenties, nieuws en TV.
Wat zijn de gangbare formaten op het web? Video players De meest populaire media players op het web:
Windows media player (deze is niet cross-platform en ondersteunt niet alle formaten) iTunes (cross-platform) Real Player (cross-platform) Quicktime (cross-platform) DivX (Windows en Mac)
Steeds minder wordt er Flash gebruikt, je kan dan een flash player embedden om video in af te spelen, door middel van de Adobe Flash Plugin. Met HTML5 in ontwikkeling, worden er meer mogelijkheden zichtbaar, er wordt gebruik gemaakt van open standaarden. Door middel van de tag
kun je een player maken. Hierdoor kan je de video player customizen met JavaScript en CSS. File/Video formats en browser ondersteuning [3] Voorbeelden van enkele veel gebruikte file formats zijn onder andere: .mp4, .flv, .avi, .f4v en .ogv Naast de file formats zijn er ook nog video formats (lees codecs) nodig, weer enkele bekende: H.264, MPEG-4 of Theora De file formats en video formats gaan hand in hand, je hebt bijvoorbeeld een video.mp4 bestand dat een video bevat die gecodeerd is als MPEG-4 of H.264. Het is wel belangrijk om deze twee formaten apart te zien, want het zijn twee geheel aparte onderdelen. Nu zijn we bij het probleem aangekomen, waar deze website om draait. Hoe standaard zijn deze ‘standaarden’ nou werkelijk? Antwoord: er is geen overkoepelende standaard. Zoals in vele aspecten van het internet zijn er vele formaten en grote bedrijven die voor persoonlijk gewin kiezen in plaats van het leven van een webdeveloper makkelijker te maken. Evenals voor video standaarden. We hadden eerst flash dat werkte in bijna alle browsers die de Adobe Flash Plugin geïnstalleerd hadden, totdat Apple met de Ipad en Iphone kwam en deze markt compleet buiten spel heeft gezet. Nu hebben we HTML5 wat wel weer werkt op Apple producten, maar dan hebben we Microsoft met Internet Explorer waar het niet wordt ondersteunt. In de toekomst zal HTML5 (hopelijk) in de grote browsers meer geïntegreerd zijn, waardoor de video tag wel werkt. Voor de webdeveloper, die moet
een keuze maken, zet ik bepaalde gebruikers buiten spel of niet? In onderstaand plaatje wordt duidelijk hoe de browser ondersteuning is.
Browser
Latest stable release version date
Formats supported by different web browsers Ogg Theora Manual install[note
Internet Explorer
9.0.2 (August 11, 2011; 6 months ago)
Mozilla Firefox[21]
10.0.1 (February 10, 2012; 3 days ago)[22]
Google Chrome
17.0.963.46 (February 3.0[27][28] 8, 2012; 5 days ago)
Chromium
N/A
H.264
VP8 (WebM) Manual install[note
2]
9.0[18]
3.5[23]
No[note 4]
4.0[25][26]
No
6.0[29][30]
r18297[31]
Manual install[note
3]
5]
r47759[33]
3.0[34]
2.3[34]
6]
3.1
Manual install[35]
10.50[36]
No
10.60[37][38]
Android browser N/A
2.3[34]
Safari with Quicktime
5.1.3 (February 1, 2012; 12 days ago)
Manual install[note
Opera
11.61 (January 24, 2012; 20 days ago)
Konqueror
4.8 (25 January 2012; 4.4[40] [39] 19 days ago)
Epiphany
3.2.2 (16 November 2011; 2 months ago)[43]
2.28[44]
Manual install[note 7]
Manual install[note 8]
Yes[42]
Yes[note 8][45]
De laatste versies van browsers ondersteunen al redelijk veel, maar als we bedenken hoeveel gebruikers er nog zijn voor IE8, IE7 en zelfs IE6 verlies je nog steeds een groot deel van de gebruikers. Het embedden van audio in HTML [4] In een perfecte wereld zou het volgende stuk code werken:
Helaas werkt dit alleen goed in Safari, Chrome, en op de iPad/iPhone. Je moet het .mp4 bestand wel gecodeerd hebben in H.264 (is aanbevolen) of MPEG-4. In het embedden heb je uiteraard verschillende opties om de player te stijlen:
De grootte van de player (width en height). De controls, zorgt ervoor dat er interactie mogelijk is met de gebruiker en de player. Preload, als je het filmpje van te voren wilt laden, gelijk als de pagina is geladen en voordat de gebruiker op de play-button klikt. Dan moet je de preload attribuut toevoegen,
of om bandbreedte te besparen (als niet elke bezoeker je filmpje zou bekijken) kan je ook aangeven. Let op: preload zorgt er niet voor de het filmpje automatisch gaat afspelen! Autoplay zorgt ervoor dat het filmpje gelijk afspeelt als de pagina laadt, de standaard waarde is dat er wordt gewacht tot de gebruiker op play klikt. <param name="movie" value="flowplayer-3.2.2.swf"> <param name="allowfullscreen" value="true"> <param name="flashvars" value="config={'clip':{'url':'mymovie.mp4','autoPlay':false}}"> Nu hebben we ondersteuning voor zo ongeveer alle internetgebruikers, als we deze twee methodes zouden kunnen combineren. Door het combineren van de tags en . Een voorbeeld van de gecombineerde methodes: <source src='mymovie.mp4' type='video/mp4' /> <source src='mymovie.ogv' type='video/ogg; codecs="theora, vorbis"' /> <param name="movie" value="flowplayer-3.2.2.swf"> <param name="allowfullscreen" value="true"> <param name="flashvars" value="config={'clip':{'url':'mymovie.mp4','autoPlay':false}}"> Helaas hebben we nu nog steeds een browser die het niet aan kan, Firefox begrijpt de video tag, maar kan de .mp4 formaten niet aan (wel .ogv). Om hier weer een oplossing voor toe te passen hebben we in de derde regel het .ogv bestand toegevoegd. Om ervoor te zorgen dat in Firefox het .ogv bestand wordt gekozen en de .mp4 ‘overslaat’ (deze komt tenslotte als eerst), moet je in de .htaccess het type toevoegen door middel van de volgende regel: AddType video/ogg .ogv tags geplaatst worden in de html van de webpagina. HTML5 HTML5 kan audio in een website embedden met tags. Standaard ziet dit er zo uit: tags te plaatsen. tag wordt aangetroffen, is het aan de browser om deze af te handelen. Safari en de Android browser ondersteunen bijvoorbeeld HLS in de URI in het src attribuut. Developers van Google Chrome hebben gezegd dat ze HLS niet zullen ondersteunen. (http://code.google.com/p/chromium/issues/detail?id=54198). Wel hebben ze gezegd dat ze werken aan ondersteuning voor DASH (http://code.google.com/p/chromium/issues/detail?id=109652#c2). DASH, Dynamic Adaptive Streaming over HTTP is een streaming protocol van MPEG dat op het moment van schrijven nog in ontwikkeling is. Google zegt in een comment van de bugtracker van google chrome dat ze deze maand (Februari 2012) nog een demo uit zullen brengen waarin DASH gebruikt wordt om een video te streamen in HTML5. Dit is dus een heel actueel onderwerp. De developers van Google werken aan een extensie van Javascript, die developers mogelijkheden biedt om een eigen streaming protocol in Javascript te implementeren. Standaard zal DASH dus op deze wijze ondersteund worden. Het zou me niet verbazen als Google gaat proberen om van dit idee een standaard zou maken. Ik heb in mijn enthousiasme nog een comment geplaatst waarin ik vraag wat web developers zullen doen met populaire standaarden die niet standaard in chrome zullen zitten. Als verschillende web developers javascript implementaties maken voor hetzelfde streaming protocol, leidt dat dan niet tot fragmentatie van implementaties? Ondertussen is W3C bezig met het maken van streaming hulpprotocollen. Zo is er bijvoorbeeld de “Media Fragments URI”. Hierin kunnen delen van media bestanden via de URI opgevraagd worden. Dit is een uitbreiding van de generieke URI syntax (RFC 3986). Kortom: HTML5 biedt standaard Progressive Download. Dit is maar een half streaming protocol. Voorlopig hangen echte stream mogelijkheden van de browser af. Safari en Android hebben al een goede start gemaakt, maar browsers zoals chrome zijn er nog hard aan bezig.
