Windows Dev Center

Audio- und Videoleistung (HTML)

Wenn Sie eine App entwickeln, die Audio und Video verwendet, sollten Sie ein paar wichtige Überlegungen hinsichtlich der Leistung beachten. Dieses Dokument enthält eine Zusammenfassung der Entwurfsbereiche, die zum Erzielen einer leistungsstarken Medienwiedergabe in Windows Store-Apps mit JavaScript wichtig sind.

HTML5-Medienelemente – insbesondere die Tags audio und video – werden zum Standard für die Medienwiedergabe im Web. Sie stellen auch den Standard für die Medienwiedergabe in einer Windows Store-App mit JavaScript dar. Obwohl die Standard-APIs in zahlreichen Webplattformen konsistent sind, müssen Sie bestimmte beachten, wenn Sie eine Windows Store-App mit JavaScript in Windows 8 entwickeln. Die Windows 8-spezifischen Erweiterungen für die Tags audio und video verfügen über Feature- und Leistungsverbesserungen, die Sie beim Entwerfen von Apps kennen sollten.

Aktivieren von Videos im Vollbildmodus

Die Videowiedergabe im Vollbildmodus ist ein typisches Szenario für eine immersive Benutzerfreundlichkeit. Dies kann mithilfe des video-Tags und von CSS-Formatvorlagen (Cascading Stylesheets) auf einfache Weise erreicht werden. Im folgenden Beispiel ist eine CSS-Formatvorlage dargestellt.


video {
    position: fixed;
    width: 100%;
    height: 100%;
}

Wenn sich das Video im Vollbildmodus befindet, sollten von der App für eine optimale Systemleistung alle nicht verwendeten Webelemente wie die Steuerungstasten ausgeblendet werden. Andernfalls könnte sich dies auf den optimierten Renderingvorgang auswirken. Apps können beispielsweise CSS-Formatvorlagen verwenden, um "visibility: hidden" oder "display: none" für die Transportsteuerelemente festzulegen. Alternativ können Apps den CSS-Z-Index verwenden, um das Video über allen anderen Elementen zu platzieren.

Sie sollten die Verwendung anderer Webelemente zum Erstellen Ihrer eigenen Letterboxformate für Videos vermeiden. Dadurch werden einige der optimierten Renderingverbesserungen deaktiviert.

Bei der Wiedergabe im Vollbildmodus sollten Apps alle Animationen im Hintergrund anhalten Im Hintergrund ausgeführte Timer könnten die CPU unnötig reaktivieren, auch wenn die Animation selbst nicht sichtbar ist.

Die msIsLayoutOptimalForPlayback-Eigenschaft

Die msIsLayoutOptimalForPlayback-Eigenschaft ist eine schreibgeschützte Eigenschaft, die als Windows 8-spezifische Erweiterung für das video-Tag eingeführt wurde. In einer Windows Store-App mit JavaScript gibt sie an, ob sich ein "video"-Tag unter einem optimierten Renderingpfad befindet. Der optimierte Codepfad ermöglicht eine verbesserte Systemleistung, einen besseren Schutz von Daten und das Stereo-3D-Videorendering. Es kann hilfreich sein, diese Eigenschaft während der App-Implementierung und des Debuggingvorgangs nachzuverfolgen. Sie können auf das onMSVideoOptimalLayoutChanged-Ereignis lauschen, um über msIsLayoutOptimalForPlayback-Änderungen informiert zu werden. Beachten Sie, dass der optimierte Renderingpfad nicht auf die Videowiedergabe im Vollbildmodus beschränkt ist.

