Für jede Animation wird ein eigenes Storyboard-Objekt mit einem oder mehreren Animationsobjekten erstellt. Im Listing 1 befindet sich die Animation für das Ein- und Ausblenden der Player-Bedienung sowie die Animation für den Hover-Effekt eines Buttons. Das Ein- und Ausblenden der Bedienung erfolgt mit einer einfachen Verschiebung des entsprechenden Canvas. Für den Hover-Effekt wird die Füllfarbe des entsprechenden Symbols verändert.
<Storyboard x:Name="VideoControl_FadeIn"><DoubleAnimation Storyboard.TargetName="VideoControl"Storyboard.TargetProperty="(Canvas.Top)"To="300" Duration="0:0:1" /></Storyboard><Storyboard x:Name="VideoControl_FadeOut"><DoubleAnimation Storyboard.TargetName="VideoControl"Storyboard.TargetProperty="(Canvas.Top)"To="360" Duration="0:0:1" /></Storyboard><Storyboard x:Name="Play_MouseOver"><ColorAnimation Storyboard.TargetName="PathPlay"Storyboard.TargetProperty="(Fill).(Color)"From="#FF5F5F5F" To="#FFA2A2A2" Duration="0:0:1" /></Storyboard><Storyboard x:Name="Play_MouseOut"><ColorAnimation Storyboard.TargetName="PathPlay"Storyboard.TargetProperty="(Fill).(Color)"From="#FFA2A2A2" To="#FF5F5F5F" Duration="0:0:1" /></Storyboard>[..]
Den einzelnen Canvas-Objekten der Bedienelemente müssen die Handler-Funktionen per MouseEnter-, MouseLeave- und MouseLeftButtonDown-Methode zugewiesen werden. Die zuständigen Event Handler werden später in JavaScript realisiert. Abbildung 3 zeigt die fertige Oberfläche im Browser.
Player-Logik
Nun fehlt allerdings noch sämtliche Funktionalität des Players. Um diese zu gewährleisten, werden die entsprechenden Handler-Funktionen in JavaScript implementiert. Bei den Steuerungsmethoden des MediaElement-Objekts haben sich die Redmonder auf keine Experimente eingelassen, die Methoden heißen selbsterklärend play, Stopp und pause. Die Lautstärke wird über die volumen-Methode mit normalisierten Werten zwischen 0.00 und 1.00 (0 bis 100 Prozent) gesteuert. Einen kompletten Überblick über die Methoden und Ereignisse des MediaElements liefert die MSDN Library (http://msdn2.microsoft.com/en-us/library/bb188356.aspx) – Listing 2 zeigt anhand eines Auszugs aus der Datei Player.js einen Teil der Funktionen.
function btnPlay_Clicked(sender, args) {sender.findName("VidElement").play();}function btnStop_Clicked(sender, args) {sender.findName("VidElement").stop();}function btnPause_Clicked(sender, args) {sender.findName("VidElement").pause();}function btnVolume15_Clicked(sender, args) {sender.findName("Volume15_MouseClick").begin();sender.findName("VidElement").volume = 0.15;}[..]function VideoControl_FadeIn(sender, args) {sender.findName("VideoControl_FadeIn").begin();}function VideoControl_FadeOut(sender, args) {sender.findName("VideoControl_FadeOut").begin();}[..]
Damit ist der Player funktionsfähig und kann im Browser eingesetzt werden (das komplette Projekt kann am Ende des Artikels heruntergeladen werden).
Streaming-Daten erstellen
Die Videodaten müssen, bevor sie mit Silverlight verwendet werden können, in einem Windows-Media-Video-kompatiblen Format mit einer angemessenen Bitrate und Auflösung vorliegen. Zudem ist es unerlässlich, dass diese Mediendaten auch auf die Zielgruppe (z. B. Bandbreite des Internetzugangs) zugeschnitten werden.
Für diese Umwandlung bietet sich der Expression Encoder (http://www.microsoft.com/expression/products/Overview.aspx?key=encoder) an. Der Expression Media Encoder kann mit sämtlichen, bekannten Audio- (z. B. wav, mp3, wma, aiff) und Videodaten (z. B. avi, mpg, wmv, asf, vob, mp4, 3gp) umgehen und diese in ein streamingfreundliches Format umwandeln.
Silverlight Screencast
Die Einstellungen für die Umwandlung können im entsprechenden Tab (Codieren) vorgenommen werden. Besonders geeignet für das Streaming in hoher Qualität ist das bereits vordefinierte Profil „Streaming Breitband“. Sollte die Qualität des Ergebnisses nicht zufriedenstellend sein, so können Auflösung und Bitrate natürlich auch manuell modifiziert werden (vgl. Abb. 5).
Mit dem Expression Media Encoder ist es außerdem möglich, dem Material einen Vor- und Abspann hinzuzufügen, erweiterte Einstellungen vorzunehmen, sämtliche Metadaten zu definieren und bei der Enkodierung direkt eine Silverlight-Applikation zum Abspielen des Mediums zu erstellen. Auch die direkte Veröffentlichung in das CDN von Silverlight Streaming ist per Plug-in möglich (Silverlight Streaming Publishing plug-in for Expression Encoder 2 [http://www.microsoft.com/downloads/details.aspx?FamilyID=0708e7d7-9ba1-448e-9c82-3d71e8979a1b]).
Im Plug-in selbst müssen lediglich die Zugangsdaten zum bestehenden Silverlight Streaming-Account angegeben werden, der Rest wird durch das Plug-in abgehandelt. In diesem Beispiel wird als Video das Creative Commons Video Big Buck Bunny (http://www.bigbuckbunny.org) der Blender Foundation (http://www.blender.org) verwendet. Zu beachten is hierbei allerdings, dass das Plug-in leider nicht allein ein Video veröffentlichen kann, sondern nur eine gesamte Applikation. Dazu muss unter Auftragsausgabe eine Vorlage ausgewählt werden, die direkt eine fertige Media-Player-Applikation bietet.
