Erweiterungen für HTML5-Medienquellen: Produktionsvideo ins Web bringen

In den letzten zehn Jahren haben Plugins wie Flash und Silverlight eine umfangreiche Nutzung von Videos in Browsern ermöglicht und beliebte Dienste wie YouTube und Netflix unterstützt. Dieser Ansatz hat sich jedoch in den letzten Jahren in Richtung HTML5 verschoben.

Vor fast zwei Jahren veröffentlichte das W3C die endgültige Empfehlung der HTML5-Spezifikation, die einen neuen Satz von HTML-Elementen und APIs enthielt, insbesondere für Videos. Einige von ihnen zielen auf mehr Semantik in Webseiten ab, führen aber keine neuen Funktionen ein. Andere erweitern die Möglichkeiten des Webs und erweitern die Möglichkeiten für Entwickler, ohne dass Plugins wie Adobe Flash, Microsoft Silverlight oder Java erforderlich sind.

Weiterführende Literatur zu SmashingMag:

• Bereitstellung einer nativen Erfahrung mit Webtechnologien
• Erstellen eines vollständigen Polyfill für das HTML5-Details-Element
• Ein Anfängerleitfaden für progressive Web-Apps
• Das HTML5-Logo: Was denken Sie?

Dies ist besonders wichtig, da beispielsweise Google die Entfernung von NPAPI (einer von diesen Plugins verwendeten API) angekündigt hat, ebenso wie Firefox, und Microsoft sich für ein Plugin-freies Surfen einsetzt. Obwohl diese Anbieter noch immer einen Flash-Player anbieten, ist es wahrscheinlich nur eine Frage der Zeit, bis dies nicht mehr der Fall ist. Darüber hinaus sind Browser auf mobilen Geräten einen Schritt weiter, da die meisten von ihnen keine Plugins unterstützen und keinen Flash-Player haben.

Sehen wir uns einige der neuen HTML5-Elemente an und was sie für Videos verbessern:

• <canvas> bietet Skripte zum Rendern von Grafiken, Spielgrafiken und mehr. Dies wird manchmal als Canvas-JavaScript-API bezeichnet. Das canvas -Element kann auch mit WebGL zum Rendern von 2D- und 3D-Grafiken unter Verwendung der GPU der Grafikkarte verwendet werden.
• <video> ermöglicht die sofort einsatzbereite Wiedergabe von Videos, was wirklich großartig ist. Damit wird Plugin-freies Multimedia im Web endlich Realität. Tatsächlich scheinen sich die Browserhersteller auf ein einziges Format zu einigen – MPEG-4/H.264, das in modernen Browsern universell unterstützt wird, mit einer bemerkenswerten Ausnahme von Opera Mini.
• <audio> ermöglicht die sofort einsatzbereite Wiedergabe von Audioinhalten auf einer Webseite. Wie bei Video wird die Entscheidung, welche Containerformate und Codecs unterstützt werden sollen, den Browseranbietern überlassen.
• <track> kann für zeitgesteuerte Textspuren wie Untertitel und Bildunterschriften in einem Video verwendet werden. WebVTT-Dateien werden standardmäßig unterstützt.

Die meisten der neuen Elemente sind seit einiger Zeit im HTML5-Videoplayer-Code bekannt und werden dort verwendet, da sie in allen modernen Browsern implementiert sind. Die Spezifikation ist stabil. Dennoch hat das W3C noch viel zu tun.

Der für mich wichtigste Standard, an dem das W3C arbeitet, ist der „Media Source Extensions“ (MSE)-Standard, der derzeit den Status „Candidate Recommendation“ hat. Diese JavaScript-API ermöglicht es uns, Medienstreams für <video> , <audio> und andere Elemente zu generieren, wodurch adaptive Streaming-Standards wie MPEG-DASH in reinem HTML5 und JavaScript ermöglicht werden.

Interessant ist auch der „Encrypted Media Extensions“-Standard, der die Wiedergabe von geschützten Inhalten in HTML5 und JavaScript ermöglicht. Dies ist jedoch derzeit ein „Arbeitsentwurf“ und es wird eine Weile dauern, bis er fertig ist.

Wir begrüßen den neuen Standard und freuen uns auf die Zeit, in der wir weder einen Flash-Player noch ein Plugin benötigen, wenn Multimedia auf praktisch jedem Gerät mit einer einzigen Implementierung angezeigt werden kann.

Warum MPEG-DASH?

