De Ultieme handleiding voor Online Video (deel 1)

Dat geklungel met video moet voor eens en voor altijd zijn afgelopen!

Wanneer je gebruik wilt maken van online video kan dit op een aantal manieren. In mijn artikel over het vergelijk tussen YouTube, Vimeo en Amazon S3 heb ik de voor en nadelen van de diverse diensten al besproken. Hierbij heb ik ook mijn voorkeur voor het gebruik van Vimeo uitgesproken. Toch is er een aantal goede redenen denkbaar, waarom je niet voor Vimeo, maar voor Amazon S3 of een ander content delivery netwerk zou kiezen voor het aanbieden van je video.

Video is een belangrijk onderdeel van de hedendaagse webcontent geworden. Een reden waarom het gebruik van video ook uitgebreid besproken wordt in trainingen zoals Ontwikkel je Online Training, eLearning met WP Courseware en de Content Creation Workshop.

Maar wanneer we met online video gaan werken, dan is niet alleen belangrijke hoe we onze video maken, ook hoe we deze geschikt maken om op het Internet te tonen.

Maar ook wanneer je gewoon de eerste stapjes van je kind, een impressie van je vakantie of een andere video opname op je website wilt laten zien, is het handig de weten wat de precieze manier is om dit probleemloos op alle apparaten te laten zien.

In dit eerste deel gaan we verder in op de verschillende videoformaten die er bestaan en kijken we welke formaten jij het best voor jouw online video kan gebruiken.

Resolutie

Wanneer we het over afbeeldingen hebben en we laten de term ‘resolutie’ vallen, dan hebben we het vaak over de afmetingen van de foto. Omdat foto’s allerlei beeldverhoudingen kunnen hebben, is het van belang dat we zowel de hoogte en de breedte aangeven. *)

Hebben we het over video dan geven we tegenwoordig meestal alleen de hoogte van de video op. Dit is omdat we eigenlijk standaardverhoudingen voor video hebben, namelijk 16:9 of 4:3. Voor de lagere resoluties gebruiken we de 4:3 verhouding, de hogere (HD) resoluties hebben de 16:9 verhouding. Uit de hoogte van het beeld volgt dus altijd als vanzelfsprekend de breedte.

Deze hoogte geven we eigenlijk aan in het aantal beeldlijnen. Dus bijvoorbeeld 720. Daarna geven we een letter op, die aangeeft hoe het beeld wordt opgebouwd. Een ‘p’ voor ‘progressive’, de lijnen worden één voor één opgebouwd, een ‘i’ voor ‘interlaced’. We bouwen het beeld op voor af en toe een lijn over te slaan. Bij een trage verbinding kan de videosoftware de tussenliggende lijnen als het ware ‘verzinnen’. Je krijgt hierdoor een geblokt beeld, maar je hebt in ieder geval beeldt.

Hoe hoger het aantal beeldlijnen, hoe scherper het beeld is. Maar ook hoe groter het bestand. Wil je de kijker van jouw video een optimale ervaring geven, dan zorg je dat hij op grote apparaten met snelle verbindingen een video met een hoge resolutie te zien krijgt. Op de kleinere apparaten en met tragere verbindingen krijgt hij een video met een lagere resolutie te zien. In het volgende artikel kijken we, hoe we dit in de praktijk doen.

Over CODEC’s en wat ze doen.

Wanneer je met video te maken krijgt, dan wordt er al snel gesproken over CODEC’s. CODEC staat eigenlijk heel eenvoudig voor ‘Coder / Decoder’ en wanneer we het over codecs hebben, hebben we het over een stukje programmatuur wat er voor zorgt, dat er voor zorgt dat jouw videobestand niet al te groot wordt.

Je weet waarschijnlijk wel, dat een afbeelding bestaat uit beeldpunten. Om zo’n beeldpunt op te slaan in kleur, hebben we voor één punt 4 bytes nodig. Drie voor de primaire kleuren en één voor de transparantie. Een afbeelding van 720 bij 1520 beeldpunten zou dan 4.377.600 bytes groot zijn. Wanneer je uitgaat van het gegeven dat een video 25 afbeeldingen per seconden laat zien, zou één seconde film ruim 100 MB groot zijn.

Dat werkt natuurlijk niet. En daarom comprimeren we de online video. Met allerlei slimme wiskundige trucs zorgen we ervoor, dat dit bestand veel kleiner kan zijn. En zo’n programma waarmee we dit comprimeren en weer laten zien als een afbeelding, noemen we een codec.

En omdat voor geluid eigenlijk eenzelfde verhaal geldt, gebruiken we ook een codec om het geluid te comprimeren.

De verschillende videoformaten

