Bereitstellen von herausragenden „Wiedergeben auf“-Funktionen in Ihren Windows 8-Apps (und Websites!)

Article
11/26/2012

Übersicht über „Wiedergeben auf“

Mit dem Feature „Wiedergeben auf“ können Sie Musik, Fotos und Videos aus Anwendungen auf eine Xbox und andere unterstützte Geräte im Heimnetzwerk streamen. Stellen Sie sich vor, wie Sie ganz einfach auf Ihrem Flachbildfernseher durch Fotos und Videos in Ihrer App blättern. Oder geben Sie Musik aus Ihrer App auf den Lautsprechern im Wohnzimmer wieder. Mit dem Vertrag für „Wiedergeben auf“ können Sie diese Szenarien für die Benutzer Ihrer Apps ermöglichen. Dies ist eine großartige Möglichkeit, damit Benutzer Ihre Apps optimal in ihren Wohnzimmern nutzen können.

Um ein optimales End-to-End-Erlebnis für Benutzer, Entwickler und Geräte zu ermöglichen, wurde bei der Entwicklung von „Wiedergeben auf“ besonders auf folgende Aspekte geachtet:

Benutzer: In Netzwerken, in denen Benutzer Freigaben aktivieren (z. B. in Heimnetzwerken), werden Windows-zertifizierte „Wiedergeben auf“-Geräte automatisch von Windows 8 erkannt und installiert. Das Betriebssystem stellt eine einheitliche Benutzeroberfläche bereit, über die Benutzer Geräte aus dem Charm „Geräte“ per Streifen und Tippen steuern können, um „Wiedergeben auf“ in jeder unterstützten App zu starten. „Wiedergeben auf“ ist in alle medienorientierten Microsoft-Apps integriert, einschließlich der Apps „Musik“, „Video“ und „Fotos“. Der Vertrag für „Wiedergeben auf“ ist sogar in Internet Explorer 10 enthalten, damit Benutzer Fotos sowie HTML5-Musik und -Videos streamen können, die auf Webseiten enthalten sind.
Entwickler: Im Entwicklervertrag für „Wiedergeben auf“ sind die zugrunde liegenden Medienstreamingtechnologien (Protokolle, Formatanpassung, Transcodierung usw.) in hohem Maße abstrahiert, damit „Wiedergeben auf“ schnell und einfach in einer Vielzahl von Apps implementiert (und getestet) werden kann. In allen Apps (und HTML5-Webseiten in IE) sind Grundfunktionen standardmäßig aktiviert, die dann angepasst oder optional deaktiviert werden können.
Geräte: „Wiedergeben auf“ wurde in Windows 8 speziell für Windows-zertifizierte „Wiedergeben auf“-Geräte entwickelt. Zertifizierte Geräte bieten eine konsistente und zuverlässige Leistung. Verschiedene Hersteller von Unterhaltungselektronik arbeiten an „Wiedergeben auf“-Zertifizierungen für Geräte der unterschiedlichsten Kategorien.Hierzu zählen beispielsweise Fernsehgeräte, Set-Top-Boxen, Lautsprecher und Audioreceiver. Die „Wiedergeben auf“-Unterstützung ist ein neues Feature für Empfangsgeräte, das bereits auf der E3 (Electronics Entertainment Expo) vorgestellt und im Rahmen des aktuellen Dashboard-Updates im Herbst auf etwa 70 Millionen Xbox 360 Konsolen bereitgestellt wurde. Informationen zu weiteren Geräten erhalten Sie im Windows-Blog.

Erstellen von ansprechenden und interaktiven Benutzeroberflächen

Mit „Wiedergeben auf“ können Sie ganz einfach eine überzeugende Benutzeroberfläche auf mehreren Bildschirmen umsetzen, die Ihre Benutzer begeistert und mit der Sie Ihre App im Windows Store aus der Masse hervorheben können. Durch Implementieren von „Wiedergeben auf“ erhalten Sie:

soziale Funktionen, durch die Benutzer ihre Lieblingsfotos und -videos mit Freunden und ihrer Familie zuhause vor dem großen Bildschirm genießen können – direkt aus Ihrer App.
begleitende Funktionen, bei denen die App einen zweiten Bildschirm bereitstellt – beispielsweise eine einfache Fernbedienung oder ein Bewertungssystem, bei dem Benutzer Titel bewerten können und umfassende Metadaten zu Album oder Künstler erhalten.

