Kategorien
Design HTML/CSS

HTML5-Video: Grundwissen für alle

Hast du schon mal davon geträumt, eine eigene App im Stile von Twitch.tv zu bauen, um so einen Livestream der eigenen Arbeit aufzusetzen? Oder wie wäre es mit einem Programm, dass deine neuesten Videos abspielen kann, so wie YouTube? Vielleicht hast du ja für solche Rich Media-Inhalte bisher Flash, Java oder Silverlight genutzt. Aber, nachdem nun diese Plugins von Chrome ab 42 nicht mehr unterstützt werden, ist es wohl höchste Zeit, sich ernsthaft mit HTML5 zu befassen.

Bevor ich für Microsoft arbeitete, war ich Senior Engineer im Team Produktentwicklung von Comcast, wo ich an Video-Playern für eine Reihe von Plattformen arbeitete: vom Web, über die Xbox One, die Xbox 360 bis hin zu SmartGlass. Es war eine hervorragende Möglichkeit, alles über die aktuellen Videotechnologien zu lernen und ich bin froh, dass ich in meiner jetzigen Rolle dieses Wissen weitergeben kann.

Was du in diesem Moment liest, ist der erste Teil einer Artikelserie darüber, wie man die Azure Media Services nutzen kann, um HTML5-Video zu erstellen und anzuschauen. In diesem Tutorial werde ich erklären, wie man die Cloud Media-Lösung einrichtet und dann beginnen kann, mit Live oder On Demand-Video zu experimentieren.

Kurze Einführung in Videoformate

Videoformate gibt es viele. Hier stelle ich nur einige der heute gebräuchlichen vor. Dafür sollten wir zu allererst verstehen, wie adaptives Streaming funktioniert, schließlich arbeiten viele der vorgestellten Technologien damit.

<iframe width="560" height="315" 
		src="https://www.youtube.com/embed/AeJzoqtuf-o" 
		frameborder="0" allowfullscreen>
</iframe> 

Adaptives Streaming zerlegt eine Videodatei in kleine Teile. Das "adaptive" daran besteht darin, dass Videos in verschiedenen Bitraten und Auflösungen codiert werden können. Dadurch entstehen Stücke von unterschiedlicher Größe. Daraus kann der Player verschiedene Bitraten/Auflösungen auswählen und sich automatisch an kleinere oder größere Teile der Datei anpassen, abhängig von der jeweiligen Qualität der Netzwerkverbindung.

Scott Hanselman hat das mal ganz gut beschrieben (also zumindest das Smooth Streaming).

Man muss es sehen, um es zu verstehen. Aber eigentlich ist es in seiner Einfachheit bestechend clever. Manche flippen aus, wenn sie z.B. eine 200 MB große Videodatei für Smooth Streaming codieren und das entstehende Dateiverzeichnis sagt ihnen so was wie 500 MB. Dann beschweren sie sich wahrscheinlich: Es ist jetzt viel größer! Das übersteigt meine Bandbreite! In Wirklichkeit wird aber viel weniger übertragen, als die Datei auf der Festplatte an Platz einnimmt. Die Idee dahinter ist, dass Smooth Streaming verschiedene “Schritte” von Bitraten erstellt. Die Datei wird in unterschiedlichen Bitraten codiert und auf dem Rechner gespeichert. 

Smooth Streaming DJ Hero

Progressive MP4

Übersicht bei Adobe.com

Dieses Format lädt Videos und legt sie in einen Zwischenspeicher auf dem Rechner des Betrachters. Es dauert einen kurzen Moment, den Anfang des Videos zu „puffern“, bevor die Datei abgespielt werden kann. Wenn das Video erstmal im Zwischenspeicher ist, fällt beim Abspielen in der Regel keine weitere Puffer-Zeit mehr an. Unter Nutzung des Standard HTTP-Protokolls werden progressiv heruntergeladene Dateien meist über ein Content Delivery Network (CDN) bereitgestellt. Der Video-Player stellt also eine direkte HTTP-Verbindung mit den Servern des CDN her (in unserem Beispiel Azure), um den Inhalt abzurufen.

