Dieser Artikel wurde maschinell übersetzt.

Jetzt wiedergeben!

Erstellen von benutzerdefinierten Playern mit dem Silverlight Media Framework

Ben Rush

Streaming-Medien ist weit verbreitete, auf das Internet geworden. Jeder scheint – von Websites für soziale Netzwerke, um Ihren Nachbarn weil News – online Videoerlebnis beteiligt ist. Aufgrund von diesem Überspannungsschutz beliebter, die meisten Sites High-Quality-Videos präsentieren möchten – und oft qualitativ hochwertige Bandbreite berücksichtigen video – für Ihre Kunden auf zuverlässige und benutzerfreundliche Weise.

Ein wichtiges Element in der online-Medien Übermittlung Erfahrung ist der Player selbst. Der Player ist, was mit der Kunden zusammenarbeitet und Sie jedes Element des online-Erfahrung des Benutzers steuert. Bei so viel Aufmerksamkeit auf den Player zentriert ist es nicht überraschend, die moderne, Web-based Media Playern viel komplizierter geworden sind, als auch ein paar Jahren zu implementieren. Dies hat zur Folge, benötigen Entwickler ein stabiles Framework, die auf dem Sie Ihren Spieler erstellen können.

Silverlight Media Framework (SMF) ist ein open-Source-Projekt, die von Microsoft bei der 2009 Microsoft Professional Developers Conference veröffentlicht wurde. Es ist eine erweiterbare und hochskalierbare Silverlight video Framework, die direkt die Notwendigkeit einer stabilen zentrale Antworten auf dem Entwickler und Designer Ihren eigenen Spieler erstellen können. Der Code in der Mitte des Silverlight-Media-Framework wurde verfeinert basierend auf Erfahrungen aus der NBC Olympics und Sonntag nachts Football video Webprojekte.

In diesem Artikel wird erläutert die grundlegenden Elemente der SMF, zum Integrieren der SMF in eigene Projekte Spieler und durchlaufen Sie ein einfaches Projekt, das die Dienstverwaltungsfunktion, verwendet um ein benutzerdefiniertes Player erstellen. Ich zeige Ihnen wie die Protokollierung, Einstellungen und Features der SMF zur Verarbeitung von Ereignissen verwendet. Schließlich werde ich eine Player-Anwendung erstellen, die vorgeschlagenen Videos für das Anzeigen von weiteren am Ende des aktuellen Videos angezeigt.

Erste Schritte mit SMF

Um zu Beginn wird als Erstes sollten Sie tun das Framework von CodePlex ( downloadenSMF.codeplex.com). Außerdem müssen Sie das Smooth Streaming Player Development Kit ( downloadenIIS.NET/expand/smoothplayer) und verweisen Sie in allen Projekten, die mithilfe der Dienstverwaltungsfunktion "". Das Smooth Streaming Player Development Kit ist nicht Teil der SMF – es handelt sich um eine Komponente vollkommen getrennt, geschlossen Quelle. Allerdings nutzt SMF einem Kernsatz von Funktionen aus dem Kit, insbesondere den Videoplayer selbst. Das Schreiben dieses Artikels ist das Smooth Streaming Player Development Kit in der Beta 2.

SMF umfasst eine Reihe von Microsoft .NET-Assemblys (wie in Abbildung 1) jeder einen anderen funktionellen Teil des allgemeinen Frameworks.

Abbildung 1 Die Silverlight-Media-Framework-Assemblys

Die Kernassembly ist Microsoft.SilverlightMediaFramework.dll, die umfasst eine Reihe von Dienstprogrammklassen und Typen, auf die im restlichen Teil des Frameworks verwiesen wird. Wenn Sie alle Aspekte der SMF verwenden, müssen Sie auch die Microsoft.SilverlightMediaFramework.dll Assembly verweisen.

Der Microsoft.SilverlightMediaFramework.Data-Namespace Stellt Hilfsklassen bereit, für die Nutzung von Daten an den Spieler externe und zum Kapseln von Daten innerhalb des Players. Die Daten können allgemeine, mit jedem Formular, aber es kann auch Einstellungsinformationen für den Player selbst. Es gibt einen anderen Namespace, Microsoft.SilverlightMediaFramework.Data.Settings, für die Typen darstellen und im Zusammenhang mit der Player-Einstellungen.

Abgesehen von Daten für Einstellungen verwendet ist der Typ innerhalb des Data-Namespace, dem Sie wahrscheinlich mit arbeiten außerhalb des Datenstroms, DataClient-Klasse, die Daten aus einer externen Quelle abgerufen werden kann. Sie verweisen auf diese Assembly, wenn Sie downloaden und an den Spieler externe Daten verwenden möchten.

Der Player SMF enthält das stabile Microsoft.SilverlightMediaFramework.Logging-Framework, das ein Rückrufcharakter Paradigma wird verwendet, in denen Schreiben in die Infrastruktur Protokollierung Ereignisse auslöst. Registrieren Sie Ihre eigenen Rückrufmethoden mit dem System anmelden und diese Rückrufe ausführen zusätzlicher Operationen, die einmal aufgerufen, wie z. B. das Bereitstellen von Informationen an einen Webdienst oder Informationen zu einem Textfeld angezeigt. Sie verweisen auf diese Assembly, wenn Sie die Protokollierung integrierten Funktionen der SMF verwenden möchten.