In diesem Beitrag dienen die Apps „Developer Sample“ und „Fotos“ als Beispiel für das Erstellen und Testen einer großartigen „Wiedergeben auf“-Benutzeroberfläche.

Wie ist „Wiedergeben auf“ in Windows 8 integriert?

Beschäftigen wir uns zunächst mit dem End-to-End-Erlebnis, das „Wiedergeben auf“ aus Sicht des Benutzers bietet. Gleichgültig, ob beim Beitreten zu einem neuen Netzwerk oder beim Streamen von Medien zu einem Gerät.

In Windows 8 wurde eine einfache Einrichtung für „Wiedergeben auf“ bereitgestellt, ohne dabei den Datenschutz und die Sicherheit von Benutzern in öffentlichen Netzwerken zu gefährden. Freigaben werden auf PCs mit eingerichteter Heimnetzgruppe sowie auf PCs, auf denen der Benutzer bei der erstmaligen Einrichtung die Express-Einstellungen auswählt, automatisch aktiviert. Zusätzlich werden Benutzer gefragt, ob sie Freigaben aktivieren und eine Verbindung mit Geräten herstellen möchten, sobald sie einem neuen Netzwerk beitreten. Außerdem kann diese Meldung aufgerufen werden, indem Benutzer den Netzwerknamen im Benutzeroberflächen-Flyout „Netzwerkverbindung“ gedrückt halten.

Nachdem Freigaben aktiviert wurden, sucht Windows automatisch nach unterstützten „Wiedergeben auf“-Geräten im Netzwerk und installiert diese innerhalb von etwa 30 Sekunden. Auf der Seite „Geräte“ in den PC-Einstellungen wird angezeigt, ob Geräte verfügbar sind. Außerdem können Benutzer Geräte in den PC-Einstellungen auf der Seite „Geräte“ manuell hinzufügen.

Nach dem Installieren von „Wiedergeben auf“-Geräten werden diese von Windows gespeichert und Ihre Verfügbarkeit im Netzwerk automatisch überwacht. Sobald der Benutzer eine App verwendet, die „Wiedergeben auf“ unterstützt, sind diese Geräte im Charm „Geräte“ verfügbar.

Im Folgenden beschäftigen wir uns anhand des Developer Sample in Visual Studio eingehender mit dieser Funktion. In diesem Beispiel ist „Wiedergeben auf“ für das Video „Big Buck Bunny“ aktiviert.

Da diese Anwendung den Vertrag für „Wiedergeben auf“ in dieser Ansicht implementiert, können die verfügbaren Geräte durch Streifen im Charm „Geräte“ angezeigt werden.

Durch Auswählen eines Geräts wird „Wiedergeben auf“ gestartet. In diesem Beispiel wird die Xbox 360 ausgewählt und wie zu erkennen ist, wechselt die Videosteuerung in einen Modus, bei dem das Video durch eine graue Überlagerung ersetzt ist. Die Schaltflächen für Pause, Wiedergabe, Suchen und Lautstärke steuern nun die Wiedergabe auf dem Zielgerät.

Durch Auswahl von Trennen im Charm „Geräte“ kann der Benutzer die Sitzung beenden.

Was ist der Vertrag für „Wiedergeben auf“?

Das Implementieren von „Wiedergeben auf“ in Ihrer App ist sehr einfach. Dies können Sie in jeder Ansicht der App wie folgt ausführen:

Erstellen Sie ein PlayToManager-Objekt für die aktuelle Ansicht.
Registrieren Sie das SourceRequested-Ereignis, um eine Benachrichtigung zu erhalten, wenn der Charm „Geräte“ ausgewählt wird.
Legen Sie PlayToSource fest, um das Medienelement anzugeben, das von der aktuellen Ansicht gestreamt werden soll. Je nachdem, ob es sich bei der Quelle um ein Audio-, Video- oder Bildelement handelt, zeigt der Charm „Geräte“ nur die Geräte an, die den entsprechenden Medientyp abspielen können. Wenn der Benutzer ein Gerät auswählt, wird die PlayToSource an das Gerät gesendet. Die PlayToSource kann so konfiguriert werden, dass das nächste Element gestreamt wird, sobald die Wiedergabe des aktuellen Medienelements auf dem Gerät abgeschlossen ist.

In diesem einfachen Beispiel wird das Aktivieren von „Wiedergeben auf“ für ein einzelnes Medienelement gezeigt.

