Medienwiedergabe von A bis Z (HTML)

Erstellen des Beispiels

Wenn Sie die hier angegebenen Schritte ausführen möchten, um Ihrer eigenen App Medienfeatures hinzuzufügen, können Sie mit dem Thema Flache Navigation von A bis Z und der zugehörigen Vorlage Flaches Navigationsmuster beginnen. Alternativ dazu können Sie auch ein leeres Windows Store-App-Projekt oder Navigationsprojekt in Microsoft Visual Studio erstellen. Das Begleitbeispiel verfügt zwar über eine einfache Navigationsstruktur, aber es werden einige Hilfsfunktionen aus der Datei navigation.js, verwendet, die nicht Teil der leeren Vorlage ist. Es ist also ggf. einfacher, mit einer der Navigationsvorlagen zu beginnen und die nicht benötigten Elemente zu entfernen.

Sie können auch direkt mit dem Begleitbeispiel zu Medienwiedergabe von A bis Z fortfahren.

Im Begleitbeispiel sind alle hier aufgeführten Schritte implementiert, aber um den Ablauf nicht zu stören, gehen wir noch nicht näher auf den Code ein. Jeder Schritt verfügt über den Hinweis "Code im Beispiel", damit Sie den Code schnell finden.

Die Struktur der Quelldateien des Beispiels ist einfach und flach gehalten, damit Sie Code schnell finden und nicht mehrere Ebenen mit Quelldateien durchsuchen müssen. Es kann natürlich durchaus sein, dass Sie Ihr eigenes Projekt anders aufteilen und organisieren möchten.

Schnellstart: Wiedergeben von Videos in einer App

Richten Sie die Grundlagen für die Videowiedergabe in der App ein. In dieser Anleitung wird ausführlich beschrieben, wie Sie dabei vorgehen sollten. Zum Einrichten einer grundlegenden Audio- und Videowiedergabe müssen Sie dem HTML-Code jedoch lediglich ein audio- oder video-Element hinzufügen und die src-Eigenschaft auf eine Mediendatei festlegen.

Verwenden Sie zum Steuern der Medienwiedergabe die integrierten Transportsteuerelemente, indem Sie dem audio- oder video-Element das controls-Attribut hinzufügen. Aktivieren bzw. deaktivieren Sie die Steuerelemente, indem Sie die controls-Eigenschaft auf true oder false festlegen. Mit Transportsteuerelementen werden häufig verwendete Elemente für Medien-UIs bereitgestellt, z. B. die Wiedergabeschaltfläche und die Lautstärkeregelung. Im Beispiel sehen diese Steuerelemente wie unten dargestellt aus.

Code im Beispiel: Das video-Element hat den Namen mediaVideo und ist im HTML-Code der Datei \pages\mediaPlayer\mediaPlayer.js definiert.

So wird's gemacht: Öffnen von lokalen Mediendateien mit dem FileOpenPicker-Steuerelement

Nachdem die Medien nun wiedergegeben werden, legen wir die Medienquelle fest, während die App ausgeführt wird.

Mit dem FileOpenPicker-Steuerelement können Benutzer eine Datei aus dem lokalen Dateisystem oder vom Microsoft OneDrive auswählen. In diesem Schritt wird veranschaulicht, wie Sie das FileOpenPicker-Element einrichten und die video.src-Eigenschaft auf die Datei festlegen, die vom FileOpenPicker-Element zurückgegeben wird.

Verwenden Sie das StorageApplicationPermissions.futureAccessList-Element zum Speichern von Berechtigungen für Dateien, die mit dem FileOpenPicker-Element geöffnet werden. Die App kann später dann auf die Dateien zugreifen, z. B. beim Wiederherstellen der App aus einem Beendigungszustand.

Das FileOpenPicker-Element sieht wie folgt aus:

Für das FileOpenPicker-Steuerelement ist es nicht erforderlich, dass Ihre App Funktionen für Systemordner wie "Musik", "Videos" und "Dokumente" deklariert. Dies liegt daran, dass Benutzer über die vollständige Kontrolle über das FileOpenPicker-Element und das Öffnen von Dateien verfügen. Aus Sicherheits- und Datenschutzgründen sollte die App möglichst wenige Funktionen deklarieren. Wenn Sie jedoch möchten, dass die App auch ohne Benutzereingabe Zugriff auf die Ordner "Videos" und "Musik" hat – beispielsweise zum Anzeigen aller Albumbilder im Ordner "Musik" –, müssen Sie die entsprechenden Funktionen deklarieren. Weitere Informationen finden Sie unter Deklaration der App-Funktionen.

Code im Beispiel: Suchen Sie nach den Funktionen setMediaSourceFromFilePicker und setMediaSourceFromFile in der Datei \pages\mediaPlayer\mediaPlayer.js und nach der App-Leisten-Schaltfläche browseButton in der Datei \pages\mediaPlayer\mediaPlayer.html.

Wenn eine Windows Store-App die Benutzereingabe nicht innerhalb eines bestimmten Zeitraums erkennt, wird der Bildschirm abgeblendet und schließlich ausgeschaltet. In den meisten Apps ist dies gewünscht, weil Strom gespart und eine längere Akkudauer erzielt wird. In vielen Medien-Apps soll das Display jedoch nicht abgeblendet werden, weil die Wahrscheinlichkeit hoch ist, dass der Benutzer sich ein Video ansieht.

Teilen Sie dem System mithilfe der System.Windows.Display.DisplayRequest-Klasse mit, dass das Display für Ihre App immer aktiviert sein soll. Geben Sie jedoch sofort an, wenn diese Anforderung für die App nicht mehr erfüllt sein muss, z. B. wenn die App angehalten wird, die Wiedergabe der Medien abgeschlossen ist oder die Medien angehalten wurden. Die Akkudauer wird verkürzt, wenn Sie dies nicht angeben.

Wenn das Rendern im Vollfenstermodus mithilfe der entsprechenden Schaltfläche der integrierten Transportsteuerelemente oder über die msRequestFullscreen-Funktion aktiviert wird, wird das Abblenden des Bildschirms automatisch deaktiviert bzw. wieder aktiviert. Falls die App die Deaktivierung der Bildschirmabblendung also nur im Vollfenstermodus erfordert, müssen Sie das DisplayRequest-Element nicht selbst verwalten.

Code im Beispiel: Suchen Sie nach der setScreenDimming-Funktion in der Datei \pages\mediaPlayer\mediaPlayer.js.

So wird's gemacht: Wiedergeben von Audio im Hintergrund

Als Nächstes richten wir die Unterstützung für die Audiowiedergabe im Hintergrund ein, damit Benutzer mit Ihrer App Musik hören können, während sie mit einer anderen App interagieren.

Wenn eine App, mit der Audiodaten wiedergegeben werden, in den Hintergrund verschoben wird, z. B. beim Wechseln zu einer anderen App, wird die Audiowiedergabe standardmäßig angehalten. Für eine Musik-App kann jedoch angegeben werden, dass die Audiowiedergabe fortgesetzt werden soll.

Zum Wiedergeben von Audiodaten im Hintergrund müssen Sie im App-Manifest im Abschnitt "Deklarationen" die Audio-Hintergrundaufgabe festlegen. Außerdem müssen Sie die Eigenschaften isPlayEnabled und isPauseEnabled für SystemMediaTransportControls aktivieren und das buttonpressed-Ereignis behandeln. Dies ist erforderlich, damit der Benutzer die Audiowiedergabe starten und anhalten kann, wenn Ihre App nicht die aktive App ist.

Code im Beispiel: Suchen Sie nach dem video-Element in der Datei \pages\mediaPlayer\mediaPlayer.html und der setupSystemMediaTransportControls-Funktion in der Datei \pages\mediaPlayer\mediaPlayer.html, und sehen Sie sich in der Datei package.appmanifest.xml den Abschnitt "Deklarationen" zur Aktivierung der Hintergrundaufgabe an.

So wird's gemacht: Erstellen von benutzerdefinierten Transportsteuerelementen