Die Microsoft.SilverlightMediaFramework.Player-Assembly implementiert den Player selbst. Es bietet außerdem eine Reihe von Steuerelementen, die der Player, wie z. B. ein Scrubber abhängig Volume-Steuerelement und Zeitplan Marker. Die SMF Standardplayer ist schlicht und einen guter Ausgangspunkt für ein beliebiges Projekt erfordert einen Silverlight-Player zu leeren. Jedoch ist von zentraler Bedeutung für alle Steuerelemente in der SMF definiert das Konzept der Vorlagenerstellung-Steuerelement, so dass jedes Steuerelement mit einem Design versehen werden kann, mithilfe von Tools wie Expression Blend oder Visual Studio.

Erstellen und darauf verweisen SMF

SMF downloads als einzelne ZIP-Datei in der Sie eine Projektmappendatei, ein Projekt für jede Ausgabe-Bibliothek finden und Projekte für das Ausführen und überprüfen den Player selbst zu testen.

SMF stützt sich auf das Smooth Streaming Player Development Kit. Das Kit verweisen möchten, verschieben Sie die Smooth Streaming-Assembly (Microsoft.Web.Media.SmoothStreaming.dll) in den Ordner \Lib des Projekts SMF.

Öffnen Sie die SMF-Projektmappe in Visual Studio zu, und erstellen Sie, erstellen alle Assemblys, die erforderlich sind, um das Framework zu nutzen. Drücken Sie die Taste [F5], um Debuggen zu beginnen, um zu überprüfen, dass alles wie erwartet ausgeführt. Die Projektmappe zu erstellen und das Ziel Microsoft.SilverlightMediaFramework.Test.Web wird ausgeführt, Sie mit einem “ Big Buck Häschen ” Videodatenstreams SMF Standardplayer präsentieren (siehe Abbildung 2). Hinweis wie vollständige Standardplayer bereits, mit einem Element Position scrubbing, Wiedergabe/anhalten/Pause-Schaltflächen, Lautstärkeregler, Vollbild-Steuerelemente und So weiter.

Abbildung 2 Die SMF-Player und die Big Buck Häschen Video

Die nächste Schritt besteht darin, Ihre eigenen separate Silverlight-Projekt erstellen und nutzen Sie SMF aus darin. Klicken Sie in Visual Studio im Menü Datei | neu | Projekt | Silverlight-Anwendung. Rufen Sie die Projektmappe SMFPlayerTest, und klicken Sie auf OK. Ein modales Dialogfeld wird angezeigt, mit der Frage, ob Sie möchten die Silverlight-Anwendung in eine neue Web site Host. Klicken Sie auf OK, und sehen Sie ein Silverlight-Anwendung Grundlösung besteht aus zwei Projekten, SMFPlayerTest und SMFPlayerTest.Web.

Die endgültige Schritt ist die Smooth Streaming Player Development Kit und SMF-Assemblys aus dem neu erstellten Projekt verweisen. Kopieren Sie die SMF Ausgabeassemblys und Smooth Streaming Player Development Kit in der SMF Lösung Ordner "Debug" und fügen Sie Sie in das neue Projekt, wie in Abbildung 3. Die neue Projektmappe enthält jetzt alle Assemblyverweise erforderlich, um die Vorteile der SMF nutzen zu können.

Abbildung 3 Verweisen auf die erforderlichen Assemblys

Anzeigen von Windows Media Player

Um die SMF verwenden zu können, gehören der SMF-Player-Namespace innerhalb der MainPage.xaml-Seite. Auf diese Weise wird sichergestellt, dass alle ordnungsgemäß Auflösen von verweisen:

xmlns:p="clr-namespace:Microsoft.SilverlightMediaFramework.Player;assembly=Microsoft.SilverlightMediaFramework.Player"

Fügen Sie nun Spielers XAML innerhalb der Seite LayoutRoot Datenraster-Steuerelement: 

<Grid x:Name="LayoutRoot">
  <p:Player>
  </p:Player>
</Grid>

Drücken der Taste F5 starten das Projekt und SMF-Player zu bringen. Jedoch, da der Player was wiedergeben mitgeteilt wurde noch nicht, wird keine Aktion ausgeführt. Sie erhalten lediglich einen Player ohne Inhalt wiedergeben.

SMF verwendet SmoothStreamingMediaElement (aus dem Smooth Streaming Player Development Kit), um video wiederzugeben. SmoothStreamingMediaElement erbt SMF einen eigenen Spieler, CoreSmoothStreamingMediaElement aufgerufen. Dieses Objekt ist erforderlich, wenn Sie den Player, um den Inhalt des Streams möchten. Stellen Sie sicher, dass Sie die SmoothStreamingSource-Eigenschaft auf einen gültigen reibungslose streaming Media-URL festgelegt:

<Grid x:Name="LayoutRoot">
  <p:Player>
    <p:CoreSmoothStreamingMediaElement
      AutoPlay="True"
      SmoothStreamingSource="replace with address to content here"/>
  </p:Player>
</Grid>

Wie bereits erwähnt, bietet Microsoft die “ Big Buck Häschen ” Beispiel Videodaten, die Entwickler zum Testen von Silverlight-Projekte verwenden können. Dieser Test-Stream verwenden möchten, legen Sie die SmoothStreamingSource-Eigenschaft auf die CoreSmoothStreamingMediaElement auf:

http://video3.smoothhd.com.edgesuite.net/ondemand/Big%20Buck%20Bunny%20Adaptive.ism/Manifest

Noch einmal drücken Sie F5, um das Projekt erstellen und ausführen. Der Browser wird mit demselben Spieler vor dem Ausführen, aber diesmal den “ Big Buck Häschen ” video beginnt streaming Minuten nachdem der Player vollständig geladen wurde. Wenn Ihre Aufgabe bestand darin, einen grundlegenden Silverlight-Player auf den Inhalt des Streams zu erstellen, haben Sie es.

Bietet jedoch die SMF ziemlich mehr, als wir bisher gesehen haben. Fügen Sie einige grundlegende Protokollierung Let’s hinzu.

Die Protokollierung in Windows Media Player

Protokollierung im SMF ist einfach – Wenn ein Ereignis protokolliert wird, löst es ein LogReceived-Ereignis. Registrieren eines Ereignishandlers für dieses Ereignis auf, und eine Benachrichtigung für jedes Ereignis protokollieren und somit erhalten, sobald es ausgelöst wird. Vorgehen bei der Ereignisbenachrichtigung bleibt Ihnen überlassen, die in einem neuen Fenster innerhalb des Players angezeigt wird, die Ereignisse filtern und einen Webdienst zu benachrichtigen, sobald ein bestimmtes Ereignis ausgelöst, ruft oder führen Sie alles, was für Ihr Szenario erforderlich ist.

Das LogReceived-Ereignis ist statisch definiert, für die Protokollierung-Klasse selbst (definiert in Microsoft.SilverlightMediaFramework.Logging.dll), daher ist es möglich, die zum Protokollieren von Ereignissen an einer beliebigen Stelle innerhalb des Projekts zu registrieren. Es folgt ein Beispiel für registrieren und das Definieren des Ereignishandlers in der MainPage.xaml-Datei des Projekts SMFPlayerTest:

public partial class MainPage : UserControl {
  public MainPage() {
    InitializeComponent();

    Logger.LogReceived += 
      new EventHandler<SimpleEventArgs<Log>>(
      Logger_LogReceived);
  }

  void Logger_LogReceived(object sender, 
    Microsoft.SilverlightMediaFramework.SimpleEventArgs<Log> e) {
    throw new NotImplementedException();
  }
}

SMF löst ein paar Ereignisse aus dem Feld. Um diese anzuzeigen, erstellen Sie einen Haltepunkt innerhalb der Logger_LogReceived-Methode und den Player wieder im Debugmodus ausgeführt. Fast sofort Ihre Haltepunkt abgerufen wird, sodass Sie zu Schritt und der Methode Parameter finden Sie die Informationen an ihn übergeben.

Ereignis-Protokolldaten ist innerhalb einer speziellen Messagingobjekt verpackt von einer abstrakten Klasse-Protokoll, dessen Typ erben muss. Diese abstrakte Protokolltyp verfügt über drei Eigenschaften: Absender, Nachricht und TimeStamp. Absender verweist auf das Objekt, das das Ereignis ausgelöst hat. Nachricht ist ein Objekt vom Typ System.String, der den Text für die Ereignisprotokollierung. TimeStamp enthält lediglich das Datum und die Uhrzeit, an dem die Protokollierung zuerst instanziiert wurde. Das SimpleEventArgs <> objekt als zweiten Parameter an den ereignishandler übergebene enthält einen verweis auf das Log-Objekt über die Result-Eigenschaft.

Ein Ereignis protokollieren zu erhöhen, erforderlich ist, lediglich, einen Typ zu instanziieren, der von der Protokoll-Basisklasse erbt, und dann dieses Typs statisch definierte Log-Methode für die Protokollierung Typ übergeben. Das Framework stellt eine DebugLog-Klasse, die bereits vom Protokoll Basistyp erbt. Was jedoch spezielle Informationen über die DebugLog-Typ ist, besteht darin, dass wenn die Bibliotheken, die durch das Silverlight-Projekt verwiesen unter erstellt wurden ein Debuggen der SMF erstellen, übergeben einen DebugLog-Typ des Frameworks SMF Protokollierung wird ein entsprechende Protokollierung-Ereignis auslösen (und daher Ihre Ereignishandler aufrufen). Andererseits, ignoriert einem Releasebuild der SMF jeder Aufruf an die Log-Methode, die die DebugLog-Klasse übergeben wird. Kurz gesagt, wenn Sie Debuganweisungen Debuggen verwendet werden soll mit der DebugLog-Objekt als das Ereignisargument Protokoll erstellt; andernfalls müssen Sie Ihren eigenen Typ erstellen, der von der abstrakten Protokolltyp erbt.

Hier ist ein Beispiel, in dem ein Listening-Ereignis durch das Ereignissystem SMF, ausgelöst indem eine DebugLog-Objekt instanziiert und Übergabe an die Protokollierung statische Log-Methode (Stellen Sie sicher, dass Ihre Dateien Smooth Streaming Player Development Kit unter Debug-Einstellungen erstellt wurden):

public MainPage() {
  InitializeComponent();

  Logger.LogReceived += 
  new EventHandler<SimpleEventArgs<Log>>(
    Logger_LogReceived);

  Logger.Log(new DebugLog { 
    Message = "Listening!", Sender = this }); 
}

Erben von der Player-Klasse

Protokollierung ein zentrales Feature des Players ist, zwar sind die SMF Wiedergabe Features nur zugänglich, wenn erben und erweitern den Player SMF-Typ selbst zu beginnen.

Um zu sehen, wie dies funktioniert, müssen Sie erstellen eine neue Klasse mit dem Namen SMFPlayer, die vom Player Typ erbt.

Die neue SMFPlayer-Klasse sieht folgendermaßen aus:

namespace SMFPlayerTest {
  public class SMFPlayer : Player {
    public override void OnApplyTemplate() {
      base.OnApplyTemplate();
    }
  }
}

Jeder FrameworkElement-Typ (z. B. Player in SMF) verfügt über eine OnApplyTemplate-Methode, die aufgerufen wird, sobald das ApplyTemplate-Ereignis ausgelöst wird. Diese Methode dient häufig als ein nützlicher Ausgangspunkt, wenn einen Typ von FrameworkElement initialisiert wird.

In diesem Fall überschreiben Sie die standardmäßigen OnApplyTemplate-Methode von innerhalb der neuen SMFPlayer-Klasse. Um zu demonstrieren, dass der Typ der neue SMFPlayer, statt den Standardtyp für den Player ausgeführt wird, können Sie einen Haltepunkt innerhalb der Überschreibung festlegen. Wenn Sie den Player in Visual Studio debuggen, wird dieser Haltepunkt Enountered werden, wenn Silverlight die SMFPlayer ausgeführt wird.

Aktualisieren Sie die MainPage.xaml-Datei ein, die die neue Klasse Player jetzt. Schließen Sie zunächst den Player-Namespace in der Liste der Namespaces, die bereits verwiesen (genauso wie Sie den Player Namespace weiter oben):

xmlns:smf="clr-namespace:SMFPlayerTest"

Aktualisieren Sie dann einfach die Player-Tags in der XAML-Code SMFPlayer anstelle von Player verwenden:

<Grid x:Name="LayoutRoot">
  <smf:SMFPlayer>
    <p:CoreSmoothStreamingMediaElement
      AutoPlay="true"
      SmoothStreamingSource="http://..."/>
  </smf:SMFPlayer>
</Grid>

Instanziieren Sie eine DebugLog-Klasse, und übergeben Sie es an die Log-Methode, wie zuvor gezeigt. Auf diese Weise wird das Ereignis ausgelöst, für das Sie zuvor einen Ereignishandler registriert:

public override void OnApplyTemplate() {
  Logger.Log(new DebugLog {
    Message = "Hello from OnApplyTemplate!",
    Sender = this
    });

  base.OnApplyTemplate();
}

Filtern Sie speziell für dieses Ereignis von innerhalb des Ereignishandlers anhören, die Message-Eigenschaft der DebugLog-Objekt selbst. Suchen Sie in diesem Beispiel wird für jede Nachricht, die “ OnApplyTemplate ” enthält:

void Logger_LogReceived(
  object sender, SimpleEventArgs<Log> e) {
  if (e.Result.Message.Contains("OnApplyTemplate")) {
    return;
  }
}

Verwenden von Einstellungen für Daten

Eine ausgereifte Framework für den Umgang mit Einstellungen ist von entscheidender Bedeutung für die meisten großen Softwareprojekten. Der Code für die Verarbeitung von Einstellungen in der SMF basiert auf der Microsoft.SilverlightMediaFramework.Data.dll Assembly downloaden generische ermöglicht, externe Daten. Die Einstellungen für Schicht der SMF verwendet diese Infrastruktur zu erreichen und downloaden eine speziell formatierte XML-Einstellungsdatei auf einem Webserver gehostet. Sobald die Einstellungsdaten noch erfolgreich gedownloadet und gelesen wurde, kapselt die SMF Einstellungen Schicht es mit einem SettingsBase-Objekt, dessen Methoden anschließend zum Abrufen der Einstellungswerte von verwendet werden.

Die SettingsBase-Klasse, fungiert wie der Name schon sagt, als Basis für eine spezifischere Klasse, die stark bietet Zugriff auf Ihre Einstellungswerte eingegeben. Es folgt ein Beispiel einer Klasse, die von SettingsBase erbt. Es verfügt über zwei Eigenschaften zum Abrufen eines Videoplayers Quell-URL und einen weiteren für einen booleschen Wert, der angibt, ob der Player automatisch gestartet oder für den Viewer, drücken die Schaltfläche ' Wiedergabe ' warten sollte abrufen:

namespace SMFPlayerTest {
  public class SMFPlayerTestSettings : SettingsBase {
    public Uri VideoPlayerSource {
      get { return new Uri(
        GetParameterValue("videoSource")); }
    }

    public bool? AutoStartVideo {
      get { return GetParameterBoolean(
        "autoStart"); }
    }
  }
}

Die Eigenschaftsmethoden verwenden Funktionen, die von der SettingsBase-Klasse implementiert wird, prüfen die zugrunde liegende Auflistung von Einstellungen Name-Wert-Paaren in der Typ geladen (über einen Mechanismus, der in Kürze besprochen). Auf diese Weise typsicher und IntelliSense-freundliche zum Abrufen von Einstellungsinformationen für die.

Erstellen Sie eine neue XML-Datei im Projekt SMFPlayerTest.Web, nennen Sie Sie SMFPlayerSettings.xml und fügen Sie die folgenden hinzu:

<?xml version="1.0" encoding="utf-8" ?>
<settings>
  <Parameters>
    <Parameter 
      Name="videoSource" 
      Value="http://video3.smoothhd.com.edgesuite.net/ondemand/Big%20Buck%20Bunny%20Adaptive.ism/Manifest"/>
    <Parameter Name="autoStart" Value="True"/>
  </Parameters>
</settings>

Als Nächstes erstellen Sie ein SettingsClient-Objekt, das in dem die Einstellungen für XML-geladen werden. SettingsClient übernimmt einen URI verweist auf die Einstellungsdatei:

m_settingsGetter = new SettingsClient(
  new Uri("http://localhost:10205/SMFPlayerSettings.xml"));

Das Verfahren zum Abrufen von die Einstellungsdaten ist asynchron aufgerufen werden, damit eine Rückrufmethode die RequestCompleted-Methode auf SettingsClient zugewiesen werden muss:

m_settingsGetter.RequestCompleted += 
  new EventHandler<SimpleEventArgs<SettingsBase>>
  (m_settingsGetter_RequestCompleted);

Das letzte Schritt wird zum Aufrufen der parameterlosen FETCH-Methode für das SettingsClient-Objekt. Wenn die Daten abgerufen werden, wird der SettingsGetter_RequestCompleted-Ereignishandler aufgerufen werden und ein SettingsBase-Objekt wird an Sie übergeben werden:

void m_settingsGetter_RequestCompleted(
  object sender, SimpleEventArgs<SettingsBase> e) {

  SettingsBase settingsBase = e.Result;
  return; 
}

Das SettingsBase-Objekt, das an die SettingsGetter_RequestCompleted-Methode übergeben, wird mit den Name-Wert-Paaren, die für Sie von der zugrunde liegende Framework aus der Datei SMFPlayerSettings.xml analysiert geladen. Um diese Daten in der SMFPlayerTestSettings-Objekt zu laden, rufen Sie einfach die Merge-Methode, die Einstellungsinformationen von einem SettingsBase abgeleitetes Objekt mit dem eines anderen zusammengefasst:

SettingsBase settingsBase = e.Result;
m_settings.Merge(settingsBase);

this.mediaElement.SmoothStreamingSource = 
  m_settings.VideoPlayerSource;
this.mediaElement.AutoPlay = 
  (bool)m_settings.AutoStartVideo; 

return;

Sie müssen nicht mehr hartcodieren die automatische Wiedergabe und SmoothStreamingSource Eigenschaften auf der CoreSmoothStreamingMediaElement innerhalb der Seite XAML, da die Player-Einstellungen von innerhalb der OnApplyTemplate-Methode gedownloadet werden. Dies ist alles, was, die Sie für den Player XAML müssen:

<Grid x:Name="LayoutRoot">
  <smf:SMFPlayer>
    <p:CoreSmoothStreamingMediaElement/>
  </smf:SMFPlayer>
</Grid>

Beim Ausführen des Players lädt die Einstellungsdaten des Rückrufs wird die Werte in den Player Medienelement laden und das Video wird gestartet, genau wie zuvor zu streamen.

Erweitern Sie im SMF-Player

Nach Abschluss der Wiedergabe von Videos, sehen Sie auf viele beliebte video Websites eine Liste mit ähnlichen oder empfohlene Videos. Zur Veranschaulichung, wie einfach es ist, erweitern Sie den Player SMF let’s gehen Sie die Schritte, ein ähnliches Feature vorgeschlagen anzeigen in der SMFPlayerTest-Projekt zu erstellen.

Starten Sie, indem Sie das Player-Element in der Datei MainPage.xaml ein X: Name-Attribut hinzufügen:

<Grid x:Name="LayoutRoot">
  <smf:SMFPlayer x:Name="myPlayer">
    <p:CoreSmoothStreamingMediaElement/>
  </smf:SMFPlayer>
</Grid>

Dies erleichtert das SMFPlayer-Objekt in Visual Studio und Expression Blend verweisen.

Nun, klicken Sie mit der rechten Maustaste auf die Datei MainPage.xaml im Projektmappen-Explorer, und wählen Sie in Expression Blend öffnen. In Expression Blend 3 starten, und eine Design-Oberfläche angezeigt wird, an den SMF-Player. In der Objekte und Zeitachsen Abschnitt finden Sie einen MyPlayer-Knoten in der Struktur der visuelle Objekte, die den Namen für das SMFPlayer-Objekt zuvor entspricht. Das Ziel ist die Erstellung einer Vorlage für SMFPlayer, dann die Vorlage drei Vorschlag Schaltflächen hinzu. Sie können mithilfe eine Vorlage in Expression Blend hinzufügen, bearbeiten oder Entfernen von Steuerelementen, die in der Spieler selbst integriert.

Um eine Vorlage zu erstellen, klicken Sie mit der rechten Maustaste auf MyPlayer in der Objekte und Zeitachsen Fenster und wählen Vorlage bearbeiten | Kopie bearbeiten. Ein Dialogfeld "Ressource" Style "erstellen wird angezeigt, und klicken Sie auf OK. Die drei Schaltflächen, über den Videoplayer einfügen möchten, doppelklicken Sie auf das Schaltflächensymbol im Fenster "Werkzeuge" für jede Schaltfläche, die Sie hinzufügen möchten. Drei Schaltflächen sollte jetzt sichtbar in der Struktur der Steuerelemente, aus denen der Player Vorlage sein (siehe Abbildung 4).

Abbildung 4 Button-Steuerelemente zur Steuerelement-Struktur hinzugefügt

Wählen Sie alle drei Schaltflächen in der Struktur, rufen Sie das Fenster "Eigenschaften" für die Steuerelemente, und legen Sie die horizontale und vertikale Ausrichtung zentriert aus. (siehe Abbildung 5), also die Schaltflächen nach unten die Arbeitsplatzgruppe und den mitten in den Videoplayer ausrichten.

Abbildung 5 Festlegen der Ausrichtung von Button-Steuerelement

Die Schaltflächen übernehmen die Standardgröße und über untereinander liegen. Legen Sie die Breite der einzelnen Schaltflächen auf 400 und die Höhe auf 75. Als Nächstes die Ränder so angepasst, dass eine Schaltfläche einen 175 Pixel-Offset von der Unterkante eines anderen 175 Pixel Offset vom Anfang hat und das letzte weist kein Rand Offsets auf. Das Endergebnis sieht wie aus.Abbildung 6.

Abbildung 6 Zentrierter Schaltflächen in Expression Blend

Überprüfen die Schaltflächen auf der Player ordnungsgemäß erteilt wurden, speichern Sie alle Dateien in Expression Blend öffnen, und kehren Sie zu Visual Studio zurück. Visual Studio fordert Sie möglicherweise, Dokumente, die durch Expression Blend geändert wurden, erneut zu laden. Wenn dies der Fall ist, klicken Sie auf OK. Von F5 in Visual Studio, starten Sie den Player SMF im Debugmodus. Der Player sollte nun mit drei Schaltflächen entlang der Seitenmitte video Bildschirmrand ausgerichtet, wie in angezeigt werden.Abbildung 7.

Abbildung 7 Zentrierter Schaltflächen in den SMF-Player

Einbinden von Ereignishandlern

Ereignishandler müssen nun die Schaltflächen zugeordnet werden. Die Schaltflächen aus dem Code verweisen möchten, müssen Sie Namen, zuweisen, was Sie über das Textfeld Name in der Registerkarte "Eigenschaften" tun. Benennen Sie die Schaltflächen Button1, Button2 und Button3 aus Gründen der Einfachheit. Wenn Sie fertig, die Objekte und Zeitachsen-Fenster sollte aktualisieren und Anzeigenamen der Schaltfläche neben der Schaltflächensymbole in der visuellen Struktur.

Innerhalb der Registerkarte Eigenschaften für jede Schaltfläche finden Sie eine Schaltfläche Ereignisse, die zum Zuweisen von Ereignishandlern für eine visuelle Komponente verwendet wird. Wählen Sie eine der Schaltflächen, klicken Sie auf die Schaltfläche "Ereignis" in der Registerkarte "Eigenschaften", und doppelklicken Sie auf das Textfeld klicken Sie hierauf, um automatisch einen Ereignishandler innerhalb des MainPage.xaml.cs generieren. Das Eigenschaftenfenster für die einzelnen Schaltflächen besitzen nun einen Ereignishandler, die das Click-Ereignis zugewiesen (siehe Abbildung 8), und die Datei MainPage.xaml.cs haben Ereignishandler zugewiesen, um jede Schaltfläche Click-Ereignis.

Abbildung 8 Festlegen des Ereignishandlers

Sie können jetzt den Player Debuggen. Klicken Sie auf eine der Schaltflächen auf dem Bildschirm wird ein Click-Ereignis ausgelöst, der jetzt durch die automatisch generierten Methoden in MainPage.xaml.cs behandelt wird.

Vorgeschlagene Videos

Jetzt let’s verwenden Sie diese Schaltflächen, um das vorgeschlagene video-Feature zu aktivieren. Das folgende XML wird die Vorschläge darstellen:

<?xml version="1.0" encoding="utf-8" ?>
<Suggestions>
  <Suggestion DisplayName="A suggestion" Url=""/>
  <Suggestion DisplayName="Another suggestion" Url=""/>
  <Suggestion DisplayName="My final suggestion" Url=""/>
</Suggestions>

Der Wert des Attributs URL angeben, das Video, das wird beim Klicken auf die Schaltfläche geladen, und das DisplayName-Attribut ist der Text, der auf die Schaltfläche geschrieben werden soll. Speichern Sie diese Datei mit dem Namen Suggestions.xml in SMFPlayerTest.Web-Projekt.

Der DataClient-Typ (innerhalb der Microsoft.SilverlightMediaFramework.Data-Namespace) werden verwendet, um das XML-Dokument zu downloaden und den Inhalt in eine typsichere Weise darstellen. Jeden Vorschlag Lesen aus der XML-Datei in einen stark typisierten Weise dargestellt werden soll, erstellen Sie eine Klasse mit dem Namen SMFPlayerTestSuggestion in Ihrem Silverlight-Projekt:

namespace SMFPlayerTest {
  public class SMFPlayerTestSuggestion {
    public string DisplayName;
    public Uri Url; 
  }
}

DataClient wie SettingsBase, sollen von einer Klasse abgeleitet, die eine stark typisierte Darstellung der Daten aus der XML-Inhalt (in diesem Fall ein Array von SMFPlayerTestSuggestion-Objekten) ermöglicht.

Erstellen Sie eine andere Klassendatei im Projekt SMFPlayerTest SMFPlayerTestDataClient aufgerufen:

namespace SMFPlayerTest {
  public class SMFPlayerTestDataClient : 
    DataClient<SMFPlayerTestSuggestion[]> {

    public SMFPlayerTestDataClient(Uri Url) : base(Url) { }

    protected override void OnRequestCompleted(
      object sender, SimpleEventArgs<string> e) {

      throw new NotImplementedException();
    }
  }
}

SMFPlayerTestDataClient erbt von DataClient und Vorlage Argument auf ein Array von Typen SMFPlayerTestSuggestion festgelegt. Die DataClient-Basisklasse stellt alle erforderliche asynchrone Netzwerke Logik zum Downloaden der externen XML-Datei. Sobald der Inhalt gedownloadet wurde, jedoch wird die DataClient-Basis OnRequestCompleted aufrufen und erwarten, dass die gesamte Verarbeitung der XML-Daten dann stattfinden. Mit anderen Worten, die Basisklasse für die DataClient die Inhalte gedownloadet, aber die Implementierung ist verantwortlich dafür etwas mit diesem.

Hier ist eine vollständigere Implementierung der OnRequestCompleted:

protected override void OnRequestCompleted(
  object sender, SimpleEventArgs<string> e) {

  XDocument doc = XDocument.Parse(e.Result);
  List<SMFPlayerTestSuggestion> suggestions = 
    new List<SMFPlayerTestSuggestion>();
  foreach (XElement element in doc.Descendants("Suggestion")) {
    suggestions.Add(new SMFPlayerTestSuggestion {
      DisplayName = element.Attribute("DisplayName").GetValue(),
      Url = element.Attribute("Url").GetValueAsUri()
    });
  }

  base.OnFetchCompleted(suggestions.ToArray()); 
}

Aus Gründen der Einfachheit halber haben ich LINQ to XML in dieser Implementierung verwendet, um die erforderlichen Elemente und Attribute im XML-Code zu analysieren. Sobald die Attributwerte DisplayName und URL von jedem Knoten Vorschlag abgerufen wurden, ein SMFPlayerTestSuggestion-Objekt instanziiert, und die Werte zugewiesen werden.

Die endgültige Schritt ist der Aufruf der OnFetchCompleted-Ereignis. Außerhalb registrieren Nutzer von SMFPlayerTestDataClient, die Ereignishandler für das FetchCompleted-Ereignis, um benachrichtigt zu werden, wenn die vorgeschlagenen Videodaten heruntergeladen wurde. Da OnRequestCompleted die XML-Daten in eine typsichere Weise gepackt wurde, erhält jeder Ereignishandler ein praktisches Array von SMFPlayerTestSuggestion-Objekten, jeweils eines für jedes Element Vorschlag im XML-Dokument, das DataClient-Basisklasse gedownloadet.

Der zugrunde liegenden DataClient stellt eine Methode namens „ FETCH, einmal aufgerufen, die den Prozess des Downloadens von Inhalten asynchron beginnt. Fügen Sie einen Ereignishandler, die MediaElement_MediaEnded für das MediaEnded-Ereignis für das MediaElement-Objekt aufgerufen, zu die Vorschlag Daten downloaden, wenn das Video beendet wurde:

void mediaElement_MediaEnded(
  object sender, RoutedEventArgs e) {

  m_client = new SMFPlayerTestDataClient(
    new Uri("http://localhost:10205/Suggestions.xml"));
  m_client.FetchCompleted += 
    new EventHandler<SimpleEventArgs<
    SMFPlayerTestSuggestion[]>>(m_client_FetchCompleted);
  m_client.Fetch(); 
}

Die MediaElement_MediaEnded-Methode erstellt eine Instanz des Typs SMFPlayerTestDataClient FetchCompleted-Ereignis ein anderes Ereignishandler zugewiesen und ruft dann abrufen, um den Downloadvorgang zu starten. Der FetchCompleted-Ereignishandler wird aufgerufen, durch den Aufruf von OnFetchCompleted in OnRequestCompleted (das durch den Basistyp DataClient aufgerufen wird, sobald der Inhalt gedownloadet hat) bereits implementiert.

Die Implementierung von Suggestion_FetchCompleted, die in MediaElement_MediaEnded, registriert das stark typisierte Array von Vorschlag data akzeptiert und weist einen Vorschlag zu jeder Schaltfläche:

void m_client_FetchCompleted(
  object sender, SimpleEventArgs<
  SMFPlayerTestSuggestion[]> e) {
  for (int c = 1; c <= 3; c++) {
    Button btn = (Button)GetTemplateChild(
      "Button" + c.ToString());
    btn.Tag = e.Result[c - 1].Url;
    btn.Content = 
      e.Result[c - 1].DisplayName; 
  }
}

GetTemplateChild, eine Methode für den zugrunde liegenden Typ von "FrameworkElement" Ruft einen Verweis auf die Schaltflächen in der MainPage-XAML definiert. Für jede Schaltfläche der Anzeigetext des Content-Eigenschaft zugewiesen ist, und der URI der Tag-Eigenschaft zugewiesen ist. Jede Schaltfläche klicken Sie auf Ereignis-Handler kann dann pull-URI aus der Tag-Eigenschaft und der Player MediaElement zum Wiedergeben des Streams zuordnen:

private void Button1_Click(
  object sender, System.Windows.RoutedEventArgs e) {

  Uri redirectUrl = (Uri)((Button)sender).Tag;
  myPlayer.MediaElement.SmoothStreamingSource = 
    redirectUrl; 
}