JavaScript

 <video id="videoplayer" src="https://www.contoso.com/clip.mp4" controls autoplay />
<script type="text/javascript">
    // Step 1: Obtain PlayToManager object for app’s current view.
    var ptm = Windows.Media.PlayTo.PlayToManager.getForCurrentView();
    // Step 2: Register for the sourcerequested event (user selects Devices button).
    ptm.addEventListener("sourcerequested", function(e) {
        var request = e.sourceRequest;
    // Step 3: Specify the media to be streamed (to filter devices)
     request.setSource(document.getElementById("videoplayer").msPlayToSource);
    // The media will then be streamed to the device chosen by the user in the UI.
    });
</script>

XAML

 <MediaElement x:Name="videoplayer" Source="https://www.contoso.com/clip.mp4" 
              AutoPlay="true" />
// Step 1: Obtain PlayToManager object for app’s current view.
PlayToManager ptm = Windows.Media.PlayTo.PlayToManager.GetForCurrentView();
// Step 2: Register for the SourceRequested event (user selects Devices button).
ptm.SourceRequested += (PlayToManager sender, PlayToSourceRequestedEventArgs e) => {
    request = e.SourceRequest;
    // Step 3: Specify the media to be streamed.
    PlayToSourceDeferral deferral = request.GetDeferral();
        request.SetSource(videoplayer.PlayToSource);
    deferral.Complete();
}
// The media will then be streamed to the device chosen by the user in the UI.

Zu welchem Zeitpunkt sollte der Vertrag für „Wiedergeben auf“ implementiert werden?

Wenn Ihre App interessante Fotos, Musik oder Videos enthält, die optimal auf einem großen Bildschirm oder in hoher Stereoqualität wiedergegeben werden, ist der Einsatz von „Wiedergeben auf“ sinnvoll. Entwickler haben bereits viele großartige Apps in den unterschiedlichsten Bereichen erstellt, z. B. Lifestyle-, Newsreader-, Podcast- und Medien-Apps.

„Wiedergeben auf“ ist automatisch für die Wiedergabe von Musik- und Videoelementen in Windows 8-Apps konfiguriert, jedoch nicht für das Anzeigen von Bildelementen. Diese Standardeinstellung ist optimal für einzelne Medienelemente geeignet; durch Anpassen von „Wiedergeben auf“ sind jedoch auch komplexere Szenarien wie Diashows und Wiedergabelisten möglich.

Das Streamen auf Geräte wird mit „Wiedergeben auf“ für alle Musik-, Video und Bilddateien unterstützt, die nicht DRM-(Digital Rights Management)-geschützt sind, sowohl für Sammlungen von Benutzern als auch für webbasierte Streaming-Medien. DRM-geschützte Inhalte werden nicht unterstützt, da diese direkt über das Web für Geräte (z. B. Smart TVs) bereitgestellt werden.

Für diesen Beitrag wird die Fotos-App als Beispiel für eine großartige „Wiedergeben auf“-Benutzeroberfläche verwendet. Die Fotos-App wurde als zentraler Ort für die „digitalen Erinnerungen“ von Benutzern entwickelt, an dem sie diese betrachten, teilen und in Erinnerungen schwelgen können. Wenn solche Inhalte auf dem größten Bildschirm im Haushalt wiedergegeben werden, wirken sie noch beeindruckender und interaktiver.

Beispiel: Die Fotos-App

In der Fotos-App wurde eine „Wiedergeben auf“-Benutzeroberfläche umgesetzt, durch die der Benutzer die Diashow steuern kann. So können Benutzer alle Medieninhalte in einer Filmstreifenansicht betrachten. Von dieser Ansicht aus können Benutzer Videos abspielen und anhalten, eine Diashow starten oder Inhalte manuell zum Fernsehgerät senden. Da Fotos und Videos auf dem Fernsehgerät wiedergegeben werden, verwendet die App den nun zusätzlich verfügbaren Bildschirm des Windows 8-Geräts, um weitere Inhalte (z. B. folgende Elemente) anzuzeigen und die Benutzeroberfläche des Fernsehgeräts zu erweitern.

Sie sollten „Wiedergeben auf“ in den Flow Ihrer Apps integrieren. Für die Fotos-App wurde eine „Wiedergeben auf“-Ansicht neben dem Hauptlayout der App entwickelt.