Schauen wir uns das MPEG-DASH-Streaming-Format an und warum es in HTML5 verwendet wird. MPEG-DASH (DASH steht für Dynamic Adaptive Streaming over HTTP) ist ein internationaler, herstellerunabhängiger Standard, der von MPEG und ISO (ISO/IEC 23009-1) ratifiziert wurde. Frühere adaptive Streaming-Technologien – wie Apple HLS, Microsoft Smooth Streaming und Adobe HDS – wurden von Anbietern mit eingeschränkter Unterstützung für anbieterunabhängige Streaming-Server oder Wiedergabe-Clients veröffentlicht. Eine herstellerabhängige Situation war eindeutig nicht wünschenswert, und so begannen Standardisierungsgremien einen Harmonisierungsprozess, der 2012 zur Ratifizierung von MPEG-DASH führte.

Dies sind die Ziele und Vorteile von MPEG-DASH in Kürze:

• Reduzieren Sie Startverzögerungen sowie Pufferung und Verzögerungen während der Videowiedergabe.
• Anpassung an die Bandbreitensituation des Clients fortsetzen.
• Verwenden Sie clientbasierte Streaming-Logik, um höchste Skalierbarkeit und Flexibilität zu ermöglichen.
• Nutzen Sie vorhandene und kostengünstige HTTP-basierte CDNs, Proxys und Caches.
• Umgehen Sie effizient NATs und Firewalls durch die Verwendung von HTTP.
• Ermöglichen Sie eine gemeinsame Verschlüsselung durch die Signalisierung, Bereitstellung und Verwendung mehrerer gleichzeitiger DRM-Schemata aus derselben Datei.
• Ermöglichen Sie einfaches Spleißen und (gezielte) Anzeigenschaltung.
• Unterstützen Sie den „Trickmodus“ effizient.
• Und vieles mehr!

In den letzten Jahren wurde MPEG-DASH in neue Standardisierungsbemühungen integriert – wie die HTML5 MSEs, die die DASH-Wiedergabe über die video und audio -Tags von HTML5 ermöglichen, sowie die HTML5 Encrypted Media Extensions, die eine DRM-geschützte Wiedergabe in Webbrowsern ermöglichen . Darüber hinaus wird der DRM-Schutz mit MPEG-DASH systemübergreifend mit MPEG-CENC (für gemeinsame Verschlüsselung) harmonisiert; und die MPEG-DASH-Wiedergabe auf verschiedenen Smart-TV-Plattformen wird durch die Integration mit Hybrid Broadcast Broadband TV (HbbTV 1.5 und HbbTV 2.0) ermöglicht.

Außerdem wurde die Verwendung des MPEG-DASH-Standards durch die Bemühungen der Industrie rund um das DASH Industry Forum und seine DASH-AVC/264-Empfehlungen sowie durch zukunftsweisende Initiativen wie die DASH-HEVC/265-Empfehlung zur Verwendung von vereinfacht H.265/HEVC innerhalb von MPEG-DASH.

Heute wird MPEG-DASH immer häufiger eingesetzt, beschleunigt durch Dienste wie Netflix und Google, die kürzlich auf diesen neuen Standard umgestellt haben. Mit diesen beiden Hauptverkehrsquellen macht MPEG-DASH bereits 50 % des gesamten Internetverkehrs aus.

Wie funktionieren die MSEs?

Sehen wir uns nun die Details der MSEs an und wie sie von Entwicklern verwendet werden können. Die MSEs sind eine Spezifikation, die das HTMLMediaElement erweitert, damit JavaScript Medienströme für audio und video Tags dynamisch erstellen kann. Dies war vorher nicht möglich, da diese Tags nur auf vollständige Dateien (z. B. MP4-Dateien) zugreifen konnten. Dieser Ansatz wird auch als progressives Streaming oder progressives Herunterladen bezeichnet, da die Mediendateien gleichzeitig heruntergeladen und abgespielt werden, wodurch Pseudo-Streaming ermöglicht wird.

Dies bringt jedoch eine schlechte Suchfähigkeit und keine Möglichkeit mit sich, die Video- und Audioqualität an die Bandbreitensituation des Benutzers anzupassen. Durch die Erstellung von Medienstreams in JavaScript als Eingaben für die audio und video Tags können Entwickler nun einen Medienstream dynamisch an den Kontext des Benutzers anpassen und so das Streaming-Erlebnis verbessern.