Der riesige Nachteil bei so einem Verfahren, ist die Verschwendung von Bandbreite. Der Player startet die Wiedergabe des Videos, sobald er genug Daten hat – und er lädt immer weitere Daten nach, unabhängig davon, wieviel der User von dem Video tatsächlich anschauen wird. Was passiert, wenn der User nach einer Minute genug hat? Verschwendete Bandbreite.

Außerdem kann während des Downloads die Qualität der Videodatei nicht geändert werden. Die folgenden Formate hingegen sind dazu in der Lage.

HLS

Übersicht bei Streamingmedia.com

HTTP Live Streaming (HLS) kommt von Apple, basiert auf adaptivem Streaming und generiert in der Regel einzelne Stücke von 10 Sekunden Länge. Das Format unterstützt sowohl Live-Video als auch Video-on-Demand.

<iframe width="560" height="315" 
			src="https://www.youtube.com/embed/wVsntdILdxU" 
			frameborder="0" allowfullscreen>
</iframe> 

Smooth Streaming

Überblick bei RBGnetworks.com

Dieses Format wurde im Oktober 2008 als Teil von Silverlight veröffentlicht und ist ein Feature der Internet-Information-Service-(IIS)-Media-Services, einer integrierten HTTP-basierten Plattform zur Auslieferung multimedialer Inhalte.

Smooth Streaming besitzt alle typischen Eigenschaften des adaptiven Streamings. Ausgeliefert wird in kleine Teile zerlegt über HTTP. Meist werden verschiedene Bitraten codiert. Auf diese Weise kann der Player abhängig von der Netzwerkverbindung die beste Bitrate auswählen, um eine optimale Betrachtung zu gewährleisten.

<iframe width="560" height="315" 
			src="https://www.youtube.com/embed/orKUmNoO0z8" 
			frameborder="0" allowfullscreen>
</iframe> 

Niedrige web-basierte Infrastrukturkosten, Kompatibilität zu Firewalls und die dynamische Umschaltung der Bitraten sind nur einige der Vorteile dieses adaptiven Streamings.

MPEG Dash

Überblick bei Streamingmedia.com

Der große Unterschied von DASH ist, dass es ein internationaler Standard, überwacht durch ein Standardisierungskomitee – der Motion Picture Experts Group (MPEG) – , ist. Das steht in deutlichem Gegensatz zu Smooth Streaming (reguliert von Microsoft) oder HLS (reguliert von Apple). Mehrere Unternehmen haben mitgeholfen, die Schaffung und Standardisierung von MPEG DASH durchzusetzen, darunter Microsoft, Apple, Netflix, Qualcomm, Ericsson, Samsung und viele andere.

Wir denken, dass MPEG-DASH alle Features, die wir in den vergangenen Jahren mit Smooth Streaming eingeführt und umgesetzt haben, ersetzen wird.  Nach und nach werden wir DASH-Features genau so unterstützen wie Smooth Streaming und sogar noch coolere Features vorstellen, die nur mit einem Industriestandard wie DASH umsetzbar sind.

HTML5 Video Support

Den Video Tag (<video>) gibt es in HTML5 seit einigen Jahren und alle modernen Browser unterstützen ihn. Die W3C Schools-Seite zeigt deutlich die Verbreitung der Nutzung.

HTML5 video support chart

Und so leicht ist es, ihn zu einer Seite hinzuzufügen:

Genauer gesagt, nutzen ihn sehr viele User jeden Tag: Netflix setzte früher Silverlight als Video Player ein, verwendet aber inzwischen HTML5-Video. YouTube lief vormals auf der Basis von Flash, aber nun wird der Content in HTML5 umgewandelt. Und die Video Player in der Xbox One (YouTube, Xbox Video, Netflix usw.)? Genau, auch sie funktionieren alle mit HTML5.

