Share
Wollten Sie schon immer Ihre eigene Twitch.tv-ähnliche App zum Live-Streaming Ihrer Arbeit erstellen? Wie wäre es mit Ihrem eigenen YouTube-ähnlichen Programm, um Ihr zuvor aufgenommenes Video abzuspielen? Sie haben in der Vergangenheit möglicherweise Flash, Java oder Silverlight für Rich Media verwendet. Da Chrome 42 jedoch ankündigt, dass diese Plug-Ins nicht mehr unterstützt werden, ist es jetzt eine gute Gelegenheit, HTML5 wie immer zu nutzen.
Bevor ich bei Microsoft arbeitete, war ich als Senior Engineer im Produktentwicklungsteam von Comcast tätig, wo ich für verschiedene Plattformen, einschließlich Web, Xbox One, Xbox 360 und SmartGlass, Videoplayer arbeitete. Es war eine hervorragende Ausbildung in modernster Videotechnologie, und ich bin froh, dass ich meine Erfahrung in dieser Rolle mitnehmen und anderen viel von dem beibringen kann, was ich dort gelernt habe.
Dies ist der erste Artikel aus einer Reihe von Artikeln zur Verwendung von Azure Media Services zum Erstellen und Verwenden von HTML5-Videos. In diesem Lernprogramm erkläre ich, wie Sie diese Cloud-Media-Lösung verwenden, um sich mit dem Bereitstellen von Live- oder On-Demand-Videos vertraut zu machen.
Es gibt eine Reihe von Formaten, aus denen Sie auswählen können. Lassen Sie uns einige der Formate betrachten, die Sie heute verwenden können. In erster Linie sollten wir verstehen, wie adaptives Dämpfen funktioniert, wenn man bedenkt, dass viele dieser Technologien, die vor uns liegen, davon abhängig sind.
Das adaptive Streaming teilt das Video in kleine Stücke. Der "adaptive" Teil davon ist die Tatsache, dass Videos mit mehreren Bitraten und Auflösungen codiert werden, wodurch Blöcke mit mehreren Größen entstehen. Von dort kann der Player zwischen verschiedenen Bitraten / Auflösungen wählen und sich bei sich ändernden Netzwerkbedingungen automatisch an größere oder kleinere Chunks anpassen.
Scott Hanselman beschreibt es gut (zumindest Smooth Streaming).
„Man muss es sehen, um es zu bekommen, aber es ist klug in seiner Einfachheit. Manche Leute flippen aus, wenn sie eine 200-Megabyte-Videodatei aufnehmen und diese für das Smooth Streaming kodieren. Das entstehende Verzeichnis beträgt beispielsweise 500 Megabyte. Sie könnten sagen, es ist größer! Ich habe keine solche Bandbreite! Tatsächlich wird weniger über das Kabel gesendet als auf der Festplatte vorhanden ist. Die Idee ist, dass Smooth Streaming "Schritte" von Bitraten erstellt. Es kodiert und speichert Ihre Datei mit mehreren Bitraten auf der Festplatte.
Quelle: Scott HanselmanDadurch werden Videos auf dem Computer des Betrachters heruntergeladen und zwischengespeichert. Es dauert eine kurze Zeit, um den Anfang der Mediendatei zu puffern und zwischenzuspeichern, bevor die Wiedergabe beginnt. Nachdem das Video zwischengespeichert wurde, ist für die nachfolgende Wiedergabe keine Pufferung erforderlich. Mit dem Standard-HTTP-Protokoll werden progressiv heruntergeladene Dateien im Allgemeinen über ein Content Delivery Network (CDN) übermittelt. Ihr Videoplayer stellt also eine direkte HTTP-Verbindung mit den CDN-Servern (Azure) her, um den Inhalt abzurufen.
Der Nachteil bei der Verwendung von so etwas ist die verschwendete Bandbreite. Der Player startet die Videowiedergabe, sobald er über genügend Daten verfügt, der Download wird jedoch fortgesetzt, bis er die gesamte Datei erhalten hat, unabhängig davon, wie viel der Benutzer sieht. Was passiert, wenn der Betrachter nach einer Minute geht? Verschwendete Bandbreite.
Darüber hinaus kann die Qualität des Videos im Gegensatz zum unten aufgeführten Format während des Downloads nicht geändert werden.
Das HTTP-Live-Streaming (HLS) gehört Apple und basiert auf der Idee des adaptiven Streamings, das normalerweise in zehn Sekunden großen Abschnitten ausgeführt wird. Darüber hinaus werden sowohl Live- als auch On-Demand-Videos unterstützt.
Dies wurde im Oktober 2008 im Rahmen von Silverlight angekündigt und ist eine Funktion der IIS-Mediendienste (Internet Information Services, IIS), einer integrierten, HTTP-basierten Plattform für die Medienbereitstellung.
Smooth Streaming weist alle typischen Merkmale des adaptiven Streamings auf. Dies wird über HTTP bereitgestellt, in kleine Abschnitte unterteilt, und in der Regel werden mehrere Bitraten codiert, sodass der Player anhand der Netzwerkbedingungen die beste Video-Bitrate auswählen kann, um eine optimale Anzeige zu ermöglichen.
Niedrige webbasierte Infrastrukturkosten, Firewall-Kompatibilität und Bitratenwechsel sind nur einige der Vorteile des adaptiven Streamings.
Das große Unterscheidungsmerkmal von DASH ist, dass es sich um einen internationalen Standard handelt, der jetzt von einem Standardisierungsgremium, der Motion Picture Experts Group (MPEG), kontrolliert wird, anstatt von Microsoft (Smooth Streaming) oder Apple (HLS) gesteuert zu werden. Mehrere Unternehmen haben an der Erstellung und Standardisierung von MPEG DASH teilgenommen, darunter Microsoft, Apple, Netflix, Qualcomm, Ericsson, Samsung und viele mehr.
Wir betrachten MPEG-DASH als den endgültigen Ersatz für alle Funktionen, die wir in den letzten Jahren mit Smooth Streaming eingeführt und implementiert haben. Im Laufe der Zeit werden wir den DASH-Support herausholen, um die Feature-Parität mit Smooth zu erreichen, und einige noch coolere Features einführen, die uns nur in einem Industriestandard wie DASH zur Verfügung stehen.
Das Video-Tag () ist seit mehreren Jahren in HTML5 und wird von allen modernen Browsern unterstützt. Auf der W3C-Schulseite wird die Verwendung klar dargestellt.
So einfach können Sie es zu Ihrer Seite hinzufügen:
In der Tat verwenden Sie dies wahrscheinlich jeden Tag. Netflix war früher auf Silverlight als Video-Player angewiesen, läuft aber jetzt auf HTML5-Video. YouTube lief früher auf Flash, jetzt wird ein Großteil des Inhalts nach HTML5 konvertiert. Kennen Sie die Video-Player, die Sie auf Xbox One sehen (YouTube, Xbox Video, Netflix usw.)? Ja, das sind auch alle HTML5.
Das Testen von HTML5-Videos in verschiedenen Browsern, insbesondere in verschiedenen Versionen von Internet Explorer und dem neuen Microsoft Edge, wurde erheblich vereinfacht. Um dies zu tun, können Sie kostenlose virtuelle Maschinen erhalten oder auf Ihrem Mac, iOS, Android oder Windows-Gerät aus der Ferne testen.
Es gibt viele zur Auswahl. In diesem Lernprogramm verwende ich Azure Media Services Player, da dies ein guter Anfang ist, um ein Gefühl für die Funktionsweise von Media-Streaming zu erhalten. Es enthält eine Reihe von Beispielvideos und ein einfaches Pulldown-Menü, in dem Sie die verschiedenen Formate auswählen und die technischen und Schutzstufen hinter jedem davon sehen können.
Es bietet Unterstützung für eine Vielzahl von Formaten, einschließlich:
Das Beste ist, dass Sie nicht einmal einen eigenen Player oder eine eigene Seite erstellen müssen, um Ihren Videoinhalt zu testen. Ändern Sie einfach die URL in Ihren Inhalt und los geht's.
Sie können auch das Open-Source-Framework Video.js betrachten. Es ähnelt dem Microsoft-Player (unten), bietet aber auch eine Fülle von Optionen, die das Style-Design erleichtern. Sie haben auch einen ausgezeichneten Skin Designer. Wenn Sie mit fortgeschrittenem CSS jedoch weniger vertraut sind, würde ich mich davor zurückschrecken.
Es gibt mehrere Player-Frameworks, die wir verwenden können, aber der Einfachheit halber verwenden wir den von Microsoft bereitgestellten HTML5-Player. Die Dokumentation finden Sie hier. Es gibt auch eine Arbeitsprobe.
Hier sind einige der Vorteile der Verwendung:
“TDas HTML5-Player-Framework bietet dem Browser ein einheitliches Videoerlebnis. Dies wird erreicht, indem die Unterstützung für verschiedene auf dem Client verfügbare Video-Player-Technologien (z. B. HTML5-Video-Tag, Silverlight usw.) erkannt wird und dann unabhängig von der verwendeten Technologie dieselbe JavaScript-API und dieselben Steuerelemente bereitgestellt werden. Es wird eine Liste von Fallback-Video-Player-Technologien durchlaufen, bis eine unterstützte Technologie gefunden wird.
Ich werde in meinem nächsten Beitrag weitere Informationen dazu hinzufügen.
In meinem nächsten Beitrag behandeln wir den Prozess zum Erstellen eines eigenen Videoplayers im Browser. Besser noch, wir können diese HTML5-Site und -Player "umschließen" und Hybridanwendungen für mobile Geräte und Windows mit einem Tool wie Cordova erstellen.
Anschließend richten wir ein Azure-Konto ein und erstellen unseren ersten Media Services-Inhalt, den wir auf unserem neu erstellten Video-Player abspielen können. Wenn Sie sofort loslegen möchten, können Sie sich für eine kostenlose Azure-Testversion und die Visual Studio Community (jetzt auch eine kostenlose IDE) anmelden. Sie können sich auch mit mir in Verbindung setzen, wie Sie ein BizSpark-Konto mit monatlichem kostenlosen Azure-Guthaben erhalten.
Hier finden Sie einige großartige Ressourcen, um mehr über Medien und Azure zu erfahren und wie Sie sich schnell einrichten können:
Oder die umfassendere Lernreihe unseres Teams zu HTML, CSS und JS:
Dieser Artikel ist Teil der Web-Dev-Tech-Serie von Microsoft. Wir freuen uns zu teilen Microsoft Edge und das Neue EdgeHTML-Rendering-Engine mit dir. Erhalten Sie kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac, iOS, Android oder Windows-Gerät. http://dev.modern.ie/.
Accentsconagua