Wenn Sie die Funktionen erweitern müssen, die von den Transportsteuerelementen audio und video bereitgestellt werden, oder wenn Sie sie vollständig ersetzen möchten, müssen Sie benutzerdefinierte Transportsteuerelemente erstellen. Im Beispiel zu Medienwiedergabe von A bis Z werden alle benutzerdefinierten Transportsteuerelemente auf der AppBar implementiert, aber die integrierten Transportsteuerelemente bleiben dabei aktiviert. Wenn Sie Ihre eigenen benutzerdefinierten Transportsteuerelemente erstellen, ziehen Sie es möglicherweise vor, die integrierte UI einfach durch Ihre eigene UI zu ersetzen.

Um die integrierten Transportsteuerelemente zu deaktivieren, legen Sie controls auf false fest.

In dieser Anleitung wird die Erstellung benutzerdefinierter Transportsteuerelemente für Play, Pause, Stopp, Schneller Vorlauf, Rücklauf, Positionsschieberegler, vollständiges Fenster, Audioregelung, Stummschaltung und Lautstärke behandelt.

Code im Beispiel: Suchen Sie nach den AppBar-Elementen in der Datei \pages\mediaPlayer\mediaPlayer.html und nach den Ereignishandlern, mit denen die Features implementiert werden, in der Datei \pages\mediaPlayer\mediaPlayer.js.

Hinzufügen von App-Leisten

Ordnen Sie UI, die mit der App interagiert, und die Objekte audio und video mithilfe eines WinJS.UI.AppBar-Elements auf den App-Leisten an. Die WinJS.UI.AppBarCommand-Steuerelemente sind speziell für die AppBar ausgelegt und funktionieren sehr gut. Die folgenden Steuerelementtypen sind verfügbar: "button", "toggle", "flyout", "separator" und "content".

Die WinJS.UI.AppBarIcon-Enumeration enthält viele Symbole, die Sie für das AppBarCommand.icon-Element verwenden können. Außerdem können Sie eine eigene benutzerdefinierte PNG-Datei (Portable Network Graphics) bereitstellen.

Im Begleitbeispiel sieht die untere AppBar wie folgt aus:

Im Begleitbeispiel werden Flyouts für die Steuerelemente zum Wählen des Titels und zum Regeln der Lautstärke verwendet. So wird Platz gespart.

Informationen zur Verwendung der AppBar und zum Entwerfen der App finden Sie unter Richtlinien für App-Leisten.

Code im Beispiel: Suchen Sie nach den Elementen <div id="appBarTop" und <div id="appBarBottom" in der Datei \pages\mediaPlayer\mediaPlayer.html. Wenn Sie wissen möchten, wie ein bestimmtes Steuerelement und Feature implementiert wird, können Sie sich die Ereignishandler für die Schaltflächen der App-Leiste in der Datei \pages\mediaPlayer\mediaPlayer.js ansehen.

Richtlinien für App-Einstellungen

Verwenden Sie das WinJS.UI.SettingsFlyout-Steuerelement für Windows Store-Apps mit JavaScript.

Die Einstellungen sind für Konfigurationsoptionen gedacht, die sich auf das Verhalten der App als Ganzes auswirken und nur selten angepasst werden. Im Beispiel zu Medienwiedergabe von A bis Z wird ein Flyout mit Audioeinstellungen und Videoeinstellungen erstellt, das zum Speichern von App-Einstellungen genutzt werden kann.

Code im Beispiel: Suchen Sie nach app.onactivated in der Datei \js\default.js. Die Einstellungsseiten audio.html, video.html, help.html und privacy.html befinden sich im Unterordner \settings.

Verwenden des Zertifizierungskits für Windows-Apps

Empfohlen. Mit der Ausführung des Zertifizierungskits für Windows-Apps können Sie sicherstellen, dass Ihre App die Anforderungen des Windows Store erfüllt. Es ist ratsam, das Kit jeweils auszuführen, wenn Sie der App umfangreichere Funktionen hinzufügen.