SURFmedia High Definition video embedden #2

SURFMedia Code - Klik voor grotere versie

Michiel Schok van SURFnet reageerde afgelopen week op mijn post over het Embedden van High Definition Video die bij SURFmedia.nl is opgeslagen. Hij gaf aan dat je wél kon bepalen hoe groot de video weergegeven wordt als je een iframe gebruikt om de video aan een pagina toe te voegen. Die iframe optie is nodig als je een video hebt waarvoor gebruikers ingelogd moeten zijn.

En hoewel het nog steeds geen oplossing is voor het feit dat de benodigde bandbreedte bij het op deze manier verkleinen van de weergave niet omlaag gaat, maakt dit het wel mogelijk om ook voor SURFmedia een pagina te maken waarmee je eenvoudig de benodigde codes kunt genereren.

Je hoeft hier alleen maar de URL in te plakken die je ziet bij de optie “Embedded player”, dan (eventueel) de gewenste breedte van de weergave aan te passen en op “Generate!” te drukken.
De pagina genereert dan (net als bij YouTube) vier verschillende codefragmenten:
* Embedded weergave van standaard definition video
* iframe weergave van standaard definition video (noodzakelijk bij gebruik afscherming)
* Embedded weergave van breedbeeld video (zoals bij HD gebruikelijk)
* iframe weergave van breedbeeld video (zoals bij HD gebruikelijk; noodzakelijk bij gebruik afscherming)

Je kunt de code dan eenvoudig selecteren door in het vak te klikken, kopiëren en dan in je webpagina/blogpost/leeromgeving plakken. Voor High Definition video is de breedte van 475 pixels prima, als je een kleinere video hebt (dus minder breed dan 475 pixels) , dan moet je dat getal even aanpassen aan de breedte die je bij de video op SURFmedia ziet staan. Het script doet dan de rest. Ik heb het overigens met opzet hier over breedbeeld en niet (alleen) over High Definition, omdat er ook video’s bij SURFmedia.nl voor komen die bijvoorbeeld als formaat 320×180 hebben. Dat is geen High Definition, maar wél 16:9 verhouding. Voor meer uitleg hierover verwijs ik je graag naar dit bericht en de bijbehorende informatie.

Een voorbeeld van video die je met de iframe code zult moeten invoeren zijn de video’s die onderdeel uitmaken van de Academia collectie. Hieronder heb ik als voorbeeld een aflevering Vroege Vogels TV ingevoegd (breedbeeld, niet HD):

Bekijk op SURFmedia.nl
Doordat ik hier een iframe gebruik zie je eerst het inlogscherm van SURFmedia voordat je (als je kunt inloggen) de video kunt bekijken.

Voor gebruik binnen de Natschool-omgeving van Fontys gaat dat overigens gemakkelijker, studenten en medewerkers hoeven dan niet nogmaals in te loggen en krijgen dan meteen de video te zien. Ik zal nog een screencast maken die laat zien hoe dat werkt.
[update] In Safari/Windows XP werkte het via het iframe inloggen overigens niet. De Fontys loginpagina zei dat mijn browser geen cookies aan had staan. Daarom is de (optionele) link onder de iframe handig. Via die route kon ik het alsnog werkend krijgen in Safari omdat toen inloggen wél lukte.
Toen ik in Safari al ingelogd was op SURFmedia en toen dit bericht in de browser opende krijg ik overigens de video ook meteen te zien.

Voor nu heb ik in ieder geval voor eigen gebruik een werkbare oplossing voor het inplakken van de video’s van SURFmedia.nl
Hergebruik van het script is wat mij betreft helemaal vrij. Je kunt het gewoon vanaf deze pagina gebruiken, opslaan voor gebruik op je eigen computer/server (alle code zit in de vorm van JavaScript in de pagina) en natuurlijk mag SURFnet het ook gebruiken om in te bakken in de SURFmedia website als ze dat willen! ;-)