Wie bereits erwähnt, ist MPEG-DASH das Streaming-Format der Wahl für die MSEs. Schauen wir uns also die Schritte an, die zum Erstellen eines HTML5 MSE-basierten Videoplayers erforderlich sind:

1. Laden Sie die Manifestdatei – in MPEG-DASH als MPD bezeichnet – herunter und parsen Sie sie, die die Details des Videostreams beschreibt, wie z. B. die Anzahl der Qualitätsstufen und Auflösungen des Videostreams, Audiosprachen und Untertitel sowie den Namen der Mediensegmente und Dateien auf dem HTTP-basierten Ursprungsserver oder CDN.
2. Schätzen Sie die verfügbare Bandbreite auf dem Client-Gerät, wählen Sie die geeignete Videoqualität, um ein pufferloses Streaming zu erreichen, und laden Sie die Mediensegmente in JavaScript herunter.
3. Übergeben Sie die heruntergeladenen Mediensegmente in JavaScript an den MSE-Puffer.
4. Decodieren und rendern Sie das Video über das video Tag, normalerweise in der Hardware.

So funktionieren HTML5-basierte adaptive Streaming-Player, wie sie von Netflix und YouTube verwendet werden. Es gibt bereits recht ausgereifte Lösungen, die es Entwicklern und Inhaltsanbietern leicht machen, auf adaptives Bitraten-Streaming in HTML5 umzusteigen, wie das DASH-IF-Open-Source-Projekt dash.js und der Bitdash-HTML5-Player.

Die Generierung von MPEG-DASH-Inhalten ist ebenfalls unkompliziert und wird von Open-Source-Tools wie x264 und MP4Box sowie von kommerziellen Codierungsdiensten wie Bitcodin unterstützt

Die Verwendung der MSEs ist jedoch nicht auf MPEG-DASH beschränkt. Immer mehr Projekte (einschließlich hls.js) und Player (einschließlich Bitdash) unterstützen das HLS-Format von Apple in HTML5 mithilfe der MSEs. Sie tun dies, indem sie die HLS-Mediensegmente – die MPEG2-TS-Container sind – in das von HTML5 und MPEG-DASH geforderte ISO-Basismediendateiformat transmultiplexen.

Verschlüsselte Medienerweiterungen für DRM

Auf dem DRM-Markt finden derzeit große Veränderungen statt, die durch den bevorstehenden Drop von NPAPI-Plug-ins – wie Silverlight, das zum Drop des führenden DRM-Systems PlayReady führte – von Chrome und Firefox verursacht wurden. Dies bringt nahezu alle Premium-Content-Anbieter in eine schwierige Situation, da sie die Technologie wechseln und eine zukunftssichere Lösung finden müssen.

Herausgeber von Premium-Streaming-Medien können sich nicht auf PlayReady DRM von Microsoft verlassen, um ihre Inhalte in Chrome und Firefox auf PCs und Android-Geräten zu sichern. Sie müssen ihre Strategie zum Schutz von Inhalten und Streaming-Plattformen neu bewerten und eine zukunftssichere Lösung finden und dann in Kürze die Technologie wechseln.

Für viele Inhaltsanbieter hat sich MPEG-DASH als Technologie der Wahl herausgestellt. DASH-Projekte werden immer schneller eingeführt, und MSEs und Encrypted Media Extensions (EMEs) mit Widevine DRM scheinen die praktikabelste Alternative zu sein. Außerdem ermöglicht MPEG-CENC die Unterstützung separater DRM-Systeme mit nur einer Version geschützter Inhalte, und EMEs basieren auf den MSEs für MPEG-DASH-basierte Inhalte.

Diese Kombination verschiedener DRM-Systeme – zum Beispiel Widevine Modular für Chrome und Android, Microsoft PlayReady für Internet Explorer und Edge sowie Primetime von Adobe für Firefox – für eine Version eines Inhalts gibt Inhaltsanbietern einen zusätzlichen Anreiz, auf MPEG umzusteigen -DASH als internationaler Standard aufgrund seiner Flexibilität mit Streaming, DRM und CDNs.

Browserunterstützung für MSEs und EMEs

Nach ein paar Jahren langsamer Einführung von HTML5 durch Browseranbieter und insbesondere von MSEs sehen wir jetzt, dass eine Mehrheit von ihnen es unterstützt. Dies gilt auch für EMEs, obwohl in diesem Fall jeder Anbieter ein anderes DRM-System anstrebt und das Ökosystem etwas differenzierter ist.

