Maart 2006

Dus je hebt een leuk filmpje gemaakt met het cameraatje van je mobieltje, en je wilt dat wel op internet zetten zodat de hele wereld er van kan meegenieten? Tja, hoe moet je dat nou aanpakken, een video op het world wide web publiceren?

Als je een film via het internet wilt verspreiden, loop je tegen wat vragen aan. Ten eerste: welke formats (bestandssoort of MIME Type) kun je het beste gebruiken voor het aanbieden van een videootje? Hoe converteer je het ene type bestand naar het andere? En tot slot: hoe biedt je het filmpje in het gekozen format uiteindelijk aan op internet?

Dit artikel beantwoordt deze vragen. Het bevat een aantal verwijzingen naar meer informatie, voor mensen die geïnteresseerd zijn in de achtergronden, maar als artikel zou het genoeg informatie moeten bieden om iemand die een beetje computer savy is, in staat te stellen een zelf geschoten videofilmpje vanuit zijn/haar mobiele telefoon op het internet te publiceren.

De volgende vragen worden in volgorde beantwoord:

1. Welke formats kun je gebruiken?
   Drie bekende videoformats (3GPP, AVI en FLV) worden kort toegelicht met verwijzing naar meer informatie.
2. Hoe converteer je tussen die drie formats?
   Op hoofdlijnen wordt geschetst hoe je van het filmpje in het schermpje van je mobieltje komt naar een Flash movie. Benodigde Freeware Tools, alles gratis, worden onderweg vermeld met het adres waar je ze kunt verkrijgen.
3. Hoe publiceer je je filmpjes uiteindelijk op internet?
   Uiteraard leg ik tot slot ook uit hoe je je filmpjes via internet kunt publiceren, al dan niet embedded.

Video op internet publiceren via je eigen homepage is niet heel eenvoudig, maar het is goed te doen. Als je dit artikel geheel doorneemt, lukt het je vast en zeker.

Welke formats kun je gebruiken?

Als je een filmpje opneemt met je mobiele telefoon, wordt dat opgeslagen als een 3GPP-bestand (3GPP staat voor The Third Generation Partnership Project). Met een aantal mobieltjes kan je op het mobieltje zelf het bestand wat aanpassen (bijvoorbeeld inkorten, er een geluidsfragment aan toevoegen of filmpjes aan elkaar plakken). Als dat met jouw mobieltje kan, doe dat dan ook met het mobieltje. Er zijn maar weinig videobewerkers gratis beschikbaar, dus raad ik je aan te gebruiken wat je al vrijelijk beschikbaar hebt.

Het 3GPP-bestand is bedoeld om van mobieltje naar mobieltje te verzenden en is in zijn aard derhalve al behoorlijk gecomprimeerd. Vijftien seconden film op een kwaliteit van 176x144 pixels heeft (inclusief het geluid) een omvang van ongeveer 400kB. Dat is heel redelijk.

Een bekend format voor bewegend beeld op het internet is AVI (dat staat voor Audio Video Interleave, een format ontwikkeld door Microsoft). AVI werkt in ieder geval op iedere PC die op een Microsoft OS werkt.

Microsoft heeft met AVI een (de facto) standaard gecreëerd. Voor gebruik computers met almaar groeiende capaciteit (zowel verwerkings- als opslagcapaciteit) is/was compressie niet zo van belang. AVI is derhalve standaard niet gecomprimeerd. Vijftien seconden beeld en geluid in een niet-gecomprimeerd ofwel RAW AVI-bestand van 176x144 pixels kan ruim 11Mb groot zijn.
Voor toepassing van beeldmateriaal op het internet is een gecomprimeerde versie beter (in verband met download-tijd en het gebruik van bandwidth). Gecomprimeerd kan de omvang van dat vijftien seconden durende AVI-bestand worden teruggebracht naar zo'n 330kB bijvoorbeeld (afhankelijk van de gebruikte compressie), waarbij de beeldkwaliteit van het filmpje nog acceptabel blijft.

