Silverlight ist Microsofts Antwort auf Flash und wurde direkt für den Einsatz als Videoplayer entwickelt, doch wie genau funktioniert das? Wie bindet man ein Video ein und ist das kompliziert?
Die Antwort: Nein, es ist sehr leicht einen simplen Videoplayer zu erstellen - genau das will ich heute zeigen.
Alternativen zu meiner Lösung:
Mein Beispiel soll nur die Grundlagen zeigen und auf simple Art und Weise das zeigen, was z.B. mit dem Expression Encoder oder Popfly möglich ist.
Schritt 1: MS AJAX Enabled Website erstellen und Silverlight.js hinzufügen
Wir erstellen einfach (aus Gewohnheit) ein ASP.NET AJAX enabled Website und fügen die Silverlight.js aus dem SDK hinzu (und fügen diese Javascript Datei noch der Default.aspx hinzu) :
Schritt 2: Videoplayer XAML erstellen
Als nächstes erstellen wir das XAML für den Videoplayer. In unserem Fall werden wir uns auf das wesentliche beschränken und werden über normale HTML Buttons das Video steuern.
Hier erstmal das XAML:
<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="399" Height="360" OpacityMask="#FF000000" RenderTransformOrigin="0.5,0.5" > <MediaElement x:Name="Player" Source="https://blog.codeinside.eu/assets/files/democode/silverlightvideoplayer/Lake.wmv" AutoPlay="True" Stretch="Fill"/> </Canvas>
In unserm Canvas Element, welches das Root Element ist, fügen wir das MediaElement ein, welches unser Video einbindet.
Wichtig beim MediaElement: Damit wir es über Javascript ansprechen müssen, müssen wir einen "x:Name" vergeben - in unserem Fall "Player" und noch eine "Source" setzen.
Interessanter Hinweis noch dazu:
Das Video wird bei mir auf code-inside.de gehostet - die Anwendung selbst läuft auf code-developer.de:
Schritt 3: SilverlightHost einfügen und ein paar Buttons
Sobald unsere Seite aufgebaut ist, wird das Silverlight in dem "SilverlightVideoHost-Div" erstellt und darüber sind 3 schnöde Buttons mit den jeweiligen Javascript Funktionen:
- Play
- Stop
- Pause </ul>
- SilverlightControl = Ist ID des generierten "objects" und erlaubt es auf die Silverlight DOM zuzugreifen (siehe hier für weitere Infos)
- SilverlightVideoHost = Ist ID des Hosts des Silverlight Plugins </ul>
<body onload="createSilverlight()"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <button onclick="play()">Play</button> <button onclick="stop()">Stop</button> <button onclick="pause()">Pause</button> </div> <div id="SilverlightVideoHost"> </div> </form> </body>
Schritt 4: SilverlightHost erstellen und Funktionalität implementieren
Als finalen Schritt rufen wir jetzt die Silverlight.js auf und erstellen unseren Videoplayer:
function createSilverlight()
{
Silverlight.createObjectEx({
source: "Videoplayer.xaml",
parentElement: document.getElementById("SilverlightVideoHost"),
id: "SilverlightControl",
properties: {
width: "100%",
height: "100%",
version: "1.0"
},
events: {
onError: null,
onLoad: null
}
});
}Jetzt statten wir noch die 3 Buttons mit einer Funktion aus:
function play()
{
var control = document.getElementById("SilverlightControl");
control.Content.FindName("Player").play();
}
function stop()
{
var control = document.getElementById("SilverlightControl");
control.Content.FindName("Player").stop();
}
function pause()
{
var control = document.getElementById("SilverlightControl");
control.Content.FindName("Player").pause();
}Wir greifen hier direkt über Javascript auf das Silverlight zu. Um auf das Silverlight Plugin zuzugreifen bekommt man es über document.getElementById(SILVERLIGHT_ID) - nicht zu verwechseln mit der SilverlightHostID:
Über das Silverlight Plugin haben wir nun die Möglichkeit die jeweiligen Methoden des MediaElements aufzurufen:
Als Ergebniss haben wir dann unseren simplen Videoplayer:
