12 December 2007 ASP.NET, ASP.NET AJAX, HowTo, Silverlight, Silverlight 1.0, Videoplayer Robert Muehsig

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) :

image

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:

image

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>
    <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
          }
    
       });
       }
    Wichtig hier ist die "source" - unser "Videoplayer.xaml" - sowie das übergeben unseres "SilverlightVideoHost" als "parentElement" und vergeben noch eine "id" "SilverlightControl".

    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:

    • 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>

      Über das Silverlight Plugin haben wir nun die Möglichkeit die jeweiligen Methoden des MediaElements aufzurufen:

      Als Ergebniss haben wir dann unseren simplen Videoplayer:

      image

       

      [ Demoanwendung | Source Code Downloaden ]


Written by Robert Muehsig

Software Developer - from Dresden, Germany, now living & working in Switzerland. Microsoft MVP & Web Geek.
Other Projects: KnowYourStack.com | ExpensiveMeeting | EinKofferVollerReisen.de

If you like the content and want to support me you could buy me a beer or a coffee via Litecoin or Bitcoin - thanks for reading!