Aapjes kijken (en er wat van leren)

Aapjes kijken, daarvoor hoef je nu niet meer naar de dierentuin (of naar de spiegel)
Op dotsub.com kwam ik het volgende filmpje tegen:



Het is gemaakt door Ernest Cline en op deze pagina vertelt hij hoe het van het oorspronkelijke gedicht (2000) tot dit filmpje kwam.

Maar waarom laat ik dit nu zo zien?
Ik was bij dotsub.com op zoek naar een passend filmpje om op basis daarvan uit te leggen hoe je filmpjes (eventueel met ondertiteling) lokaal kunt afspelen zonder internetverbinding.
Onlangs mocht ik namelijk samen met 3 anderen een presentatie verzorgen en die 3 anderen hadden in hun presentatie ook (de verwijzing naar) een filmpje opgenomen. Uitgerekend op die bijeenkomst (van Nederland breedbandland) was er (tijdelijk) geen internetverbinding waardoor die presentaties deels in de soep liepen.
Wat ben ik dan blij dat ik er altijd voor zorg dat ik alles lokaal heb draaien!
Het enige wat je daar voor nodig hebt is uiteraard het filmpje zelf en een player.
Daarbij ga ik als volgt te werk met als voorbeeld bovenstaand filmpje.
Eerst laat ik het filmpje helemaal afspelen. Daarna ga ik vanuit IE7 gelijk naar Instellingen, Internetopties, Browsegeschiedenis instellingen, Bestanden weergeven en kom dan terecht in de directory met tijdelijke bestanden. Waarschijnlijk vind je het filmpje dan gelijk (bijna) bovenaan staan, en anders sorteer je even op grootte en vind je het ook. Dit bestand kopieer ik naar een andere directory.
Er zijn meer methodes en zelfs aparte programma's en plug-ins om filmpjes te downloaden, maar ik vind deze manier van werken altijd lekker makkelijk. Bovenstaande methode werkt trouwens ook voor Youtube filmpjes, maar dan moet je ze even een andere naam geven en de extensie .flv erachter zetten.
Vervolgens zorg ik ervoor dat ik in die directory ook de flashplayer van Jeroen Wijering heb staan.
Tenslotte maak ik een HTML pagina aan met daarin de volgende code:
<embed src="mediaplayer.swf" width="640" height="500" allowfullscreen="true" allowscriptaccess="always" flashvars="&file=naamvanfilmpje.flv" /></embed>
Door op het knopje in de playerbalk te klikken kun je het filmpje mooi schermvullend afspelen.
Als het alleen om het filmpje gaat kun je deze trouwens ook direct in je powerpointpresentatie opnemen, maar ik wilde ook de ondertiteling erbij.
Ik zie namelijk dat bijvoorbeeld de Commoncraft filmpjes tegenwoordig veel gebruikt worden in presentaties maar voor veel doelgroepen valt het effect van het filmpje weg doordat het geluid niet te verstaan is of doordat veel mensen de zeer Amerikaans uitgesproken tekst niet zo snel kunnen volgen. Vaak worden die filmpjes dan ook nog klein binnen een internetpagina afgespeeld.
Allemaal gemiste kansen!!!
Door bovenstaande methode te volgen én de ondertiteling mee te nemen is het effect veel groter (hoop ik).
Voor die ondertiteling moet je iets meer moeite doen. Als je geluk hebt is het filmpje al ondertiteld bij dotsub.com. Wanneer je je daar registreert en inlogt krijg je de mogelijkheid om het .srt bestand (dat is het bestand waar de ondertitels in staan) te downloaden. Vervolgens moet je dat bestand nog even behandelen, maar daar heeft Pierre Gorissen een mooi tooltje voor geschreven en beschikbaar gesteld.
Open het gedownloade bestand (dat je in dezelfde directory als het filmpje en de player hebt geplaatst) met kladblok en ga naar Repair my dotSUB SRT.
Plak de code uit het bestandje in het vak en klik op repair. Kopieer de code uit het resultaat en plak dit terug in het kladblokbestand dat je nu kunt opslaan. Geef het een logische naam (zonder spaties).
Je kunt nu iets aan de HTML code toevoegen en die ziet er dan zo uit:
<embed src="mediaplayer.swf" width="640" height="500" allowfullscreen="true" allowscriptaccess="always" flashvars="&file=naamvanfilmpje.flv&width=640&height=500 &captions=naamvansrtbestand.srt" /></embed>
Tenslotte kun je er ook nog voor zorgen dat het filmpje niet start met zo'n lelijk zwart vlak maar met een mooi plaatje. Dotsub.com doet dat ook dus voor het bovenstaande filmpje ga ik naar de startpagina en klik met de rechtermuisknop op het plaatje, kies voor Opslaan als en zet ook het plaatje in dezelfde directory.
Nu komt de code er zo uit te zien:
<embed src="mediaplayer.swf" width="640" height="500" allowfullscreen="true" allowscriptaccess="always" flashvars="&file=naamvanfilmpje.flv&width=640&height=500 &captions=naamvansrtbestand.srt&image=naamvanhetplaatje.jpg" /></embed>

Deze code werkt dus wanneer je een filmpje lokaal wilt afspelen, maar je kunt hem uiteraard ook online gebruiken op bijvoorbeeld je weblog.

De volledige code voor bovenstaand filmpje ziet er dan zo uit:
<embed src="http://www.karssenberg.nl/flash/mediaplayer.swf" width="640" height="500" allowfullscreen="true" allowscriptaccess="always" flashvars="&file=http://s3.amazonaws.com/dotsubflv/dancemonkeys_en.flv&width=640&height=500 &image=http://www.karssenberg.nl/flash/dancemonkeys_sshot.jpg&volume=100&captions= http://www.karssenberg.nl/flash/dancemonkeys_nl.srt" /></embed>
Je ziet dat de player, het plaatje en het tekstbestand op mijn server staan, maar dat ik het filmpje gewoon ergens anders vandaan haal. Dat pad vond ik trouwens keurig staan in de IE directory met tijdelijke bestanden!
Voor hetzelfde geld had ik daar het pad kunnen invullen naar een filmpje dat ik in het openbare gedeelte van mijn Live Skydrive heb gezet:
http://0i4bbg.blu.livefilestore.com/y1pFRlv90DdoCI5IhNJVxCJv7Vhm88yTFJX7Dr TWxqC7zkZhhFSNHsWHE66wVLRn7aq6wdxroipiSTXz8Ts-4EYYg/dancemonkeys.flv?download
Het enige wat ik in dat geval moet doen is aan het eind ?download weghalen zodat ik dit overhoud:
http://0i4bbg.blu.livefilestore.com/y1pFRlv90DdoCI5IhNJVxCJv7Vhm88yTFJX7Dr TWxqC7zkZhhFSNHsWHE66wVLRn7aq6wdxroipiSTXz8Ts-4EYYg/dancemonkeys.flv

Mocht je nu weer eens een presentator tegenkomen die wanhopig probeert filmpjes van internet te laten zien, dan mag je hem/haar wijzen op deze uitleg...

Update:
Ik heb hier en daar in de code wat spaties moeten zetten omdat anders de layout van mijn pagina overhoop werd gegooid. Het kan dus zijn dat met domweg kopiëren en plakken iets niet werkt omdat je spaties meeneemt die er niet mogen staan. Kijk in dat geval gewoon naar de broncode van deze pagina.