4DotNet Developers Blog

Silverlight is sinds de introductie in 2005 / 2006 aan een geweldige opmars bezig. Was de eerste versie (1.0), een door Microsoft te snel gepushte versie, welke alleen bestond uit XAML met als framework Javascript, tegenwoordig met Framework 4.0 en de introductie van RIA services is het zelfs een platform geworden waarin de nodige business applicaties geschreven worden.

De insteek van Silverlight vanuit Microsoft is geweest om als tegenhanger van Adobe Flash / Flex te fungeren. Voor .Net ontwikkelaars is het een eenvoudige stap om vanuit de ervaring met bijvoorbeeld Web of Forms, een overstap te maken naar WPF / Silverlight. Het enige verschil is dat de “voorkant” in Silverlight uit XAML bestaat.

Sinds begin dit jaar ben ik in Silverlight aan het ontwikkelen. Bij versie 3 / 3.5 zag je duidelijk dat het geheel nog niet af was. Zaken als RIA services waren er niet of alleen als BETA beschikbaar en dus in mijn ogen niet geschikt om in een project in te zetten.

Waar Silverlight een groot marktaandeel in heeft verworden is het Media gedeelte. Zo werden in 2008 door de NOS en werelwijd beelden van de Olympische spelen door middel van een Silverlight streaming videoplayer getoond. De afgelopen maand ben voor een organisatie bezig geweest met het maken van een videoplayer, met specifieke wensen.

Het specifieke aan deze player is, dat deze via HTML 5 elementen aangestuurd wordt en bestuurd wordt. Dus alle controls zitten niet in de Silverlight player, maar worden via een overlay over de player getoond. Over de aansturing van de player, verderop in het blog meer.

Een aantal zaken zal ik in dit blog kort toelichten:
- XAML voor een Videoplayer
- Aansturen van de Videoplayer via zowel Javascript als C#
- Terugkoppeling vanuit de Videoplayer naar de pagina m.b.t. Javascript en C#
- Events voor de Videoplayer

De XAML voor een Videoplayer ziet er vrij eenvoudig uit, in Silverlight maak je gebruik van het Control MediaElement:

<MediaElement x:Name=”MediaPlayer” AutoPlay=”True” HorizontalAlignment=”Center” VerticalAlignment=”Center” />

Om een video af te spelen, heb je feitelijk alleen het url van de video nodig. Alle specifieke opties die voor de organisatie gecreeërd zijn, laat ik hier even buiten beschouwing.
Aangezien de player via Javascript aangestuurd wordt, moet het voor de player duidelijk zijn, dat er besturing van buitenaf plaatvindt.
Allereerst moet er binnenin de Silverlight applicatie een Scriptable object gecreeërd worden, dit gebeurd in de constructor.
De constructor ziet er dan (gefilterd) als volgt uit:

public MainPage()
{
	//Standard initializing the components from the XAML
	this.InitializeComponent(); 
 
	HtmlPage.RegisterScriptableObject("slPlayer", this);
}

Vervolgens is er specifiek een property MediaUrl gemaakt, welke aan het object gekoppeld wordt, wat in de constructor gecreeërd wordt.
De property MediaUrl die het MediaElement aanstuurd ziet er vervolgens als volgt uit:

///
/// Gets or sets the Url for the MediaPlayer
///
[ScriptableMember]
public string MediaUrl
{
	get
	{
		return this.mediaUrl;
	}
 
	set
	{
		this.mediaUrl = value;
		this.MediaPlayer.Source = new Uri(this.mediaUrl);
	}
}

Hierin is het attribuut

[ScriptableMember]

dus van belang, heeft een property dit attribuut niet, dan is deze property niet beschikbaar voor het Javascript object.

Onderstaand een voorbeeld van hoe het Silverlight object via Javascript aangestuurd kan worden. Hierin heb ik het Silverlight object (welke binnen de Html geplaatst wordt), zelf weggelaten, maar ga ik ervanuit dat deze het id “SilverlightVideoPlayer” heeft.
Het ophalen van het MediaUrl wordt in onderstaand voorbeeld ook getoond.

//Place the Silverlight Object  into variable
var player = document.getElementById("SilverlightVideoPlayer");
 
//Place the ScriptableObject into a variable
var scriptableObject = player.content.slPlayer;
 
//Sets the MediaUrl for the Silverlight VideoPlayer
scriptableObject.MediaUrl = "http://hierkomthetvideourl.nl/video.asf";
 
//Gets the MediaUrl from the Silverlight VideoPlayer
var mediaUrl = scriptableObject.MediaUrl;

In bovenstaande voorbeelden hebben we het MediaUrl gezet en doordat het MediaElement

AutoPlay="True"

heeft, zal de Video vanzelf afspelen.
Het aansturen van het MediaElement in C# gebeurd op dezelfde eenvoudige manier:

///
/// Method to Pause the Video
///
[ScriptableMember]
public void Pause()
{
	this.MediaPlayer.Pause();
}
 
///
/// Method to Play the Video
///
[ScriptableMember]
public void Play()
{
	this.MediaPlayer.Play();
}
 
///
/// Method to Stop the Video
///
[ScriptableMember]
public void Stop()
{
	this.MediaPlayer.Stop();
}

Bovenstaande voorbeelden kunnen dus ook via Javascript aangestuurd worden.

Om controle over het MediaElement te houden, heeft een MediaElement de volgende events:
- MediaEnded
- MediaFailed
- MediaOpened
- CurrentStateChanged
- BufferingProgressChanged
- DownloadProgressChanged

Deze events geven de programmeur de nodige informatie over de status en aanverwante zaken van het MediaElement, dat de juiste informatie richting de eindgebruiker teruggekoppeld kan worden.

Tot zover het technische gedeelte van dit blog.

Voor meer informatie over Silverlight:
http://nl.wikipedia.org/wiki/Silverlight/
http://www.silverlight.net/

Stem of voeg toe aan :