Benutzer können überall innerhalb der App den Charm „Geräte“ öffnen und die kompatiblen Geräte anzeigen. Sobald ein Benutzer ein Foto, ein Video oder eine Sammlung betrachtet, kann er den Charm „Geräte“ öffnen und Geräteoptionen anzeigen. Benutzer können während des Durchsuchens ganze Alben oder ausgewählte Fotos aus verschiedenen Alben an ein anderes Gerät senden.

In diesem Beispiel hat der Benutzer bereits einige Fotos und Videos ausgewählt, die anschließend an das Fernsehgerät gesendet werden. Wenn der Benutzer den Charm „Geräte“ öffnet, werden die verfügbaren Geräte angezeigt, die die ausgewählten Inhaltstypen abspielen können. Die App muss lediglich die Quelle des Inhalts angeben.

Nachdem der Benutzer ein Gerät ausgewählt hat, möchte er möglicherweise eine Bestätigung erhalten, auf welchem Gerät der Inhalt wiedergegeben wird. Die Fotos-App erstellt eine ansprechende Überschrift, die zeigt, zu welchem Ziel die aktuellen Inhalte gestreamt werden. Das aktuell wiedergegebene Medienelement wird durch einen Rahmen um das Foto oder Video markiert.

So sieht die App aus, wenn Inhalte auf dem Fernsehgerät wiedergegeben werden:

Weitere Verbesserungen der Diashow

Windows-zertifizierte „Wiedergabe auf“-Geräte unterstützen die Vorpufferung des nächsten Elements in Wiedergabelisten-Szenarien. Indem das Gerät das nächste Element in einer Wiedergabeliste vorpuffert, kann eine erstklassige Leistung sichergestellt werden. Dies ist eine wesentliche Voraussetzung für ein optimales Benutzererlebnis. Apps können diese Fähigkeit nutzen, indem die Quelle für das „nächste“ Element in einem Wiedergabelisten-Szenario angegeben wird. In diesem MSDN-Schnellstart erhalten Sie eine ausführliche Übersicht darüber, wie Ihre Apps diese erweiterten Funktionen verwenden können.

Fortlaufende Wiedergabe

Eine „Wiedergeben auf“-Sitzung wird solange abgespielt, bis sie durch den Benutzer getrennt wird. Dies ermöglicht zwei verschiedene Multitasking-Szenarien:

Benutzer können zu anderen Fotoalben innerhalb derselben App navigieren. Bei Aktivierung dieses Szenarios ist eine Benutzeroberfläche erforderlich, bei der „Wiedergeben auf“ fortgesetzt wird, wenn der Benutzer die Diashow „Aktuelle Wiedergabe“ verlässt. Beispielsweise können Benutzer in der Fotos-App Fotos auswählen und per E-Mail teilen oder weitere Fotos auswählen, die anschließend in der Diaschau angezeigt werden sollen, während die Diaschau weiterhin ohne Unterbrechung auf dem Fernsehgerät angezeigt wird.
Benutzer können zu anderen Apps navigieren, beispielsweise um E-Mails zu lesen, während eine Diaschau auf das Fernsehgerät gestreamt wird. In diesem Fall führt die App keine Aufgaben aus. Windows sorgt automatisch dafür, dass die App weiterhin im Hintergrund ausgeführt wird, während eine „Wiedergeben auf“-Sitzung aktiv ist. Damit die Sitzung aktiv bleibt, haben Apps etwa 10 Sekunden Zeit, um ein neues Bild zu senden, nachdem das aktuelle Bild angezeigt wird, bzw. den nächsten Audio- oder Videoinhalt zu senden, nachdem der aktuelle Inhalt zu Ende ist. Wenn Diaschau, Musik, Video oder Wiedergabelisten abgeschlossen sind, beendet Windows die App.

„Wiedergeben auf“ – empfohlene Vorgehensweisen

Beachten Sie die empfohlenen Vorgehensweisen, wenn Sie hochwertige „Wiedergeben auf“-Benutzeroberflächen entwickeln.

Beachten Sie folgende Punkte:

Weisen Sie den Benutzer darauf hin, dass Ihre App auf einem anderen Gerät wiedergegeben wird.
Verwenden Sie den Charm „Geräte“, um Benutzer ihre Geräte verbinden (und trennen) zu lassen.
Sorgen Sie dafür, dass die „Wiedergeben auf“-Sitzung aktiv bleibt, wenn der Benutzer zu anderen Ansichten innerhalb der App wechselt.
Geben Sie für Musik-, Foto- oder Video-Wiedergabelisten stets die nächste PlayToSource an, um die Leistung zu verbessern.
Ausführliche Anweisung zur optimalen Verwendung von „Wiedergeben auf“ finden Sie in dieser MSDN-Referenz.

Vermeiden Sie:

benutzerdefinierte Schaltflächen hinzuzufügen, mit denen „Wiedergeben auf“ innerhalb der App gestartet oder beendet wird. Verwenden Sie den Charm „Geräte“.

Was ist mit Websites?

Ähnlich wie bei Apps ist „Wiedergeben auf“ automatisch für Musik, Videos und Bilder in der neuen IE10-App konfiguriert. IE versucht, das beste Medienelement als Quelle für „Wiedergeben auf“ zu verwenden, allerdings werden Elemente bevorzugt, die aktuell abgespielt oder ausgewählt werden bzw. sich im Fokus und der aktiven Ansicht befinden.

Musik- und Videoelemente mit einer Länge von bis zu 5 Sekunden und Bilder mit einer Auflösung von 300x300 Pixeln oder weniger werden von IE nicht beachtet und niemals automatisch aktiviert.

Sehen Sie sich diese MSDN-Seite an, um Richtlinien für das Erstellen von Webseiten, die „Wiedergeben auf“ unterstützen zu erhalten.

Anmerkungen zu Medienformaten

Windows 8 ist mit einer Vielzahl von Medienformaten kompatibel, wie in diesem Blogbeitrag beschrieben. Für eine optimale Leistung empfehlen wir jedoch Bilder im JPEG-Format mit einer Auflösung von 1080p und Videos im MP4-Format mit einer Auflösung von 720p (oder 1080p) mit H264-Video und AAC-Audio.

Testen und Überprüfen von „Wiedergeben auf“

„Wiedergeben auf“ kann einfach mit nur wenigen PCs und Windows Media Player als „Wiedergeben auf“-Empfänger getestet und validiert werden. Dies funktioniert folgendermaßen:

Richten Sie zwei PCs in Ihrem Heimnetzwerk ein – Ihren Entwickler-PC und einen weiteren PC, auf dem Windows Media Player (WMP) als „Wiedergeben auf“-Empfänger ausgeführt wird.
Öffnen Sie WMP auf dem PC, den Sie als „Wiedergeben auf“-Testempfänger verwenden, und wählen Sie das Menü „Stream“ und anschließend Remoteüberwachung aktivieren… für Ihren Player aus.
- Dies ist mit WMP unter Windows 7 und Windows 8 möglich, aufgrund von Verbesserungen wird jedoch Windows 8 empfohlen.
- Stellen Sie sicher, dass „Teilen“ auf beiden PCs aktiviert ist.
- Vergewissern Sie sich, dass Sie sich in einem Heimnetzwerk befinden. Einige Unternehmensnetzwerke verfügen über Firewalleinstellungen und Verwaltungsrichtlinien, die die Erkennung von „Wiedergeben auf“-Geräten möglicherweise beeinträchtigt.
Wechseln Sie auf Ihrem Entwickler-PC in den PC-Einstellungen zur Seite Geräte, wählen Sie Gerät hinzufügen aus, und installieren Sie Windows Media Player (den Sie gemäß Schritt 2 oben einrichten).
Sie können WMP auf dem zweiten PC als „Wiedergeben auf“-Gerät aus jeder App verwenden, in der der Vertrag für „Wiedergeben auf“ implementiert ist – einschließlich der Fotos-App, dem „Wiedergeben auf“-Beispiel und Ihrer eigenen App, wenn Sie den Vertrag implementieren.

Außerdem können Sie die Xbox verwenden, um „Wiedergeben auf“ aus Ihrer App ohne gesonderte Konfiguration zu testen und zu überprüfen.

Fazit und zusätzliche Hinweise

Wir hoffen, dass dieser Beitrag beim Entwickeln einer großartigen „Wiedergeben auf“-Benutzeroberfläche für Ihre App informativ und hilfreich war. Wir freuen uns auf Feedback und Fragen in den Kommentaren und hoffen, Ihre Apps bald im Windows Store anbieten zu dürfen!

Nachfolgend finden Sie einige nützliche Hinweise zur Dokumentation im Entwicklungscenter: