Vorig jaar vertelde ik dat ik voor de Moodle op je USB screencast een ASX-bestand had gemaakt dat het ook mogelijk maakte om (net als bij de Flash-versie) in Windows Mediaplayer te navigeren in de video. Maar helaas was die navigatie na het invoegen van die video in een webpagina niet zichtbaar te maken. Tenminste tot nu toe.
Want ik kon het daar natuurlijk niet zomaar bij laten zitten.
De uitdaging
Het ASX-bestand dat ik gebruik bevat een aantal verwijzingen naar de SURFnet videotheek die er voor zorgen dat de video vanaf een bepaald moment (aangegeven in seconden vanaf het begin van de video) begint af te spelen.
Als je het ASX-bestand opslaat op je schijf en dan opent in een tekst-editor (notepad of kladblok bijvoorbeeld) dan zie je dat het een XML-bestand is met een aantal <entry> elementen zoals deze:
Wat ik wilde was dat ik in de browser, net als in Mediaplayer, een lijstje titels van entries zou krijgen, en als je daar op zou klikken dan moest de Mediaplayer naar de juiste positie in de screencast gaan.
Uiteraard wilde ik niet nog een keer de informatie die in het ASX-bestand al zit invoeren. Daarom ging ik eerst op zoek naar voorbeelden van Javascript voor het werken met XML-bestanden. Die paste ik aan aan de structuur van ASX-bestanden.
Zo kon ik de titel van de pagina aanpassen aan de titel in het ASX-betand en de titel + href bij elke entry gebruiken om een lijst met links te maken die bij klikken een functie zouden aanroepen die de Mediaplayer dan naar de juiste plek in de video zou laten gaan.
Het probleem
Een probleem dat heel lang een onoverkomelijke hobbel leek was het aansturen van de Mediaplayer in Firefox met behulp van Javascript. Bij het klikken op een van de links is het namelijk de bedoeling dat de Mediaplayer vooruit/terug springt naar het moment in de tijd dat daar bij hoort. Dat zou moeten door het filename resp. het src attribuut in de player aan te passen aan de href die je bij elk entry ziet staan met behulp van Javascript.
En, ik hoor het graag als ik niet de juiste informatie gevonden heb, maar de voorbeelden die ik tegen kwam werken in ieder geval niet in Firefox.
De enige oplossing die ik er voor las was het dynamisch vervangen van het gehele codeblok voor de player.
(klinkt een beetje ingewikkeld)
Het probleem #2
Met al die aandacht voor AJAX zou je bijna vergeten dat het helemaal niet zo vanzelfsprekend is dat een stukje Javascript zowel in (bijvoorbeeld) Firefox als Internet Explorer werkt. Ik moet bekennen dat ik het niet op meer dan FF2 en IE6 getest heb, maar er voor zorgen dat het daar werkte was al genoeg werk.
Voorbeeldscripts die je links en rechts tegen komt zijn niet vanzelfsprekend cross-browser! (tenzij er natuurlijk expliciet bij staat dat het op meerdere browsers getest is).
Het resultaat
Net als bij het gebruik van de links in Mediaplayer zelf is het springen naar een bepaalde plek in de video iets wat gepaard gaat met enige “buffertijd”. Maar het werkt.
De werkwijze met het in zijn geheel vervangen van de playercode betekende ook dat ik dat mechanisme net zo goed bij het voor de eerste keer opbouwen van de pagina kon gebruiken.
En dat leverde een erg herbruikbaar geheel op. Kijk maar naar onderstaande code:
Dat is de code voor deze pagina.
Het enige wat ik hoef aan te passen is:
* naam van het ASX-bestand
* breedte en hoogte van de video (+navigatie)
* het ID van de mediaplayer
* het ID van de plek waar de navigatie moet komen
Die laatste twee heb ik variabel gemaakt om enige flexibiliteit in het pagina-ontwerp te houden.
Hergebruik
Mocht je de achterliggende code willen gebruiken, ga dan gerust je gang. Het geheel bestaat uit drie bestanden (rechtermuisknop en opslaan als…):
* stream.htm (gewoon een platte HTML)
* mediaplayer.js (doet het werk)
* layout.css (de opmaak)
Opmerkingen en aanvullingen zijn uiteraard van harte welkom.
Ook interessant:
