Medienwiedergabe von A bis Z (HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Hier erfahren Sie, wie Sie Medien-Apps mit vielen Features für Windows 8.1 erstellen, die eine Audio- und Videowiedergabe ermöglichen, akkuschonend sind und über optimiertes Rendering verfügen.

Es wird von A bis Z beschrieben, wie Sie eine Windows Store-App mit JavaScript erstellen, die viele Medienfeatures umfasst. Windows 8.1 enthält viele Verbesserungen, die dies noch einfacher machen, z. B. die neue msRequestFullscreen-API. Folgendes wird behandelt:

• Grundlagen der Medienwiedergabe, z. B. die Verwendung der HTML-Elemente audio und video, die Aktivierung der Transportsteuerelemente und das Laden von Mediendateien vom Gerät oder aus dem Netzwerk.
• Features der Medienwiedergabe, z. B. das richtige Verhindern der Bildschirmabblendung, Wiedergeben von Audiodaten im Hintergrund, Interagieren mit den Steuerelementen für den Systemmedientransport, Ändern der Videogröße, Erstellen benutzerdefinierter Transportsteuerelemente und Aktivieren des Renderns im Vollfenstermodus.
• App-Grundlagen, z. B.das Beibehalten des App-Zustands, Erstellen von UI-Elementen auf der App-Leiste und Erstellen von Einstellungen-Flyouts.

Falls Sie noch nicht viel Erfahrung mit der Entwicklung von Windows Store-Apps mit JavaScript haben, sollten Sie sich das Thema Erstellen Ihrer ersten Windows Store-App mit JavaScript ansehen, um die erforderlichen Informationen zu erhalten.

Jeder der folgenden Schritte ist mit einem Link zu einem "So wird's gemacht"-Thema mit Beispielen und Code versehen, das Sie bei Bedarf nutzen können.

Das Beispiel zu Medienwiedergabe von A bis Z enthält alle hier beschriebenen Aspekte. Es wird häufig auf dieses Begleitbeispiel und die darin enthaltenen Stellen verwiesen, an denen die speziellen Features implementiert sind.

Erstellen einer Medien-App

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.

 

Grundlagen der Medienwiedergabe

	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.
	Unterstützte Audio- und Videoformate Windows Store-Apps mit JavaScript unterstützen eine große Anzahl von Audio- und Videoformaten. Klicken Sie auf den Link, um eine vollständige Liste zu erhalten.
	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.
	So wird's gemacht: Öffnen von Mediendateien über das Netzwerk Das FileOpenPicker-Steuerelement eignet sich gut für das Abrufen einer Datei vom lokalen System, jedoch nicht zum Festlegen der Medienquelle auf eine Datei im Netzwerk. Legen Sie hierzu einfach das src-Element auf den Pfad der Mediendatei im Netzwerk fest. Code im Beispiel: Suchen Sie nach den Funktionen setMediaSourceFromTextBox und setMediaSourceFromPath in der Datei \pages\mediaPlayer\mediaPlayer.js. Sehen Sie sich auch das txtSourceInput input-Element in der Datei \pages\mediaPlayer\mediaPlayer.html an, das zum Eingeben des Medienpfads verwendet wird.

 

Features der Medienwiedergabe

	So wird's gemacht: Display während der Audio- und Videowiedergabe eingeschaltet lassen 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: Verwenden der Systemsteuerelemente für den Medientransport Mit Windows 8.1 wurde eine neue Klasse zum Interagieren mit den Systemsteuerelementen für den Medientransport eingeführt. Verwenden Sie jetzt anstelle der alten MediaControl-Klasse die SystemMediaTransportControls-Klasse. Die Systemsteuerelemente für den Medientransport unterscheiden sich von den Transportsteuerelementen des HTML-Medienobjekts. Dies sind die Steuerelemente, die angezeigt werden, wenn Sie Hardwaretasten für Medien betätigen (z. B. den Lautstärkeregler an Kopfhörern oder die Medientasten auf Tastaturen). Ihre App kann die Nutzung dieser Steuerelemente registrieren und sogar Metadaten von Medien zum Anzeigen zurückgeben, z. B. Albumbilder oder Songtitel. Die folgende Abbildung zeigt diese Steuerelemente. Code im Beispiel: Suchen Sie nach den Funktionen WinJS.UI.Pages.define, setupSystemMediaTransportControls und systemMediaControlsButtonPressed in der Datei \pages\mediaPlayer\mediaPlayer.js. Außerdem nach den Ereignishandlern mediaPlaying, mediaPaused und mediaEnded 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: Aktivieren des vollständigen Renderns von Fenstern Die integrierten Transportsteuerelemente für die Objekte audio und video verfügen über eine Schaltfläche für den Vollfenstermodus. Verwenden Sie jedoch die msRequestFullscreen-Funktion, wenn Sie das Rendering im Vollfenstermodus programmgesteuert aktivieren oder deaktivieren möchten. In Versionen vor Windows 8.1 mussten Sie die Grenzen des vollständigen Fensters berechnen und die andere UI selbst ein- und ausblenden. Wenn dies nicht richtig durchgeführt wurde, wurden ggf. einige Renderingoptimierungen nicht aktiviert. Verwenden Sie also immer die msRequestFullscreen-Funktion, um das Rendering im Vollfenstermodus zu aktivieren und zu deaktivieren. (Außerdem ist es auch deutlich einfacher.) Code im Beispiel: Suchen Sie nach der fullScreenMedia-Funktion in der Datei \pages\mediaPlayer\mediaPlayer.js.
	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.

 

App-Grundlagen

	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.
	Verwalten von App-Lebenszyklus und -Zustand Das Speichern des App-Zustands in Windows Store-Apps ist wichtig, da die App jederzeit angehalten und in den Hintergrund verschoben und vom System beendet werden kann. Wenn die App fortgesetzt wird, erwarten die Benutzer, dass sich die Medien an derselben Stelle befinden und alle App-Einstellungen intakt sind. Sie können den App-Zustand entweder im isolierten Speicher auf dem Gerät oder im Roamingspeicher speichern. Roamingspeicher hat den Vorteil, dass Benutzer Ihre App auf mehreren Geräten ausführen können und der Zustand stets verfügbar ist. Wichtige video-Zustände, die gespeichert werden sollten, sind src, currentTime, loop, paused, ended, autoplay sowie alle ausgewählten audioTracks. navigation.js enthält Hilfsfunktionen, die Teil der Visual Studio-Vorlagen sind. Sie sind Teil aller Vorlagen, mit Ausnahme der leeren Vorlage. Diese Hilfsfunktionen vereinfachen die Behandlung des Anhaltens, Fortsetzens und des Fortsetzens nach der Beendigung. Einige Medienzustände sollten nach dem Laden von Medien wiederhergestellt werden, z. B. currentTime. Code im Beispiel: Suchen Sie nach den Funktionen app.oncheckpoint, navigationHelper_SaveState, restoreMediaState, mediaLoaded und appResumingFromSuspend in der Datei \pages\mediaPlayer\mediaPlayer.js. Suchen Sie in der Datei \js\default.js nach app.onactivated.
	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.

 

Fertigstellung

	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.
	Sie sind fertig! Nachdem Sie jetzt unterschiedliche Features der Medienwiedergabe für Ihre App untersucht haben, können Sie eine App wie im Beispiel zu Medienwiedergabe von A bis Z erstellen.

 

Möchten Sie weitere Informationen erhalten?

Windows Store-App-UI von A bis Z

Hier erhalten Sie weitere Informationen zum Entwerfen der Windows Store-App-UI.

Benutzerinteraktion von A bis Z

Hier erhalten Sie weitere Informationen zum Hinzufügen der Toucheingabe zu Windows Store-Apps.

Roadmap für Windows Store-Apps mit JavaScript

Hier erhalten Sie weitere Informationen zur allgemeinen Erstellung von Windows Store-Apps mit JavaScript.

Gestalten der Benutzeroberfläche für Apps

Hier erhalten Sie weitere Informationen zum Entwerfen eindrucksvoller Benutzeroberflächen.

Unterstützte Audio- und Videoformate

Hier erhalten Sie weitere Informationen zu den unterstützten Audio- und Videoformaten in Windows Store-Apps mit JavaScript.

Audio- und Videoleistung

Hier erhalten Sie weitere Informationen zu den Leistungsaspekten von Medien-Apps.

Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Formaten

Hier erhalten Sie weitere Informationen zu Steuerelementen und Ereignissen in Windows Store-Apps mit JavaScript.

Verwandte Beispiele

• Beispiel für die HTML-Medienwiedergabe
• MediaHub-Beispiel-App
• Beispiel für Medienerweiterungen
• Beispiel für "Wiedergeben auf"
• Beispiel für Energiezustand der Anzeige
• Beispiel für den Wiedergabe-Manager
• Beispiel für die Steuerelemente für den Systemmedientransport
• Beispiel zum Kennenlernen von Effekten