Audio en video op het web

Transcriptie

1 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 <video></video> 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

2 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 H.264 VP8 (WebM) Internet Explorer (August 11, 2011; 6 months ago) Manual install [note 2] 9.0 [18] Manual install [note 3] Mozilla (February 10, Firefox [21] 2012; 3 days ago) [22] 3.5 [23] No [note 4] 4.0 [25][26] Google Chrome (February 8, 2012; 5 days ago) 3.0 [27][28] No 6.0 [29][30] Chromium N/A r18297 [31] Manual install [note 5] r47759 [33] Android browser N/A 2.3 [34] 3.0 [34] 2.3 [34] Safari with Quicktime (February 1, 2012; 12 days ago) Manual install [note 6] 3.1 Manual install [35] Opera (January 24, 2012; 20 days ago) [36] No [37][38] Konqueror Epiphany 4.8 (25 January 2012; 19 days ago) [39] 4.4 [40] Manual install [note 7] Yes [42] (16 November [note 2011; 2 months 2.28 [44] Manual install 8] Yes ago) [43] [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: <video src="mymovie.mp4" width="320" height="240" controls></video> 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:

3 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, <video preload> of om bandbreedte te besparen (als niet elke bezoeker je filmpje zou bekijken) kan je ook <video.. preload= none > 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. Dit was helaas de ideale wereld, nu hebben we nog de overige Browsers die niet met het HTML5 verhaal meedoen. Hiervoor kan je Flash gebruiken. Dan heb je wel weer een flash player nodig, een van de meest populaire players is FlowPlayer, deze is gratis. In programma s als Adobe Flash, kun je deze embed code automatisch genereren en zo in je website plakken. Hoe de code eruit ziet als je de FlowPlayer gebruikt: <object id="flowplayer" data="flowplayer swf" type="application/x-shockwave-flash" width="320" height="240" > <param name="movie" value="flowplayer swf"> <param name="allowfullscreen" value="true"> <param name="flashvars" value="config={'clip':{'url':'mymovie.mp4','autoplay':false}}"> </object> Nu hebben we ondersteuning voor zo ongeveer alle internetgebruikers, als we deze twee methodes zouden kunnen combineren. Door het combineren van de tags <video> en <object>. Een voorbeeld van de gecombineerde methodes: <video width="320" height="240" controls> <source src='mymovie.mp4' type='video/mp4' /> <source src='mymovie.ogv' type='video/ogg; codecs="theora, vorbis"' /> </video> <object id="flowplayer" data="flowplayer swf" type="application/x-shockwave-flash" width="320" height="240" > <param name="movie" value="flowplayer swf"> <param name="allowfullscreen" value="true"> <param name="flashvars" value="config={'clip':{'url':'mymovie.mp4','autoplay':false}}"> </object> 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

4 Audio Hoewel flash aan het afzwakken is, is het nog steeds vaak gebruikt om audio aan de gebruiker te tonen. Tegenwoordig komt HTML 5 echter steeds vaker voor. HTML 5 en flash zijn de grootste spelers op de markt. Beiden ondersteunen verschillende audio formaten. Flash ondersteunt MP3, ADPCM, LPCM, Nellymoser, Speex, AAC, G.711 en HE-AAC. Wat HTML5 ondersteunt, hangt af van de implementatie van de browser engine. Zo ondersteunt Webkit, de engine die o.a. Google Chrome gebruikt, MP3, OGG Vorbis, WAV PCM, AAC en Speex. Audioformaten uitgelicht MP3 MP3 is het bekendste formaat. Het is een audioformaat dat het geluid met verlies van kwaliteit (lossy) encodeert. MP3 is ontworpen door de Moving Picture Experts Group, ofwel MPEG. MP3 is een open proprietary formaat. Open proprietary betekent dat de details van het formaat volledig bekend zijn, maar dat het intellectueel eigendom is. Ogg Ogg (Vorbis) wordt vaak gezien als de tegenhanger van MP3. Ogg is een container formaat dat de metadata toevoegt aan een ander formaat audio of zelfs video. Voor audio wordt meestal Ogg Vorbis gebruikt, maar Ogg kan ook Theora, Speex, FLAC, Dirac en andere formaten behulzen. Vorbis is een open audio formaat van dezelfde developers als Ogg. Vorbis is, net als MP3, een lossy encoding formaat. Vorbis kan echter kleinere audio bestanden maken met een hogere kwaliteit dan MP3. WAV (L)PCM/ADPCM Het Waveform Audio Format (WAV) is een standaard van Microsoft en IBM. WAV kan zowel gecomprimeerde als niet-gecomprimeerde audio bevatten. WAV wordt meestal gebruikt voor nietgecomprimeerde audio. Encodering van WAV geluid gaat meestal via PCM. Pulse Code Modulation (PCM) is een methode om geluid om te zetten naar digitale audio. Hierbij wordt geen compressie toegepast. Linear PCM (LPCM) en ADPCM zijn specifieke implementaties van PCM. G.711 G.711 is implementatie van PCM om spraak te encoderen. Er zijn uitbreidingen op G.711 die ook compressie toevoegen. (HE-)AAC Het Advanced Audio Coding (AAC) formaat is door MPEG ontworpen als de opvolger van MP3. Net als Ogg Vorbis heeft AAC een hogere audiokwaliteit dan MP3 op dezelfde bitrates. Het nadeel van AAC is weer dat er patenten bij betrokken zijn. Makers van codecs voor dit formaat moeten patentgeld betalen aan MPEG. High-Efficiency AAC (HE-AAC) is een uitbreiding op AAC. HE-AAC is ontworpen om hoge kwaliteit audio op lage bitrates op te slaan. Het is vooral handig voor streaming audio.

5 Speex Speex is een formaat dat speciaal ontworpen is om specifiek spraak effectief te comprimeren. Speex is ontworpen voor gebruik in VoIP applicaties. Speex is een open source formaat. Er zijn geen patenten bij betrokken. Nellymoser Nellymoser is een relatief onbekend formaat van het gelijknamige bedrijf. Het is een volledig gesloten formaat en is nooit veel verder gekomen dan de implementatie in flash. Audio in een browser Flash Flash kan niet uit zichzelf een audio bestand afspelen. Een flash object is altijd een zichtbaar object op een webpagina. Om via flash audio af te spelen, moet de audio in een flash object zitten. De maker van het flash object moet de nodige knoppen aan het object toevoegen om de audio te pauzeren, vooruit te spoelen enzovoorts. Het is bij flash ook mogelijk om het flash object audio bestanden af te spelen die zich in dezelfde of een diepere folder bevinden. Zo kan een generieke audio player in flash gemaakt worden die audio bestanden afspeelt. Hier is een voorbeeld van zo n generieke player: Om een flash media player in de website in te bouwen, moet eerst een flash object gemaakt worden dat het geluidsbestand afspeelt en eventueel controls toevoegt. Daarna kan het flash object in <OBJECT> tags geplaatst worden in de html van de webpagina. HTML5 HTML5 kan audio in een website embedden met <audio> tags. Standaard ziet dit er zo uit: Echter via html, css en Javascript kan een webprogrammeur zijn eigen controls maken. Met HTML worden de knoppen in de webpagina geplaatst, met CSS krijgen de knoppen kleur en stijl en met javascript worden de knoppen gebonden aan het HTML5 audio element in de webpagina. Hier volgt een voorbeeld van een simpele audio player in HTML5. Voor het voorbeeld is de CSS inline gedefiniëerd.

6 Op de website is slechts een blauwe knop te zien waar Play op staat. Als er op gedrukt wordt, wordt het geluidsbestand afgespeelt. Het HTML5 audio element is dus altijd een generieke player die een geluidsbestand afspeelt dat in het src attribuut gegeven wordt. Embedded music player Het gebruik van Embedded music players wordt tegenwoordig sterk afgeraden. Zelden zijn ze nog te zien. Om een embedded media player te gebruiken moet de media player die gebruikt wordt als applicatie geïnstalleerd zijn op de computer. Neem als voorbeeld windows media player. Om audiobestanden via windows media player op websites af te kunnen spelen, moet Windows Media Player en de webplugin ervan geïnstalleerd zijn. Op de webpagina is dan de webplayer van Windows Media Player te zien. Naast het moeten installeren van de applicatie, is customization een groot nadeel. Bij flash en HTML5 kan de webprogrammeur zijn eigen controls maken. Bij een embedded music player wordt simpelweg de applicatie geladen en in de webpagina geplaatst, en is er vrijwel niets te veranderen aan de controls. Een embedded media player kan in een site geplaatst worden door een verwijzing naar de media applicatie en het geluidsbestand in <OBJECT> tags te plaatsen. Streaming protocollen Bijna geen enkel audio- of videobestand wordt nog volledig gedownload voordat het afgespelen ervan kan beginnen. Het streamen van media is dus erg belangrijk. Bij streamen gaat het over het kunnen afspelen, pauzeren en doorspoelen van media die nog niet per se volledig is gedownload. Belangrijk hieraan is dat de kijker/luisteraar niet te lang moet wachten om van de media te kunnen genieten. We plukken de twee belangrijkste manieren om media af te spelen in de browser, namelijk flash en HTML5, en bekijken daar de streaming mogelijkheden van. Flash Flash biedt veel mogelijkheden om audio en video te streamen naar het flash object in de browser. Ten eerste kan Flash kan het mediabestand embedden in het object. Dit heeft als nadeel dat de media volledig gedownload moet worden voordat het afspelen kan beginnen. Dit is vaak te zien bij de echte flash movies: filmpjes die voor het afspelen in flash zijn gemaakt. Flash biedt echter de mogelijkheden om te streamen. Hiervoor heeft Adobe de Flash Media Server voor ontwikkeld. De flash Media Server is een server die de media aanbiedt. In het flash object kan die server aangeroepen worden. De Flash Media Server streamt dan de media naar de browser, met het flash object, die op zijn beurt de media af zal spelen. De Flash Media Server ondersteunt de volgende streaming protocollen: RTMP, RTMPe, RTMFP, HDS, PHDS en HLS. Real Time Messaging Protocol (RTMP) RTMP was in eerste instantie een gesloten protocol ontwikkeld door Macromedia en Adobe. Het was speciaal ingericht voor flash, en later ook Adobe Air. Tegenwoordig is de specificatie van RTMP van de adobe website te downloaden, al missen er cruciale details in dit document. Bepaalde control messages die door de Flash Media Server worden verstuurd zijn niet behandeld in het document.

7 RTMP is een application layer protocol dat gebruik maakt van TCP op poort Naast de gebruikelijke TCP handshake heeft RTMP een eigen four-way handshake. Deze handshake wordt onder andere gebruikt om de versie van het protocol. Bij de handshake worden door zowel de client als de server anderhalve kilobyte verstuurd aan willekeurige bytes. Volgens het specificatiedocument van Adobe dienen deze bytes om het antwoord van een handshake te kunnen onderscheiden van de handshake die van de andere kant komt. Het versturen van willekeurige bytes bij de handshake doet mij, ondanks de verklaring van Adobe, persoonlijk vermoeden dat de handshake vooral ook was ontworpen om het lastig te maken om via packet sniffers er achter te komen hoe het protocol in elkaar zat. De handshake ziet er als volgt uit: 1. De client stuurt de versienummer naar de server. Standaard 0x Zonder te wachten op een acknowledge, stuurt de client 4 bytes met de huidige tijd, 4 nullen en 1528 willekeurige bytes. 3. Bij ontvangst stuurt de server zijn eigen versienummer naar de client. 4. Gelijk daarna stuurt de server 4 bytes met de huidige tijd, 4 nullen en 1528 willekeurige bytes. 5. De client stuurt het laatste pakket van de server onveranderd weer terug. 6. De server stuurt het tweede pakket van de client (met de willekeurige bytes) weer naar de client. Na de handshake is er een verbinding en kan de media gestreamed worden. De media wordt gestuurd in relatief kleine pakketten. Ook zijn er control messages die het streamen kunnen beïnvloeden, zoals vooruitspoelen en pauzeren. RTMPe en RTMFP RTMPe (de E staat voor encrypted ) is een uitbreiding op het RTMP protocol. Het voegt encryptie toe aan het RTMP protocol. Met deze encryptie kan media verstuurd worden zonder dat het door derden bekeken kan worden. De encryptie wordt tot stand gebracht in de handshake van RTMP. In plaats van het versienummer wordt een code gestuurd die aangeeft dat er encryptie gebruikt gaat worden. In de willekeurige bytes in de pakketten die uitgewisseld worden, worden stukken gebruikt die een diffie-helman encryptie onderhandelen. Weer is het moeilijk gemaakt om met een packet sniffer er achter te komen hoe deze handshake werkt. De Diffie-Helman keys en de key van de Flash Media Server staan op een willekeurige plek in de random bytes. Op bytes 8-11 en van het pakket staan verwijzingen naar deze keys. Volgens reverse engineers ( is ervoor gezorgd dat deze verwijzingen lastig leesbaar zijn. RTMFP, Real Time Media Flow Protocol, is gebaseerd op UDP. Adobe heeft ingezien dat UDP voordelen heeft boven TCP als het gaat om media streaming. UDP, met zijn best-effort service, voorkomt de overhead die veroorzaakt wordt door het versturen van acknowledge pakketten. Het tweede verschil tussen RTMP en RTMFP is dat een flash client met RTMFP direct kan communiceren met een andere flash client, RTMP kan dit niet. Er is geen specificatie van RTMFP beschikbaar. HDS en PHDS HTTP Dynamic Streaming (HDS) is een combinatie van HTTP en RTMP. HDS is ontwikkeld door Adobe. HDS verstuurt de media over HTTP. Dit is langzamer dan RTMP omdat alle pakketten HTTP headers toegevoegd krijgen. De essentie van HDS is dat het mediabestand wordt in stukken gehakt. Deze stukken worden gewoon via HTTP verstuurd naar het flash object in de browser. Flash voegt deze

8 stukken weer bij elkaar om het videobestand af te spelen. Het HDS protocol gebruikt control messages, net zoals RTMP, om de stream te kunnen beïnvloeden. Het voordeel van HDS boven RTMP is het gemakkelijk integreren in bestaande HTTP servers. Er hoeft niet te veel moeite gedaan te worden om content via HDS te kunnen versturen. Protected HDS (PHDS) is wat RTMPe is voor RTMP: het voegt encryptie toe aan de stream. HLS HTTP Live Streaming (HLS) is net als HDS een streaming protocol die de media in stukken over HTTP overbrengt. Dit keer is echter Apple de uitvinder. Het is ontwikkeld om media naar Apple OSX en ios apparaten te streamen. Specifiek is het gemaakt om live media te streamen. Denk bijvoorbeeld aan een live voetbalwedstrijd. Het wonderbaarlijke is echter dat het als Internet Draft is ingeleverd bij de IETF. Dit betekent dat de specificatie online staat, en dat het nog in ontwikkeling is. De Internet Draft is hier te lezen: HLS werkt via playlists. Deze playlist is altijd in M3U formaat. M3U is het formaat van een bestand dat een lijst met mediabestanden en metainformatie in plaintext bevat. HLS is een uibreiding van het M3U formaat dat streaming functionaliteiten toevoegt. Het werkt als volgt: Eerst vraagt de client de M3U playlist op via de URI, de Unified Resource Locator. Nadat de playlist is opgevraagd en gelezen, kan de client de media zelf opvragen met de URI. De client kan kiezen welke segmenten hij op wil vragen, aangezien ieder segment een andere URI heeft. Hier is een simpel voorbeeld, uit de draft, van een HLS playlist bestand die een mediabestand van één segment kan streamen: #EXTM3U #EXT-X-TARGETDURATION:5220 #EXTINF:5220, #EXT-X-ENDLIST De #EXTM3U tag geeft aan dat de afspeellijst een M3U bestand is. De #EXT-X-TARGETDURATION tag geeft aan hoe lang één segment mag zijn in seconden. Een segment mag in dit geval maximaal 5220 seconden lang zijn. De #EXTINF tag geeft aan hoe lang het bestand werkelijk is. De Targetduration moet kleiner of gelijk zijn aan de EXTINF. De #EXT-X-ENDLIST tag geeft aan dat dit het einde van de afspeellijst is. De client moet de afspeellijst regelmatig opnieuw opvragen. Vooral als het gaat om een live uitzending, kunnen nieuwe segmenten toegevoegd worden aan de playlist. Door de playlist steeds opnieuw op te vragen blijft de client op de hoogte van nieuwe segmenten.

9 HTML5 Pure HTML5 ondersteunt van zichzelf geen specifieke streaming protocollen. Het heeft echter wel het bijna-stream protocol Progressive Download. Progressive Download begint met het downloaden van het mediabestand en zorgt ervoor dat een de client kan beginnen met afspelen voordat het volledig gedownload is. Dit is alles wat progressive download kan. Als je probeert door te spoelen, zul je moeten wachten totdat dit deel gedownload is, het protocol downloadt namelijk van begin tot eind. Bij een echt streaming protocol is aan te geven dat je vooruitgespoeld hebt. Het stuk dat je overgeslagen hebt, zal dan ook niet meer gedownload worden. Progressive download wordt standaard gebruikt. Verdere ondersteuning van streaming hangt volledig van de webbrowser af. Als er een stream URI in het src attribuut van een <video> 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. ( Wel hebben ze gezegd dat ze werken aan ondersteuning voor DASH ( 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. Bronnen: [1] [2] [3] [4]

10 [5] [6] [7] [8] [9] pecification_1.0.pdf