Het laatste bekende format dat ik in dit artikel behandel, is FLV (dat staat voor Flash Video). Macromedia's Flash is sinds een decennium aan een gestage opmars bezig. Voordelen van FLash zijn de omvang en kwaliteit van de bestanden (vijftien seconden van 176x144 pixels gebaseerd op eerder genoemd AVI-bestand, met geluid, is ongeveer 1Mb groot; als kwaliteitsverlies niet erg is, kan dat worden teruggebracht naar ongeveer 300kB) en interoperabilitiet (de Flashplayer is behoorlijk goed gepenetreerd onder de internetgebruikers; aangenomen wordt dat ruim 90% van de surfers een recente Flash plug-in heeft draaien).

Een behoorlijk nadeel bij Flash is echter dat je kennis moet hebben van het coderen van het begeleidende SWF-bestand (SWF staat voor Shockwave Flash), waarmee het filmpje moet worden afgespeeld of bereid moet zijn behoorlijk te betalen voor een (semi)professionele editor. En dat alleen maar omdat je een filmpje uit je mobieltje op je site wil zetten . Dat moet anders kunnen.

Gelukkig kan het maken van een Flash Video ook anders, zonder kennis van Flash en zonder er voor te hoeven betalen.

Hoe converteer je 3GPP naar AVI of FLV?

Ik ga in dit artikel niet in op het bewerken van videobeeld. Ik heb daar nog geen goede tools voor gevonden (tips zijn welkom!) en ik heb er geen noemenswaardige kennis over. Als je je filmpje wilt bewerken voor je het publiceert, doe je dat het beste met de software van je mobieltje of met de software die met je mobiele telefoon is meegeleverd (if any). Pas als je filmpje inhoudelijk is hoe je hem wenst, kom je aan deze paragrafen toe: hoe converteer je het vervolgens (als dat al nodig is)?

Je hebt een filmpje, een 3GPP-bestand dat je wilt publiceren in je website op je homepage. Je hebt het al op de harde schijf van je computer staan, en nu wil je verder. Het kan zijn dat je besluit om het te publiceren As Is. Het 3GPP-format wordt ondermeer afgespeeld met de QuickTime Player, een multimediaspeler van Apple voor Windows van een prima kwaliteit die een groeiende belangstelling geniet.
Als je het 3GPP-bestand zondermeer wilt publiceren, is er geen conversie nodig. In dat geval kun je door naar hoe je kunt publiceren verderop in dit artikel.

Maar als je toch liever een ander format wilt aanbieden, of meerdere formats naast elkaar zodat werkelijk iedereen met jouw video uit de voeten kan, zul je je film van 3GPP-format moeten converteren naar bijvoorbeeld AVI of FLV. Rechtstreeks naar FLV converteren kan niet. Dat moet via AVI. Daarom behandel ik de conversie in die volgorde:

1. [ 3GPP ] → [ AVI ]
2. [ AVI ] → [ FLV ]

Converteer [ 3GPP ] → [ AVI ]

Vind een goed conversieprogrammaatje. Zelf gebruik ik Mobile 3GP Converter hiervoor. Dat gratis programma (freeware) zet je 3GPP-video om in een ongecomprimeerd AVI-bestand.

Dat werkt heel eenvoudig: start Mobile 3GP Converter. Kies voor [single file conversion] en selecteer het te converteren bestand. Vink eventueel aan dat je alleen de video wilt hebben (of juist alleen het geluid; geen van beide zelf getest) en voer de conversie uit. Klaar. Je hebt nu van je filmpje van je mobiele telefoon en ongecomprimeerde AVI-video gemaakt.

Meestal zal dit ongecomprimeerde AVI-bestand nogal een omvang hebben (een Mb per seconde bijvoorbeeld), wat het ongeschikt maakt voor publicatie op en distributie via het internet. Daarom zul je het willen comprimeren.
Ik gebruik daar VirtualDub voor, alweer gratis software. VirtualDub gebruikt codecs (stukjes software die het comprimeren en decomprimeren van multimediadata mogelijk maken, zonder dat storend kwaliteitsverlies optreedt) die al op je computer zijn geïnstalleerd voor multimediaweergave.

Om je video te comprimeren start je VirtualDub op. Let maar niet te zeer op de interface die wellicht wat afwijkt van wat je bent gewend. Sleep het te comprimeren bestand gewoon naar het VirtualDub-venster om het te openen, klaar voor de bewerking. Bewerkingen lopen verder allemaal via het menu.

Je kunt voor je het bestand comprimeert, nog wel knippen en plakken in je videofilmpje of fragmenten uit andere videofilmpjes toevoegen of beide. Maar dat soort behandelingen laat ik hier verder onbesproken. Probeer het programma gewoon eens en ontdek zelf wat je er wel en niet mee kunt doen.

Als je klaar bent met je bewerkingen en je wilt het comprimeren uitvoeren, let er dan op dat je beeld en geluid apart moet verwerken. Kies in het menu [Audio] in ieder geval voor de optie full processing. Verder kun je het geluid er helemaal afknippen door de optie No audio te kiezen. Je kunt ook juist geluid uit een extern bestand toevoegen door via de optie WAV audio... een aparte bron te selecteren (niet zelf getest).

Vervolgens kies je in het menu [Video] de optie Compression... (of je drukt de toetscombinatie Ctrl+P in vanuit het hoofdscherm van de applicatie). Hiermee verschijnt een lijstje met beschikbare codecs. Speel een beetje met welke codec welke kwaliteit en omvang gecomprimeerde AVI oplevert.
Zelf kies ik op dit moment voor de Microsoft MPEG-4 Video Codec V2 en stel daarbij een waarde voor keyframes in op 15, een waarde voor compression rate op 80 en een waarde voor data rate op 2600. Het resultaat is een video van behoorlijke kwaliteit met toch een behapbare omvang.

Kies in het menu [Video] voor de optie full processing. Toets F7 of kies in het menu [File] voor de optie Save as AVI.... Geef een locatie en bestandsnaam op en sla je gecomprimeerde filmpje op.
Zelf neem ik de gebruikte codec als afkorting in de naam op, bijvoorbeeld /foo/bar.ms_mpeg4_v2.avi. Als ik zoek naar de beste verhouding kwaliteit/omvang kan ik zo eenvoudig meerdere bestanden maken en later met elkaar vergelijken.

Je hebt nu een bruikbare AVI die je zondermeer kunt upload'n naar je website server om te publiceren in je pagina's of op een andere manier te distribueren.
AVI wordt vooral gespeeld in Microsoft's Windows Media Player, een player/plug-in die op iedere computer met een Microsoft OS beschikbaar is, maar niet in iedere browser behalve in Internet Explorer zomaar probleemloos draait.

Je kunt daarom besluiten dat je met dit format eigenlijk nog steeds niet tevreden bent.

Converteer [ AVI ] → [ FLV ]

Om AVI te converteren naar een Flash Video moet je wederom een programmaatje download'n dat dat voor je kan doen. Zelf gebruik ik de gratis Riva FLV Encoder hiervoor, die dat probleemloos voor me doet. Het is uiteraard freeware.

Deze applicatie is zeer eenvoudig in gebruik. Start het programma. Sleep de te converteren AVI naar het venster van het programma (of browse er naar). Neem de gecomprimeerde versie. Ik heb het niet uitgebreid getest, maar wel gemerkt dat een ongecomprimeerde AVI zich niet (zondermeer) laat encoden tot een Flash Video.
Geef een pad op en een bestandsnaam voor het FLV-bestand. Stel in het rechterdeel van het venster de opties en parameters in, die je voor je Flash Video nodig hebt, zoals movie size, framerate, bitrate (dat de grootste invloed heeft op de uiteindelijke omvang; hoe lager de bitrate, hoe kleiner het bestand, en hoe lager de kwaliteit uiteraard) en wel of geen audio. Druk op de grote knop met 'Encode'. Klaar.