En om hier gelijk mee te beginnen, er zijn heel wat videoformaten die in een browser getoond kunnen worden. Wat bedoelen we eigenlijk als we het over een video formaat, of eigenlijk het bestandsformaat hebben. Even eerder hebben we gelezen hoe een codec de beeldgegevens comprimeert. Maar die gegevens moeten ook op een snelle manier opgeslagen kunnen worden. En wat bijna even belangrijk is, is dat ze geïndexeerd worden opgeslagen. Wanneer we 5 minuten in onze video vooruit willen spoelen, is het zonde van al het rekenwerk, indien die vijf minuten moeten worden gedecodeerd. Je wilt direct vooruit kunnen springen.

Er zijn verschillende bestandsformaten, die verschillende codecs gebruiken. Sommige van deze formaten kunnen meerdere codecs gebruiken, andere maken specifiek gebruik van een bepaalde codec. Ieder bestand heeft zo zijn eigen toepassingen en eigen voor- en nadelen. Maar omdat we het hebben over video op het Internet, willen wij alleen weten, welke bestanden we goed in onze browser kunnen gebruiken.

Er zijn echter maar enkele videoformaten die in alle browsers getoond kunnen worden. Laten we eens kijken naar de meest bekende formaten.

AVI

Het AVI videoformaat werd vroeger door een aantal browsers ondersteund. Sinds HTML5 de standaard is geworden wordt AVI niet meer ondersteund door HTML5 noch Flash. Het is dus niet aan te bevelen om AVI nog te gebruiken.

FLV

Er is een tijd geweest, dat de meeste browsers geen video ondersteunden. Om het toch mogelijk te maken video te tonen, was Flash de oplossing en er was een groot aantal videospelers wat op Flash was gebaseerd. Vandaag de dag heeft iedere moderne Internet browser video ondersteuning. FLV kan alleen via Flash worden afgespeeld. Al enkele jaren terug is Adobe, de maker van Flash, gestopt met Flash voor het Linux platform te ondersteunen. En Apple iOS – wat je op je iPhone en iPad aantreft- heeft ook geen officiële ondersteuning voor Flash. Wanneer je video in het FLV formaat aanbiedt, is het dus verstandig ook andere formaten aan te bieden.

MOV

Het MOV formaat wordt officieel niet ondersteund door HTML5. Omdat het MOV formaat van Apple is, zal het probleemloos worden afgespeeld op alle iOS en MacOS devices, maar op Windows zal eerst een QuickTime codec geïnstalleerd moeten worden. Op Android devices kan het afspelen van MOV bestanden echt problematisch worden. Dus ook hier het advies, dit formaat niet te gebruiken.

RTMP

RTMP is geen formaat, maar een protocol voor video streaming. En het werkt alleen met Flash. Dus hier geldt eigenlijk hetzelfde als voor FLV.

3GP

Dit formaat komt eigenlijk alleen voor op mobiele telefoons. De Safari browser ondersteunt dit ook, maar verder wordt het niet ondersteund in de browsers. Dus ook niet aan te bevelen.

WMV

Om dit formaat af te spelen wordt op de achtergrond de Windows Media Player geopend. Werkt dus prima onder Windows, maar niet op andere platforms.

MKV

Ooit aangekondigd als het videoformaat wat alle andere videoformaten overbodig zou maken, maar inmiddels is Chrome de enige browser die dit nog ondersteunt.

OGG

Voor velen een wat onbekend videoformaat. Maar het is één van de eerste formaten wat door een groot aantal browsers op verschillende platforms werd ondersteund. Inmiddels is het wat minder gangbaar, maar wanneer je ook video ondersteuning voor met name oudere browserversies mogelijk wilt maken, kan het handig zijn om dit formaat op te nemen.

MP4

MP4 is denk ik wel het meest bekende bestandsformaat. Het biedt een combinatie van een klein bestand en een goede beeldkwaliteit. Bovendien wordt het tegenwoordig door vrijwel iedere browser ondersteund. Nog wel tenminste, omdat Google heeft aangekondigd te overwegen de ondersteuning voor MP4 in de toekomst stop te zetten ten gunste van WebM.

WebM

Dit is een relatief nieuw formaat. In 2010 is dit formaat door Google ontworpen en voorgesteld als nieuw videoformaat voor webbrowsers. Het is eigenlijk geen ‘nieuw’ formaat maar een combinatie van de beste kenmerken van de verschillende andere formaten. Naast Google (Chrome) ondersteunen Mozilla (Firefox), Microsoft (Internet Explorer, Edge) en Opera dit formaat. Apple biedt hier nog geen ondersteuning voor in de Safari browser.

De beste keuze

Met MP4 bereik je het grootst mogelijke aantal browsers. Tenminste, op dit moment. Wil je echter de bezoeker van je website volledig ten dienste zijn, zorg dan ook, dat je WebM en eventueel ook OGG aan wordt geboden. Hoe je dit kan doen lees je in het volgende artikel.

Tenslotte

Je hebt nu een aantal belangrijke zaken met betrekking video ‘in je gereedschapskist’ opgeslagen. In het volgende artikel in deze serie laat ik je zien hoe je deze kennis ook in praktijk kan brengen. We kijken dan hoe een videobestand getoond wordt binnen een webpagina.