Es ist sogar inzwischen viel einfacher geworden, HTML5-Video in verschiedenen Browsern zu testen. Das betrifft vor allem unterschiedliche Versionen des Internet Explorer und den neuen Microsoft Edge. Dafür muss man sich nur kostenlose virtuelle Maschinen besorgen oder Remote Testings auf Mac-, iOS-, Android- oder Windows-Geräten durchführen.

netflix video

Noch ein Wort zu Playern

Die Auswahl ist sehr groß. In diesem Tutorial nutze ich den Azure Media Services Player, weil er gerade am Anfang sehr gut geeignet ist, um ein Gefühl dafür zu bekommen wie Media-Streaming funktioniert. Er enthält eine Reihe von Beispielvideos und ein einfaches Aktionsmenü, mit dem man die unterschiedlichen Formate auswählen, sowie die jeweiligen Technologien und Schutzniveaus dahinter verstehen kann.

Der Player unterstützt von Haus aus viele Formate, einschließlich:

  • Smooth Streaming
  • MPEG Dash
  • HLS
  • Progressive MP4

Azure Media Services Player

Das Beste daran: Man muss sich keinen eigenen Player oder eine Webseite bauen, mit denen man die Videoinhalte testen kann. Man ändert einfach die URL des jeweiligen Contents – und los geht´s.

Eine andere Möglichkeit ist das Open Source-Framework video.js . Es ähnelt dem Microsoft Player (siehe unten), bietet aber auch eine ganze Reihe von Style-Optionen an. Dazu gehört z.B. ein hervorragender Skin-Designer. Wer mit fortgeschrittenem CSS nicht so vertraut ist, sollte allerdings die Finger davon lassen.

Einen eigenen Video-Player bauen

Es gibt einige Player-Frameworks, die wir nutzen könnten. Aber um die Sache einfach zu halten, nehmen wir hier den HTML5-Player von Microsoft. Hier ist eine Dokumentation dazu. Außerdem gibt es ein lauffähiges Beispiel.

Das sind einige Vorteile des Players:

Das HTML5-Player-Framework sorgt für ein durchgängiges Videoerlebnis im Browser. Möglich wird das durch die Unterstützung für verschiedene beim Client verfügbare Video-Player-Formate (z.B. HTML5-Video, Silverlight usw.) und der Bereitstellung der gleichen JavaScript-API und der gleichen Steuerungen, unabhängig von der benutzten Technologie. Es arbeitet sich zudem so lange durch eine Liste von Fallback-Video-Player-Technologien, bis eine unterstützte Technologie gefunden ist.

Mehr Informationen dazu findest du in meinem nächsten Artikel.

So geht es weiter: Browser Embed. App Wrap.

In meinem nächsten Artikel (hier in englischer Sprache) erkläre ich, wie man einen eigenen Player innerhalb des Browsers erstellt. Besser noch, wir können diese HTML5-Seite und den Player “zusammenpacken” und mit einem Tool wie Cordova auch Hybrid-Anwendungen für mobile Geräte und Windows erstellen.

Danach werden wir einen Azure Account einrichten und unseren ersten Media-Services-Content erzeugen, den wir auf unserem neu gebauten Player abspielen lassen können. Wer jetzt schon loslegen will, kann sich gleich für einen kostenlosen Test von Azure und bei der Visual Studio Community (kostenlose IDE) anmelden oder mich kontaktieren, um Informationen darüber zu erhalten, wie man einen BizSpark Account mit monatlichem Azure-Guthaben eröffnet.

Mehr über Azure Media Services erfahren

Hier sind einige hervorragende Quellen, um weitergehende Informationen zu Azure zu erhalten:

Außerdem haben wir da noch die Schulungsreihe unseres Teams zu den Themen HTML, CSS und JS:

Dieser Artikel ist Teil der Web-Dev Tech-Series von Microsoft. Wir freuen uns Microsoft Edge (früher Project Spartan genannt) und seine neue Rendering Engine mit euch zu teilen. Kostenlose Virtual Machines oder Remote Testings für Mac, iOS, Android oder Windows gibt es hier: @ dev.modern.IE.

(dpe)