Sie sollten die Dinge in der folgenden Liste vermeiden.

  • Videoelemente mit CSS-Gliederungen. Dadurch wird erzwungen, dass beim Videorendering nicht der unter Windows 8 implementierte optimierte Codepfad verwendet wird.

  • Durch eine Canvas gerenderte Videoelemente. Dies beinhaltet umfangreiche Speicherkopien im Renderingvorgang, die bei einer Hochleistungswiedergabe nicht erwünscht sind.

  • In SVG (Scalable Vector Graphics) eingebettete Videoelemente. Dies ähnelt dem Fall mit der Canvas und ruft sehr viele Speicherkopien auf, die bei einer leistungsstarken Wiedergabe nicht erwünscht sind.

  • Festlegen der msRealTime-Eigenschaft für das Video- oder Audio-Tag auf true. Dadurch wird das System in einen Modus mit geringer Wartezeit versetzt, was in Kommunikationsszenarien erwünscht, aber weniger energieeffizient ist.

  • Videowiedergabe im Hintergrund Wenn eine App, die ein Video wiedergibt, in den Hintergrund platziert wird, sollte die App das Video anhalten, bis es einen bestimmten Grund für die weitere Wiedergabe des Videos im Hintergrund gibt. Dadurch wird die Auswirkung der Leistung auf das gesamte System reduziert.

Nutzen Windows 8-spezifischer Erweiterungen

Manchmal gibt es Dinge, die Sie als Teil der Darstellung am Video vornehmen möchten, beispielsweise das Spiegeln des Videos oder Vergrößern eines Abschnitts des Videos. Wir empfehlen Ihnen, sich die für das video-Tag hinzugefügten Erweiterungen anzusehen, bevor Sie eine Canvasoption auswählen.

Nachfolgend finden Sie eine kurze Liste mit Renderingoptionen. Sie werden auf der systemeigenen Ebene der Medienpipeline implementiert und als Eigenschaften oder Methoden für das video-Tag verfügbar gemacht.

  • msZoom: Bei Festlegung auf true werden alle Letterbox- oder Pillarboxformate um das Video zugeschnitten.
  • msSetVideoRectangle: Wählt einen bestimmten rechteckigen Teilbereich des Videos aus, der für das Video-Tag gerendert wird. Damit kann ein bestimmter Teilbereich des Videos vergrößert werden.
  • msHorizontalMirror: Spiegelt das Video bei Festlegung auf "true" horizontal.

Für erweiterte oder komplexere Video- und Audio-DSP-Vorgänge (Digital Signal Processing) sollten Sie auf Microsoft Media Foundation basierende (MF) Medien-Plug-Ins schreiben. Diese können besser ausgeführt werden als direkt mithilfe von JavaScript geschriebene DSP-Vorgänge.

Nachfolgend finden Sie einige Tipps zum Schreiben von DSP-Plug-Ins.

  • Für Video-DSP sollten Sie die Verwendung des Grafikprozessors (Graphics Processing Unit, GPU) (d. h. DX-Shader-Code) in Betracht ziehen und softwarebasierte Implementierung so häufig wie möglich vermeiden.

  • Wenn Sie mehrere DSP-Filter schreiben, sollten Sie sie in eine einzelne Media Foundation Transform (MFT) einschließen. Dadurch wird der Mehraufwand von zwei miteinander verketteten DSP-MFTs reduziert (auch wenn das Verketten in der Windows 8-Plattform zulässig ist).

Es folgen einige Überlegungen, wann Sie andere Medien-Plug-Ins wie MF-Medienquellen oder -decoder implementieren müssen.

  • Sie sollten beachten, dass Codecs für geschützte Medienformate in der Regel nur im Softwaremodus verwendet werden können. Daher können sie die für andere Medienstandardformate wie H.264 verfügbare Hardwarebeschleunigung nicht nutzen.

  • Die Plug-In-Komponenten müssen Funktionen zum Verarbeiten von Qualitätsmanagementnachrichten (QM) implementieren. Dann muss die gesamte Medienpipeline keine Aufgaben mehr annehmen, die die Systemkapazität übersteigen.

Empfohlene Medienformate

Die Medienformatauswahl kann ein sensibles Thema sein und wird durch Geschäftsentscheidungen gesteuert. Im Hinblick auf die Leistung von Windows 8 werden H.264-Video als primäres Videoformat sowie AAC und MP3 als bevorzugte Audioformate empfohlen. Bei der lokalen Dateiwiedergabe ist MP4 der bevorzugte Dateicontainer für Videoinhalt. Wie im vorherigen Abschnitt erwähnt wurde, wird die H.264-Decodierung durch aktuelle Grafikhardware beschleunigt. Es sollte auch erwähnt werden, dass die Beschleunigung bei einer großen Menge der auf dem Markt erhältlichen Grafikhardware in vielen Fällen auf eine partielle Beschleunigung (oder IDCT-Ebene) beschränkt ist und keine Hardwareauslagerung auf der vollen Datenstromebene (d. h. VLD-Modus) verwendet wird, obwohl die Hardwarebeschleunigung für die VC-1-Decodierung weitgehend verfügbar ist. In Bezug auf Audio wird erwartet, dass für AAC und MP3 in den künftigen Windows 8-SoC-Geräten Hardwareauslagerungslösungen verfügbar sind.

Ein Aspekt, den Sie für Ihre Apps oder Dienste berücksichtigen sollten, wenn Sie über volle Kontrolle für die Videoinhaltsgenerierung verfügen, liegt darin, einen guten Ausgleich zwischen Komprimierungseffizienz und GOP-Struktur zu bewahren. Eine relativ geringe GOP-Größe bei B-Bildern kann die Leistung bei Such- oder Stichmodi verbessern.

Wenn Sie kurze Audioeffekte mit niedriger Wartezeit einschließen (z. B. in Spielen), sollten Sie WAV-Dateien mit nicht komprimierten PCM-Daten verwenden, um den für komprimierte Audioformate typischen Verarbeitungsmehraufwand zu reduzieren.

Tipps zum Erstellen von Transportsteuerelementen mit leistungsstarker Benutzererfahrung

Auch wenn die Video- und Audioimplementierung auf der Windows 8-Webplattform über integrierte Transportsteuerelemente verfügt, wird davon ausgegangen, dass Windows Store-Apps mit JavaScript eigene benutzerdefinierte Steuerelemente enthalten, die dem Format oder Charakter der jeweiligen Apps entsprechen.

Scrubbing ist immer eine harte Aufgabe, damit Medienplattformen wirklich schnell reagieren. Es folgen ein paar Tipps, mit denen das Scrubbing in einem benutzerdefinierten Steuerelement genauso effizient ausgeführt werden kann wie bei den systemeigenen Transportsteuerelementen.

  • Legen Sie die playbackRate-Eigenschaft des video-Tags während der Bereinigung auf "0" fest, und setzen Sie sie danach wieder auf den Wert vor der Bereinigung zurück.

  • Stellen Sie sicher, dass alle Pixel (oder Positionen) auf dem Schieberegler zählen. Ein häufiger Fehler besteht im Erstellen von Apps, die Schieberegler mit nur etwa einhundert gültigen Positionen verwenden, selbst wenn sich möglicherweise 1200 Pixel auf dem Schieberegler befinden. Ein Schieberegler mit Pixelgenauigkeit ist für ein reibungsloses Scrubbing immer erforderlich.

Ein weiterer Tipp besteht darin, dass die Apps Layoutänderungen vermeiden und msTransform zum Aktualisieren der Webelementpositionen verwenden sollten. Dadurch wird der optimierte Renderingpfad intern aufgerufen, anstatt das Layout neu zu berechnen. Der Schiebereglerzeiger für ein Transportsteuerelement kann hierbei als gutes Beispiel berücksichtigt werden.

Wie bereits erwähnt, empfiehlt es sich generell, die Transportsteuerelemente automatisch auszublenden, wenn für einige Sekunden keine Benutzerinteraktion erfolgte. Dies ist während der Videowiedergabe im Vollbildmodus sehr hilfreich. Daher sollten Sie dies auch dann berücksichtigen, wenn das Video nur eine Teilmenge Ihres gesamten App-Layouts darstellt.

Unterstützung für Untertitel

