Warum benötige ich Dash.js zum Streamen von MPEG-DASH-Videos?

Question

Ich bin neu mit HTML 5 Adaptive Streaming und Informationen gibt es ziemlich widersprüchlich. Ich möchte eine Testumgebung auf meiner Windows Server Cloud erstellen, die eine 2hours h264 Datei streamt und auf meinem lokalen Computer mit einem html5 player spielt.

Frage: Warum benötige ich Dash.js, um das Mpeg Dash Video abzuspielen? Ist Dash.js etwas, das ich auf dem Server installieren muss (klingt offensichtlich) oder Client (klingt komisch)?

Answer 1

DASH-Videos bestehen wie jedes andere Video aus zwei Teilen: Ein Serve dient den Videos und ein Spieler konsumiert sie und präsentiert sie dem Benutzer. Ich werde erklären, was auf beiden Seiten benötigt wird.

Serving DASH Videos

Stücke von DASH-Videos können über HTTP oder HTTPS von jedem modernen Web-Server geliefert werden - Apache, ngnix, IIS und andere. Auf der Serverseite wird kein Plugin oder zusätzliche Software benötigt, um DASH-Videos zu liefern - es sind nur Dateien und jeder Webserver weiß, wie Dateien zu bedienen sind. Möglicherweise müssen Sie jedoch eine Konfiguration vornehmen.

Die meisten Webserver haben eine Liste der MIME-Typen der Dateien, die sie bedienen dürfen. Normalerweise müssen Sie dieser Liste DASH-Videos hinzufügen, da die Standardeinstellungen aus Sicherheitsgründen restriktiv sind und DASH nicht zulassen Videos werden gestreamt. Hier

ist ein Beispiel web.config für IIS, die DASH-Videos ermöglicht bedient werden:

<?xml version="1.0" encoding="UTF-8"?> 
<configuration> 
    <system.webServer> 
     <staticContent> 
      <remove fileExtension=".m4s" /> 
      <mimeMap fileExtension=".m4s" mimeType="video/mp4" /> 

      <remove fileExtension=".mpd" /> 
      <mimeMap fileExtension=".mpd" mimeType="application/dash+xml" /> 

      <remove fileExtension=".m4f" /> 
      <mimeMap fileExtension=".m4f" mimeType="video/mp4" /> 

      <remove fileExtension=".m4a" /> 
      <mimeMap fileExtension=".m4a" mimeType="video/mp4" /> 
     </staticContent> 
    </system.webServer> 
</configuration> 

Die verschiedenen video/mp4 Elemente gibt es da verschiedene DASH-Geber ihre Dateien anders nennen.

Einige DASH-Player, insbesondere webbasierte, erfordern möglicherweise auch die Unterstützung des Servers cross-origin resource sharing (CORS). Dies ist ein Sicherheitsmechanismus, der dazu beiträgt, dass bösartige Websites nicht funktionieren, indem Sie auswählen, auf welchen Websites Ihr Inhalt angezeigt werden kann. Die genauen CORS-Header, die Ihr Server bereitstellen muss, hängen auch vom Player ab - in einigen Situationen werden zusätzliche Header verwendet und müssen explizit aktiviert werden. Ich werde die Einzelheiten von CORS aus dem Rahmen dieser Antwort herauslassen. Hier ist ein einfaches Beispiel IIS-Konfiguration, die jede Website, die servierten Videos zu konsumieren erlaubt:

<?xml version="1.0" encoding="UTF-8"?> 
<configuration> 
    <system.webServer> 
     <httpProtocol> 
      <customHeaders> 
       <add name="Access-Control-Allow-Origin" value="*" /> 
      </customHeaders> 
     </httpProtocol> 
    </system.webServer> 
</configuration> 

Spiele DASH Videos

Sie einen Spieler benötigen, offensichtlich. Es gibt verschiedene Arten von Spielern: eigenständige Desktop-Apps (z. B. VLC), Player-SDKs für Android/iOS-Apps (z. B. ExoPlayer und Microsoft PlayReady Client SDK) und Player für Websites (z. B. dash.js und Bitdash). Unter Windows 10 enthält der Internet Explorer sogar einen integrierten Player für DASH-Videos.

Hier kommt dash.js rein - es ist ein Spieler. Sie legen es in Ihre Website, wenn Sie möchten, dass Ihre Website Videos abspielen kann. Es sind auch verschiedene Spieler verfügbar.

Je nachdem, wie Sie dem Endnutzer Inhalte anbieten möchten, wählen Sie einen Player aus und binden ihn, falls kein eigenständiger Player ist, in Ihre App oder Website ein. Sie stellen dem Spieler die URL zur Verfügung und es wird seine Sache machen. Einfach.

Website-basierte Player erfordern, dass der Server CORS unterstützt, aber Standalone- oder App-gehostete Player benötigen sie nicht.

Answer 2

Warum brauchen Sie dash.js für das Streaming von MPEG-DASH Videos

Sie müssen es, weil Web-Browser nativ nicht DASH unterstützen, da sie nicht so zu tun, sind erforderlich. Webbrowser sind, jedoch erforderlich, um Media Source Extensions (MSE) zu unterstützen. Für (neuere) Browserversionen, die MSE implementieren, können ihre "grundlegenden" unterstützten Medienquellen wie MP4 durch DASH einfach durch Einbeziehung von Javascript-Bibliotheken wie dash.js ergänzt werden. Dies ist viel flexibler (und zukunftssicherer) als die ältere Routine, dass Benutzer Plug-ins wie Flash Player zum Abspielen von nicht-grundlegenden Medientypen benötigen.

clientseitige Einrichtung

Sie auch gefragt, ob dash.js etwas ist, das serverseitige oder clientseitige installiert werden muss. Sander hat über alle serverseitigen Einstellungen geschrieben, die für die Bereitstellung der Dateien erforderlich sein können. Daher werde ich eine Erläuterung zur Implementierung auf der Clientseite hinzufügen.

Vom dash.jsGitHub page:

<script src="http://cdn.dashjs.org/latest/dash.all.min.js"></script> 
... 
<style> 
    video { 
     width: 640px; 
     height: 360px; 
    } 
</style> 
... 
<body> 
    <div> 
     <video data-dashjs-player autoplay src="http://dash.edgesuite.net/envivio/EnvivioDash3/manifest.mpd" controls></video> 
    </div> 
</body> 

Beachten Sie, dass, wenn Sie zu löschen Key-Verschlüsselung tun möchten, werden Sie die Videodatei dienen müssen Bot und dash.all.min.js von einem sicheren Kontext (zB TLS.). Und wenn Sie das Format xhtml anstelle von html verwenden möchten, müssen Sie nach jeder booleschen Eigenschaft des Elements hinzufügen.