[ 5 mei 2011: update met nieuwste versies en verwijzingen doorgevoerd ]
[ 5 mei 2011: voor wijzigen van UI van SMF / Player Framework, zie mijn andere post ]
Stel je wilt video op je website aanbieden en je wilt gebruik maken van Silverlight. Je kan natuurlijk op basis van Silverlight een hele player zelf gaan maken, maar vaak is daar niet de tijd en/of kennis voor om dat allemaal te bedenken. En dat hoeft ook niet, want er is een eenvoudige manier om een functionele video player binnen minuten op je website te krijgen.
De sleutel voor deze video player ligt in de open source oplossing die op Codeplex te vinden is: het Microsoft Silverlight Media Framework. Hierin is een player opgenomen die snel op te nemen is. De player is eenvoudig te gebruiken, maar desgewenst biedt het ook geavanceerde mogelijkheden. Hieronder valt het gebruik van een smooth streaming video bron, markeringen in de video, enzovoort. De volgende versie zal ook ondersteuning voor verschillende advertentiemogelijkheden bieden. De oplossing is ook te gebruiken in combinatie met het Microsoft Silverlight Analytics Framework, wat ook als open source oplossing wordt aangeboden op Codeplex. Hieronder is de player te zien met een smooth stream.
Hieronder worden een aantal mogelijkheden gegeven om een player toe te voegen:
- Zelf een SMF Player maken
- Kant en klare SMF Player gebruiken
- Kant en klare licht gewicht player gebruiken
Optie 1: Zelf een SMF Player maken
Maar even terug naar de basis. Wat heb je nodig om een player te maken op basis van deze spullen?
A. Visual Studio 2010 (gratis Express versie volstaat)
B. Silverlight Toolkit
Deze twee producten zijn eenvoudig te installeren door de Web Platform Installer te installeren en de keuzes voor (een van) deze producten te maken.
C. Microsoft Silverlight Media Framework
Deze is te vinden op http://smf.codeplex.com. Ga naar de download pagina voor de download van de binaries en/of de sources. Tegenwoordig is er ook een installer te vinden (onder Additional Downloads) waardoor alles eenvoudig te installeren is. Er worden dan ook templates voor Visual Studio geinstalleerd.
Player Framework (SMF) Templates voor Blend
Als je templates voor Blend wilt hebben, download de Blend templates die ik gemaakt heb voor Player Framework v2.5 and Blend 4.0.
Als je op Vista of Windows 7 werkt, deblokkeer de zip-file voordat je hem uitpakt. Geeft rechter muisklik op de gedownloade zip-file, en selecteer Eigenschappen. In the dialoog klik Deblokkeren.
Vervolgens de zip-file uitpakken door rechter muisklik en Uitpakken kiezen. Kies de “Mijn Documenten” folder om de bestanden in uit te pakken. Op Windows 7 is dat standaard C:\Users\[gebruikersnaam]\Documents.
Bevestig als er wordt gevraagd om mappen samen te voegen. De templates zijn nu te gebruiken in Blend bij New Project ….
D. IIS Smooth Streaming Player Development Kit
Deze kit moet geinstalleerd worden, maar als je de setup van SMF/Player Framework hebt gebruikt is die automatisch geinstalleerd. Anders is deze kit hier te downloaden. Deze is nodig voor de smooth streaming ondersteuning in de player.
Om een player te maken doe je vervolgens het volgende:
1. Start Visual Studio 2010
2. Maak een nieuw project van type SMF Smooth Streaming Application.
Deze template is geinstalleerd als je de setup van SMF/Player Framework hebt gebruikt. Je hebt dan een kant en klaar scherm met player control die een voorbeeld PlaylistItem heeft die gelijk kan spelen.
3. Start de applicatie (F5).
Optioneel kan vervolgens de player worden aangepast in functionaliteit en look-and-feel. Kijk hiervoor ook naar mijn recente post en de opgenomen sessie op Channel9.
Optie 2: Kant en klare SMF Player gebruiken
Als je niet door het hele proces wilt om de player zelf te maken, dan kan je ook een kant en klare versie van de SMF Video Player gebruiken. Die player gebruikt InitParams bij de OBJECT tag in de HTML. Hierdoor is de player multi-functioneel geworden en wordt aangestuurd door de OBJECT definitie in de HTML. Daar geeft je in aan wat de URL van de video is die gespeeld moet worden, of het initieel laden van de video uitgesteld moet worden en of het een smooth stream is. Hier volgen de stappen.
Dit heb je nodig:
A. De gecompileerde XAP file
Ga naar http://smf.codeplex.com/ en klik op Donwloads. Onder Additional Downloads staat de link Smooth Streaming Samples Player. Dit is een zip-bestand dat een Silverlight applicatie bevat. Dit moet je doen:
1. Voeg een OBJECT tag aan je HTML pagina toe
Je voegt hiermee de player toe aan je pagina en geeft door de parameters aan wat de player moet doen. Dit gebeurd door gebruik te maken van de initParams van de OBJECT tag. Er zijn 4 parameters die je kan gebruiken:
- mediaurl – dit is de URL van de video die gespeeld moet worden. Dit kan de video file zijn of de manifest file van een smooth stream
- autoload (optioneel; default ‘false’) – hiermee geef je aan of het initieel laden van de video uitgesteld moet worden totdat er daadwerkelijk op de Play button wordt geklikt. Waarde ‘true’ of ‘false’.
Als er meerdere parameters gebruikt worden, dan worden die achter elkaar opgenomen in de initParams waarde en gescheiden door komma’s. Dit is een voorbeeld:
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%">
<param name="source" value="ClientBin/SMF_SmoothStreaming1.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.50826.0" />
<param name="InitParams"
value="mediaurl=http://video3.smoothhd.com.edgesuite.net/ondemand/Big%20Buck%20Bunny%20Adaptive.ism/Manifest" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0"
style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376"
alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object>
Optie 3: kant en klare licht gewicht player gebruiken
De SMF Player is een erg mooie player met veel mogelijkheden, maar daardoor is hij ook wat groter dan misschien nodig. Dat kan wel eens te veel van het goeie zijn, vooral als je de geboden functionaliteiten (zoals smooth streaming) niet gebruikt. Een simpel alternatief is de Silverlight Video Player, ook gemaakt door Tim Heuer. Deze kent twee varianten: een standaard versie en een uitgebreide versie. De uitgebreide versie kan alles wat de standaard versie kan, maar heeft ook ondersteuning voor een opstart thumbnail als de video nog niet is geladen en het gebruik van markers en ondertiteling. Beide controls worden aangestuurd door de initParams van de OBJECT tag in de HTML.
Dit heb je nodig:
A. De gecompileerde XAP file
Kopieer de gekozen XAP file naar een folder in je website.
Dit moet je doen:
1. Voeg een OBJECT tag aan je HTML pagina toe
Je voegt hiermee de player toe aan je pagina en geeft door de parameters aan wat de player moet doen. Dit gebeurd door gebruik te maken van de initParams van de OBJECT tag. De belangrijkste parameters zijn:
- m – dit is de URL van de video die gespeeld moet worden.
- autostart (optioneel; default ‘false’) – hiermee geef je aan of de video direct gestart moet worden. Waarde ‘true’ of ‘false’.
- thumbnail (optioneel; alleen in uitgebreide versie) – Hiermee kan een opstart thumbnail worden aangegeven. Gebruik hiervoor een PNG of een JPG.
Een overzicht van alle parameters is te vinden op deze pagina.
Als er meerdere parameters gebruikt worden, dan worden die achter elkaar opgenomen in de initParams waarde en gescheiden door komma’s. Dit is een voorbeeld van het gebruik van de simpele player:
<object data="data:application/x-silverlight-2" type="application/x-silverlight-2"
width="320" height="240">
<param name="source" value="/VideoPlayerM.xap" />
<param name="background" value="black" />
<param name="minRuntimeVersion" value="3.0.40818.0" />
<param name="initParams" value="m=http://myserver/videos/video.wmv,autostart=true,autohide=true" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0"
style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=161376"
alt="Get Microsoft Silverlight" style="border-style:none" />
</a>
</object>