Die Windows 8-Webplattform enthält grundlegende Untertitelfunktionen, die auf dem in der W3C-Spezifikation (World Wide Web Consortium) definierten <track>-Element basieren. Wir haben WebVTT (Web Video Text Track) und SMPTE-TT (SMPTE Timed Text) als systemeigene in HTML5-Apps unterstützte Formate übernommen. Für die beste Systemleistung sollten Sie das nutzen, was von der Webplattform unterstützt wird. Sie sollten die möglichen Auswirkungen auf die Leistung berücksichtigen, wenn Sie ein anderes Untertiteldatenformat auswählen und die Analyse des Renderings auf App-Ebene verarbeiten müssen.

Verwenden von Posterbildern zur Verbesserung der Netzwerkverwendung

Das video-Tag verfügt über ein optionales Attribut, das einer App das Anzeigen eines Posterbilds erlaubt, bevor die Videodaten tatsächlich heruntergeladen wurden. Dies ist eine hervorragende Möglichkeit, um sicherzustellen, dass Netzwerk- und Systemressourcen nur bei Bedarf verwendet werden, beispielsweise wenn der Benutzer den Videoinhalt tatsächlich wiedergeben möchte. Legen Sie das preload-Attribut des video-Tags auf "none" fest, um diese Funktion zu verwenden. Der Benutzer muss dann vielleicht einige Sekunden länger warten, bis der Inhalt heruntergeladen wird. Der Vorgang ist aber benutzerfreundlicher, falls die App in einer Umgebung mit einem getakteten Netzwerk verwendet wird.

Wiederverwenden von audio- und video-Tags

Es ist üblich, dass Apps zur Laufzeit die audio- und video-Tags dynamisch erstellen. Die Ressourcen aller Systeme sind jedoch beschränkt, und das System kann nur eine bestimmte Anzahl von Medienelementen gleichzeitig unterstützen. Die audio- und video-Tag-Ressourcen werden vielleicht nicht sofort freigegeben, wenn Sie aus der DOM-Struktur (Dokumentobjektmodell) entfernt werden, und daher in den Systemquellen beibehalten, z. B. Systemspeicher oder Grafikprozessorspeicher. Um die Auswirkung auf die Systemressourcen abzumildern, wird empfohlen, die video- und audio-Tags aus einem Pool bereits erstellter video- und audio-Tags wiederzuverwenden, indem neue Quellen für die Tags festgelegt werden. Wenn Sie ein Medienelement freigeben müssen, setzen Sie das src-Attribut zurück, und entfernen Sie alle Quellelemente, die in das entsprechende Medienelement eingebettet sind.

Deaktivieren des Displays und Einsparen von Energie

Um zu verhindern, dass das Display deaktiviert wird, wenn keine Benutzeraktion mehr festgestellt werden kann, beispielsweise beim Wiedergeben eines Videos in einer App, können Sie DisplayRequest.RequestActive aufrufen.

Um Energie zu sparen und den Akku zu schonen, wird empfohlen, DisplayRequest.RequestRelease aufzurufen und die Displayanforderung freizugeben, sobald diese nicht mehr benötigt wird.

In den folgenden Situationen sollten Sie die Displayanforderung freigeben:

  • Die Videowiederangabe wurde angehalten, z. B. durch eine Benutzeraktion, Pufferung oder eine Anpassung aufgrund beschränkter Bandbreite.
  • Die Wiedergabe ist beendet. (Beispielsweise, wenn das Video oder die Präsentation zu Ende ist.)
  • Ein Wiedergabefehler ist aufgetreten. (Beispielsweise bei Problemen mit der Netzwerkkonnektivität oder einer beschädigten Datei.)

Hardwareaudioauslagerung

Wenn die Hardwareaudioauslagerung automatisch verwendet werden soll, muss msAudioCategory auf ForegroundOnlyMedia oder BackgroundCapableMedia festgelegt sein. Hardwareaudioauslagerung optimiert das Audiorendering, wodurch die Funktionalität und Akkulaufzeit verbessert werden können.

 

 

Anzeigen:
© 2015 Microsoft