Je hebt nu drie verschillende bruikbare bestanden van je oorspronkelijke video die je met je mobiele telefoon maakte. (1) Het originele 3GPP-bestand, (2) een gecomprimeerde AVI (naast de onbruikbare ongecomprimeerde versie) en (3) een Flash Video. Deze filmpjes zijn alle drie probleemloos te publiceren op het internet, in je homepage. Welke je daarvoor gebruikt? De keuze is aan jou.

Hoe publiceer je je filmpjes op internet?

Publiceren van 3GPP en AVI

Je kunt het 3GPP- en het AVI-bestand zondermeer uploaden naar de server van je website. Zorg wel dat je server de juiste MIME Types gebruikt en stel die eventueel in (of laat die instellen door je host).
Voor 3GPP is dat MIME Type: video/3gpp met de extensies .3gp en .3gpp. Voor AVI is dat MIME Type: video/x-msvideo met de bestandsuitgang .avi. Daarbij opgemerkt overigens dat ik betere ervaringen heb met .3gp dan met .3gpp. Ik heb onder andere Firefox zien struikelen over die extra 'p' in de extensie. Een weetje voor een probleemloze naamgeving van je bestanden.

Vervolgens kun je in je html-pagina's eenvoudige tekstlinks opnemen naar deze bestandjes, waarmee je bezoeker ze kan download'n en afspelen. Met bijvoorbeeld <a href="foo/bar.avi">poes gaapt</a> biedt je je bezoekers een hyperlink aan in je pagina waarmee ze het filmpje van jouw poes die gaapt kunnen bekijken (in dit geval een AVI).

Maar misschien wil je het filmpje als illustratie in de pagina laten zien, in plaats van het beschikbaar stellen via een link. In dat geval moet je het filmpje met <object> en <embed> in de markup van je pagina plaatsen (embed is geen officieel html4.01 element overigens).
Achtereenvolgens een voorbeeld van de broncode voor het 'embedden' van een 3GPP-video en voor een AVI-filmpje (ze lijken op elkaar, maar ze zijn op details verschillend):

Code snippet to embed 3gpp:

<object
 classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
 codebase="http://www.apple.com/qtactivex/qtplugin.cab"
 width="176" height="156"
 standby="Video wordt geladen..."
 >
  <param name="src" value="foo/bar.3gp">
  <param name="type" value="video/quicktime">
  <param name="autoplay" value="true">
  <param name="controller" value="true">
  <param name="loop" value="true">
    <embed
     src="foo/bar.3gp"
     type="video/quicktime"
     pluginspage="http://www.apple.com/quicktime/download/"
     width="176" height="156"
     autoplay="true"
     controller="true"
     loop="true"
     >
    </embed>
</object>

Code snippet to embed avi:

<object
 classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
 codebase="http://activex.microsoft.com/activex/controls/
           mplayer/en/nsmp2inf.cab#Version=5,1,52,701"
 width="176" height="180"
 standby="Video wordt geladen..."
 >
  <param name="fileName" value="foo/bar.avi">
  <param name="Type" value="video/x-msvideo">
  <param name="AutoStart" value="True">
  <param name="ShowControls" value="True">
  <param name="AutoRewind" value="True">
  <param name="Loop" value="True">
    <embed
     src="foo/bar.avi"
     type="video/x-msvidea"
     pluginspage="http://www.microsoft.com/Windows/Downloads/
                  Contents/MediaPlayer/"
     width="176" height="180"
     autostart="true"
     showcontrols="false"
     autorewind="true"
     loop="true"
     >
    </embed>
</object>

Als je de juiste code voor jouw type bestand uit deze pagina kopieert en in de bron van jouw pagina plakt, moet je alleen nog een paar dingen aanpassen en je kunt je pagina publiceren, met de video er in. Wat je moet aanpassen is:

• Voor de hoogte en breedte van je video (met het venstertje en de controls van de speler!): de waarden voor de attributen width en height bij zowel het element object als bij het element embed.
• Voor het juiste pad en de juiste bestandsnaam:
  1. de waarde voor de attribuut/waarde value="foo/bar.ext" bij het element param met de attribuut/waarde name="fileName"
  2. de waarde van attribuut/waarde src="foo/bar.ext" van het elemen embed.

Ju kunt ook nog andere parameters aanpassen, maar dat hoeft niet. Wat je kunt aanpassen is:

Er zullen meer parameters zijn, maar die ken ik zelf (nog) niet. Experimenteer gewoon een beetje met wat je nu al weet en pas dit toe naar eigen smaak.
Let wel op dat je de bezoekers van je site bijvoorbeeld de mogelijkheid geeft om een fragment waar geluid bij zit, uit te schakelen. Of, wanneer je [autoplay="false"] hebt ingesteld, dat je de bezoeker het makkelijk maakt het fragment af te spelen (en dus [controller="true"] gebruikt).

Beetje spelen, beetje logisch nadenken, en je filmpjes kunnen zonder problemen worden gepubliceerd.

Publiceren van FLV

Tot slot kun je ook nog eens uitwijken naar Flash Video, het laatste bestandsformat dat ik in dit artikel behandel. Dit vergt een net iets andere aanpak, want behalve het bestand met de extensie .flv, moet je ook nog een script (extensie .swf, zijnde een Shockwave Flash Object) naar je server uploaden, dat er voor zorgt dat de FLV in de client van je bezoeker wordt afgespeeld.
Zelf gebruik ik hiervoor FLV Player die redelijk eenduidig is in te stellen.

Wat ik heb gedaan om FLV's te kunnen publiceren, is het betreffende scriptbestand, flvplayer.swf, uploaden in een toepasselijke map (samen met flvplayer.fla waarin de interface, de chrome voor de player zit). Vervolgens upload ik de video's die ik wil afspelen naar diezelfde map. Van iedere flash video maak ik van het eerste frame bovendien een still (een enkel frame-pje uit een video, als een foto), een jpeg.
Dat kan met IrfanView bijvoorbeeld: open het oorspronkelijke 3gpp-bestand in IrfanView. Zet het beeld stil op het eerste frame en kopieer dat naar een afbeelding. Sla die afbeelding op als jpeg.
Die still geef ik dezelfde naam als de te tonen FLV (met een andere uitgang uiteraard; het is immers een jpeg) en sla hem op in dezelfde map. Als de video niet draait, wordt de still in de speler weergegeven, als het goed is.

Ergens op de server heb je nu dus de bestanden flvplayer.swf, flvplayer.fla, voorbeeld.flv en voorbeeld.jpg bij elkaar gezet. Nu wil je voorbeeld.flv nog in je pagina opnemen.
Dat kan met de volgende code:

Code snippet to embed FLV:

<object
 type="application/x-shockwave-flash"
 width="176" height="158"
 wmode="transparent"
 data="foo/flvplayer.swf?file=voorbeeld.flv&autoStart=true"
 >
  <param name="movie" value="foo/flvplayer.swf?file=voorbeeld.flv&autoStart=true">
  <param name="wmode" value="transparent">
</object>

Resultaat

Talk, talk, talk, talk. Benieuwd naar hoe dat er allemaal uit komt te zien? Bekijk dan de testpagina met videoclipjes en fragmentjes die ik bouwde om bovenstaand verhaal bij elkaar te leren.

Boy-o-boy, wat zou ik blij zijn geweest met deze pagina, samen met het voorbeeld, toen ik net begon te ontdekken wat video en internet nou wel en niet samen konden betekenen voor mijn site.

Have fun!

| Categorie: webontwerp |