Um jedoch 99 % der Benutzer zu erreichen, benötigen wir ein Video-Streaming-Setup, das auch Browser unterstützt, die die MSEs nicht unterstützen, insbesondere alte Browserversionen und Safari auf iOS. Alte Browser können problemlos mit einem Flash-basierten Player bedient werden, der dieselben MPEG-DASH-Inhalte wiedergeben kann, die von den MSEs verwendet werden, wie der Bitdash-Player zeigt. Um iOS-Geräte zu unterstützen, müssen wir Apples Streaming-Format namens HLS verwenden, das Apple für HTML5 vorschreibt. Offene Standards wie die MSEs werden von Apple nicht unterstützt, obwohl sie von Safari unter OS X unterstützt werden.

Die folgende Matrix gibt einen Überblick über den Status der MSE- und EME-Unterstützung für Browser und Plattformen heute (mit freundlicher Genehmigung von Bitmovin):

Die Zukunft von HTML5-Videos

Neue Medien-Codecs drängen auf den Markt und machen die Videokomprimierung noch effizienter, was besonders für höherwertige Formate wie 4K und UHD sowie für das Streaming auf mobile Endgeräte wichtig ist. Der gebräuchlichste Codec ist HEVC/h.265 , der in ein paar Jahren der Standardcodec sein könnte (wenn die Patentsituation das nicht durcheinander bringt). Außerdem wird es die integrierten MSEs des Browsers für die Wiedergabe nutzen und MPEG-DASH als Streaming-Format verwenden, was die Flexibilität dieses offenen Standards zeigt.

Entwickler von Videoplayern müssen nur einige einfache Anpassungen vornehmen, wie das Ändern des Codec-Attributs beim Erstellen des SourceBuffer; und wenn der zugrunde liegende Browser HEVC-Decodierung unterstützt (höchstwahrscheinlich durch einen Hardware-Decoder), können Sie Ihre HEVC MPEG-DASH-Streams in HTML5 ansehen! Wir haben erfolgreich mit Browsern wie Microsoft Edge getestet, das HEVC-Unterstützung bietet. Außerdem hat Google kürzlich Unterstützung in seinem Chromium-Browser angekündigt.

Dennoch ist HEVC für die überwiegende Mehrheit der Internet-Video-Assets noch nicht verfügbar, und nur wenige Geräte sind in der Lage, es zu decodieren. Und natürlich ist es nicht der einzige Codec in der Stadt. Das offene und lizenzfreie Videokodierungsformat VP9 (der Nachfolger von VP8) zielt auf eine noch bessere Kodierungseffizienz ab und wird bereits von gängigen Browsern wie Google Chrome und Microsoft Edge unterstützt, und dieser Codec ist auch mit MSE kompatibel. Welche Codecs in unseren Streaming-Alltag Einzug halten werden, können wir allerdings noch nicht absehen. Aber egal ob VP8/9, AVC oder HEVC, die MSEs und MPEG-DASH sind bereit!

Ein kommender Trend sind 360-Grad-Videos, die in HTML5 ziemlich einfach zu verwenden sind. Entwickler könnten die adaptive Streaming-Unterstützung von MSEs nutzen und einfach eine JavaScript- oder WebGL-Rendering-Schicht für ein 360-Grad-Erlebnis darüber hinzufügen. Kürzlich habe ich einen Vortrag über dieses Thema gehalten und darüber, wie man einen Netflix-ähnlichen Dienst für virtuelle Realität mit HTML5, JavaScript, DASH und WebGL erstellt.

Fazit

Ich hoffe, dieser Artikel hat Ihnen einen guten Überblick über den Stand und die Zukunft von Videos im Web gegeben. Die MSEs und EMEs sind große Schritte in Richtung eines Ökosystems offener Standards für Videos im Web, die Plugins wie Flash und Silverlight ersetzen. Darüber hinaus wird HTML5 in der heutigen Multi-Plattform-Welt auf den bevorzugten Plattformen eingesetzt, einschließlich Desktop-, Mobil- und Smart-TV-Umgebungen.

Zusammen mit Streaming-Standards wie MPEG-DASH können Inhaltsanbieter eine einheitliche Videolösung für alle Plattformen und Geräte haben . Sie können die Benutzererfahrung durch adaptive Streaming-Formate verbessern, die Pufferung verhindern, Ladezeiten verkürzen und die bestmögliche Qualität für die Bandbreite und Gerätesituation jedes Benutzers bieten.