Die Schaltflächen anzeigen

Die endgültige Schritt besteht darin, die Schaltflächen ausblenden, bis das aktuell streaming Video beendet wurde, an welcher Stelle die Schaltflächen sichtbar werden. Sobald ein Benutzer auf eine Schaltfläche klickt, werden die Schaltflächen wieder ausgeblendet.

Bearbeiten Sie in Visual Studio die SMFPlayer-Klasse ergänzen es mit zwei TemplateVisualState-Attribute:

[TemplateVisualState(Name = "Hide", GroupName = "SuggestionStates")]
[TemplateVisualState(Name = "Show", GroupName = "SuggestionStates")]
public class SMFPlayer : Player

TemplateVisualState ist ein fascinatingly leistungsfähige-Attribut, das visuelle Zustände definiert möglicherweise, unter denen ein Objekt vorhanden ist. Nachdem Sie ein visuellen Zustand aktiv ist, aktualisieren Silverlight Eigenschaften visueller Elemente, die zu der Klasse gehört wie angewiesen – z. B. die Sichtbarkeit eines untergeordneten Schaltflächen-Steuerelements.

Um den aktuellen visuellen Zustand festzulegen, verwenden Sie die statische GoToState-Methode der VisualStateManager-Klasse (einen systemeigenen Silverlight-Typ). Die GroupName-Eigenschaft der TemplateVisualState Gruppen wie Zuständen zusammen, während die Name-Eigenschaft des TemplateVisualState den einzelnen Zustand angibt.

Zurück zu Expression Blend. Klicken Sie in der MyPlayer-Vorlage auf MyPlayer direkt über die Designer-Fenster, und klicken Sie dann auf Vorlage bearbeiten | Aktuelles bearbeiten. Klicken Sie auf die Registerkarte Status, und führen Sie einen Bildlauf nach unten wie in SuggestionStatesAbbildung 9.

Abbildung 9 Visuelle Zustände für SuggestionStates

Die von den Attributen erstellt zwei SuggestionStates angezeigt werden, ausblenden und anzeigen. Wenn Sie auf Ausblenden klicken, nur auf der linken Seite wird ein roter Kreis angezeigt wird, der angibt, Expression Blend alle im Designer vorgenommenen Eigenschaftenänderungen aufgezeichnet. In Expression Blend weiterhin Datensatz Eigenschaftenänderungen bis ausblenden wieder geklickt wird, wodurch den Rote Aufzeichnung Kreis ausgeblendet.

Legen Sie die Schaltflächen, die mit Expression Blend Aufzeichnung aktiv für den visuellen Zustand ausblenden um reduziert. Wählen Sie alle drei Schaltflächen unter der Objekte und Zeitachsen Fenster, und wählen Sie Collapsed als deren Sichtbarkeit in der Registerkarte Eigenschaften. Aufzeichnung für den visuellen Zustand ausblenden, indem Sie auf die Schaltfläche ausblenden wieder beenden. Klicken Sie auf anzeigen, dass ein roter Kreis links neben den visuellen Zustand anzeigen angezeigt wird. Dieses Mal explizit aufzeichnen Visible als den Sichtbarkeitsstatus durch Klicken auf die Schaltfläche Erweiterte Eigenschaftenoptionen rechts von der Sichtbarkeit Dropdown-Liste und aktueller Wert Datensatz auswählen. Alle geöffneten Dokumente speichern und wieder zurück zu Visual Studio.

Die systemeigene Silverlight-Klasse, VisualStateManager, wird verwendet, um explizit einen momentan aktiven visuellen Zustand festzulegen. Legen von innerhalb der OnApplyTemplate-Methode des Players, ausblenden als den derzeit aktiven visuellen Zustand:

VisualStateManager.GoToState(this, "Hide", true);

Legen Sie in Suggestion_FetchCompleted anzeigen als den derzeit aktiven Zustand auf die Schaltflächen angezeigt, nachdem der Stream beendet wurde und der Vorschlag Daten Download abgeschlossen:

VisualStateManager.GoToState(this, "Show", true);

Zum Ausblenden der Schaltflächen nach eine Schaltfläche geklickt wird (oder der ursprüngliche Stream wiedergegeben) erstellen Sie einen neuen Ereignishandler für das MediaElement MediaOpened-Ereignis, und legen Sie den visuellen Zustand auf ausblenden.

Starten Sie und Debuggen Sie den Player endgültige einmal. Sehen Sie, ob Sie die Schaltflächen erst ganz am Ende des Videos unsichtbar sind an welche Stelle Sie sichtbar werden. Durch Klicken auf eine Schaltfläche navigiert den Player, um beliebige URL wurde in die Schaltfläche entsprechende Vorschlag Einstellung angegeben.

Der SMF Projekt Speicherplatz auf CodePlex erhalten Sie Zugriff auf die Codebasis, Dokumentation, Diskussionen und die Problem-Protokollierung. Sehen Sie, und tragen Sie, können Sie. Die kreativere Recht angewendet auf das Projekt, desto besser ist das Ergebnis für alle Benutzer.

Ben Rush ist ein erfahrener Softwareentwickler von 18 Jahren, das Microsoft .NET Framework spezialisiert und Verwandte Microsoft-Technologien. Er bietet intelligente Code und schnellen Fahrrad rides.