Streaming von Medien aus HTML-Seiten anhand von Beispielen

Wie können Streaming-Media-Player, die in HTML-Seiten laufen und von HTML-Servern bereitgestellt werden, Streaming-Verbindungen (RTSP usw.) mit Streaming-Media-Servern herstellen (die RTSP-Anfragen bedienen)?

Häufige Anwendungen

RTSP scheint derzeit bei Anwendungen / Geräteschnittstellen, die direkt Live-Stream (z. B. IP-Kamera) oder Re-Stream (wie eine Engine) verwenden, mehr zu verwenden, als zum Streamen gespeicherter Mediendateien von einem physischen Standort über eine HTTP-Web-Wiedergabeschnittstelle mit einem eingebetteter Spieler.

Es scheint, dass RTSP ein stateful- Protokoll ist und UDP für das Streaming mehr als TCP verwendet. Es wird eher als Servergerät (wie eine IP-Kamera) verwendet, das an ein TCP / IP-Netzwerk angeschlossen ist und Streams über UDP usw. ausgibt Sie stellen dann als Client im selben Netzwerk eine Verbindung zu diesen Feeds (dem Server) her, und Sie können RTSP-Anforderungen ausgeben, um sie entsprechend zu verwenden.

^{Protokollrichtlinien}

^{RTSP ist zwar in gewisser Weise dem HTTP ähnlich, definiert jedoch Steuersequenzen, die zur Steuerung der Multimedia-Wiedergabe nützlich sind. Während HTTP zustandslos ist, hat RTSP den Status. Eine Kennung wird verwendet, wenn gleichzeitige Sitzungen verfolgt werden sollen. Wie HTTP verwendet RTSP TCP, um eine Ende-zu-Ende-Verbindung aufrechtzuerhalten. Während die meisten RTSP-Steuerungsnachrichten vom Client an den Server gesendet werden, werden einige Befehle in die andere Richtung (dh von Server zu Client) weitergeleitet.}

^{Hier werden die grundlegenden RTSP-Anforderungen dargestellt. Einige typische HTTP-Anforderungen, wie die Anfrage OPTIONS, sind ebenfalls verfügbar. Die voreingestellte Portnummer für die Transportschicht lautet 554 [3] für TCP und UDP, wobei letzteres selten für die Steuerungsanforderungen verwendet wird.}

^_Quelle

^Staatenlos

^{Für ein zustandsloses Protokoll muss der Server keine Sitzungsinformationen oder den Status jedes Kommunikationspartners für die Dauer mehrerer Anforderungen aufbewahren. Im Gegensatz dazu wird ein Protokoll, das die Aufrechterhaltung des internen Status auf dem Server erfordert, als Stateful- Protokoll bezeichnet.}

^{Ein Nachteil der Zustandslosigkeit besteht darin, dass in jede Anforderung möglicherweise zusätzliche Informationen aufgenommen werden müssen. Diese zusätzlichen Informationen müssen vom Server interpretiert werden.}

^_Quelle

Logischer Fluss

Ich verstehe den Fluss von Streaming-Medien in dieser Form so:

• Der Server, auf dem sich der Medieninhalt befindet, kapselt, komprimiert, kodiert usw. den Video- / Audiodateninhalt in den richtigen Formaten und Segmenten für die Stream-Bereitstellung
• Der Webserver, der auf Verbindungen wartet, um auf die Streaming-Medien zuzugreifen, stellt alle Ressourcen bereit, die zum Streaming der Medien erforderlich sind
• Der Client fordert die entsprechenden Ressourcen und Dateien an und lädt sie herunter, um sie über den konfigurierten URL-Zeiger und andere Parameter fortlaufend wiederzugeben. Die Wiedergabesoftware auf Client-Ebene stellt die Pakete nacheinander zusammen, um eine ordnungsgemäße Wiedergabe des Inhalts zu ermöglichen.

Einen allgemeinen Vergleich von HTTP und RTSP finden Sie im Abschnitt Streaming Technologies unten.

Außerdem

In den folgenden 10 Gründen, warum Sie niemals Ihre eigenen Videos hosten sollten, habe ich die Teile zitiert, die dazu führen, dass Sie Ihre Frage "allgemein" beantworten können, ohne zu spezifisch zu sein.

Im Wesentlichen heißt es, dass die Website mit den eingebetteten Media Player-Steuerelementen

• ⁽¹⁾ Erkennen der Client-Webbrowsereinstellungen bei "Verbindung und Anforderung" vom Client und
• ⁽²⁾ Dadurch werden der Codec und alle anderen clientseitigen Erkennungseinstellungen auf die entsprechenden Parameterwerte gesetzt und anschließend
• ⁽³⁾ Das Streaming des Videos erfolgt direkt vom Streaming-Server, auf dem Sie die Video- und Audiodateien hosten, basierend auf weiterem Code in Ihren Embedded-Media-Player-Konfigurationen, der auf die URL der Mediendatei auf dem gehosteten Server verweist.

^{Streaming-Technologien}

^{Der Client-Browser muss die Daten vom Server erhalten und zur Verarbeitung an die Streaming-Anwendung übergeben. Die Streaming-Anwendung konvertiert die Daten in Bilder und Sounds. Ein wichtiger Faktor für den Erfolg dieses Prozesses ist die Fähigkeit des Clients, Daten schneller zu empfangen, als die Anwendung die Informationen anzeigen kann. Überschüssige Daten werden in einem Puffer gespeichert - einem Speicherbereich, der für die Datenspeicherung in der Anwendung reserviert ist. Wenn die Daten bei der Übertragung zwischen den beiden Systemen verzögert werden, ist der Puffer leer und die Präsentation des Materials ist nicht reibungslos.}

^{HTTP-Protokoll}

^{Das HTTP ist die vorherrschende Art und Weise, in der Dokumente im Internet verlinkt werden. Der Client stellt eine Verbindung zum Server her, der die zu streamen Datei enthält, die Datei wird abgerufen und die Verbindung wird geschlossen. Der HTTP-Server teilt dem Browser den Typ der zu übertragenden Datei mit.}

^{Vorteile mit HTTP}

^{Beim Streaming einer Datei über HTTP ist kein spezieller Streaming-Server erforderlich. Solange Ihr Browser MIME-Typen versteht, kann er eine Streaming-Datei von einem HTTP-Server empfangen. Das Streamen von Dateien mithilfe von HTTP hat den besonderen Vorteil, dass es Firewalls passieren und Proxyserver verwenden kann.}

^{Einige Nachteile}

^{HTTP-Streaming verwendet TCP / IP (Transmission Control Protocol und Internet Protocol), um eine zuverlässige Übermittlung der Dateien zu gewährleisten. Dieser Prozess prüft auf fehlende Pakete und fordert, dass diese erneut übertragen werden. Dies wird im Streaming-Szenario problematisch, wenn Sie möchten, dass die Daten ignoriert werden, wenn sie bei der Lieferung verloren gehen. Dynamische Dateien werden also weiterhin abgespielt. HTTP kann die Modemgeschwindigkeit nicht erkennen, daher müssen Serveradministratoren Dateien mit unterschiedlichen Komprimierungsraten für Serverbenutzer mit unterschiedlichen Verbindungstypen gezielt erzeugen. Das Streaming von Dateien von HTTP-Servern wird für Situationen mit hohem Bedarf nicht empfohlen.}

^{RTSP-Protokoll}

^{RTSP ist das Standardprotokoll, das von den meisten Streaming-Server-Anbietern verwendet wird. RTSP-Server verwenden das UDP (User Datagram Protocol) zum Übertragen von Mediendateien. UDP prüft nicht ständig, ob Dateien am Ziel angekommen sind. Dies ist ein Vorteil für Streaming-Anwendungen, da die Dateiübertragung unterbrochen werden kann, solange die Verzögerung nicht zu lang ist. Das Ergebnis dieser Methode ist, dass gelegentlich Daten verloren gehen, aber die Dateien werden weiter abgespielt, wenn die Verzögerung gering ist.}

^Quelle

^{10 Gründe, warum Sie niemals eigene Videos hosten sollten}

^{Wir sprechen über das Einbetten von Videos in Eigenregie}

^{Zuerst laden Sie Ihre Videodatei zu einem Video-Hosting-Dienst eines Drittanbieters wie YouTube, Vimeo oder Wistia hoch.}

^{Dann kopieren Sie ein wenig Code, den sie Ihnen liefern, und fügen ihn in Ihren Beitrag oder Ihre Seite auf Ihrer eigenen WordPress-Site ein. Das Video wird auf Ihrer Website an dem Ort angezeigt, an dem Sie den Einbettungscode eingefügt haben. Das Video selbst wird jedoch von den Servern des Video-Hosts gestreamt, nicht von Ihrem eigenen Webserver, auf dem Ihre WordPress-Site gehostet wird.}

^{4. Kein Standard für ein einzelnes Dateiformat für Webvideo}

^{Die aktuelle HTML5-Entwurfsspezifikation legt nicht fest, welche Videoformate Browser unterstützen sollen. Infolgedessen sind die wichtigsten Webbrowser unterschiedlich und unterstützen jeweils ein anderes Format. Internet Explorer und Safari geben H.264 (MP4) -Videos wieder, nicht jedoch WebM oder Ogg. Firefox spielt Ogg- oder WebM-Videos ab, H.264 jedoch nicht. Glücklicherweise spielt Chrome alle wichtigen Videoformate ab. Wenn Sie jedoch sicherstellen möchten, dass Ihr Video in allen gängigen Webbrowsern wiedergegeben wird, müssen Sie Ihr Video in mehrere Formate konvertieren: .mp4, .ogv und .webm}

^{5. Ich hoffe, Sie möchten Videos konvertieren. Viel.}

^{Die meisten Ihrer Zuschauer werden Ihre Videos wahrscheinlich von ihrem Desktop oder Laptop aus betrachten und dabei von einer Hochgeschwindigkeits-Internetverbindung profitieren. Für diese Leute möchten Sie eine große Datei in HD-Qualität bereitstellen, damit sie diese bei Bedarf im Vollbildmodus betrachten kann. Im Allgemeinen bedeutet dies eine 1080p- oder 720p-Datei mit einer hohen Streaming-Bitrate (5000 - 8000 kbps).}

^{Sie sollten jedoch auch eine kleinere Version mit niedrigerer Auflösung für die Bereitstellung an mobile Geräte wie Telefone und Tablets sowie für die Bereitstellung an Zuschauer mit langsameren Internetverbindungen kodieren.}

^{6. Videoplayer}

^{Ein Videoplayer ist eine kleine Web-Software, die Sie auf Ihrer Website installieren. Sie erkennt automatisch, welches Gerät Ihr Video zusammen mit der Verbindungsgeschwindigkeit anfordert, und liefert dann die entsprechende Version an diese Person.}

^{7. Umständlicher Code [oder Shortcodes]}

^{Unabhängig davon, ob Sie ein Plugin eines Drittanbieters oder die integrierten Videofunktionen von WordPress verwenden, müssen Sie ein wenig Code erstellen, um dem Videoplayer mitzuteilen, welche Formate Sie erstellt haben, sowie den Standort auf dem Server. Es sieht so aus ...}

<video poster="movie.jpg" controls> <source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'/> <source src="movie.ogg" type='video/ogg; codecs="theora, vorbis"'/> <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'/> <p>This is fallback content</p> </video> 

Was ist also die beste Lösung, um Videos zu Ihrer Website hinzuzufügen?

Verwenden Sie einfach einen Video-Hosting-Dienst eines Drittanbieters, und binden Sie Ihr Video einfach in Ihren WordPress-Beitrag oder auf Ihre Seite ein.

Schritt 1: Laden Sie Ihr Video auf einen der bekannten und gut etablierten Video-Hosting-Dienste wie Vimeo PRO hoch.

Schritt 2: Sobald Ihr Video hochgeladen wurde und zur Anzeige bereit ist, kopieren Sie die URL in Ihr Video. Kehren Sie zu Ihrer WordPress-Site zurück und fügen Sie die URL in Ihren Post oder auf der Seite ein, an der das Video erscheinen soll.

---

^{Wenn die Benutzer Ihre Seite anzeigen, wird das Video an der Stelle angezeigt, an der Sie die URL eingefügt haben. Die Videodatei selbst wird jedoch von den Servern des Videohosts übertragen, nicht von Ihrem eigenen Server, auf dem Ihre WordPress-Site gehostet wird.}

_{Der eingebettete Videoplayer erkennt das Gerät, den Browser und die Internetverbindungsgeschwindigkeit des Benutzers automatisch und stellt ihnen die entsprechende Version der Videodatei zur Verfügung. Nichts auf Ihrer Website zu installieren. Keine Plugins, um auf dem Laufenden zu bleiben. Kein kniffliger Code.}

_Quelle

Im Folgenden werde ich hauptsächlich auf Ihre Frage eingehen, was passiert, wenn ein Video im Browser angezeigt wird. Das Thema ist riesig, deshalb werde ich nur die relevanten Punkte ansprechen.

HTML5 hat den <VIDEO>Tag eingeführt, der das Problem der Integration des angezeigten Videos in den Browser mit JavaScript und CSS löste. Das vorherige <OBJECT>Tag benötigte externe Software und war schlecht in die Seite integriert. Der neue Tag setzte voraus, dass der Browser auch ein Video-Player wurde, obwohl keine Standards festgelegt wurden. Das Ergebnis war eine vollständige Fragmentierung der Standards, für die die einzige Lösung darin besteht, dass der Videoserver verschiedene Videoformate zur Verfügung stellt und alle alternativen Quellen im <VIDEO>Tag angegeben werden, aus dem der Browser das von ihm unterstützte auswählen wird.

Ein Beispiel für ein Tag mit mehreren Quellen:

<video width=320 height=240 controls poster=image.jpg> <source src="movie.mpd"> <source src="movie.webm"> Your browser does not support the video tag. </video> 

Das <VIDEO>Tag selbst ist protokollunabhängig. Daher kann jedes vom Browser unterstützte Protokoll verwendet werden, einschließlich RTSP. Die Unterstützung des MPEG-DASH-Protokolls (Dynamic Adaptive Streaming über HTTP) ist in letzter Zeit sehr umfangreich geworden und kann daher auf den meisten Geräten und Browsern nativ oder mit HTML5 abgespielt werden, sodass keine zusätzlichen Plugins erforderlich sind. Siehe diese Geräte- und Browserkompatibilitätstabelle . In diesem Mozilla-Artikel finden Sie auch Informationen zur Vorbereitung Ihres Servers für die Bereitstellung von MPEG-DASH. DASH funktioniert über HTTP. Dies funktioniert so lange, wie Ihr HTTP-Server Bytebereichsanforderungen unterstützt und für die Bereitstellung von .mpd-Dateien eingerichtet ist mimetype="application/dash+xml".

Die normale Interaktion zwischen Client und Server sieht in etwa wie folgt aus. Bei HTML5-VIDEO ist der Browser auch der Player, obwohl möglicherweise eine neue Verbindung zum Spielen geöffnet wird.

Die erste Verbindung stellt die Metadaten bereit, die der Client zum Anzeigen des Videos verwendet. Wenn das RTSP-Protokoll zum Abrufen dieser Metadaten verwendet wurde, wird später eine RTP-Verbindung zum Übertragen der Video- + Audiodaten erstellt. Das RTCP-Protokoll wird verwendet, um zusätzliche Befehle an den Server zu übertragen.

RTP, RTCP und RTSP arbeiten alle an unterschiedlichen Ports. Wenn sich RTP auf Port N befindet, ist RTCP normalerweise auf Port N + 1. Eine RTP-Sitzung kann mehrere Streams enthalten, die auf der Empfängerseite kombiniert werden sollen. Audio und Video können sich beispielsweise auf separaten Kanälen befinden.

Damit niemand von Ihren Inhalten gesperrt wird, sollten Sie sowohl lizenzfreie Codecs als auch webM oder Theora und H.264-Video sowie Vorbis und MP3-Audio zur Verfügung stellen. (Leicht gesagt, schwer zu tun.)

Dies passiert im Detail für RTSP:

1. Der Client stellt eine TCP-Verbindung zu den Servern her, normalerweise über TCP-Port 554, den bekannten Port für RTSP.

2. Der Client gibt dann eine Reihe von RTSP-Headerbefehlen aus, die ein ähnliches Format wie HTTP haben und von dem Server jeweils bestätigt werden. In diesen RTSP-Befehlen beschreibt der Client Details zu den Sitzungsanforderungen des Servers, z. B. die unterstützte Version von RTSP, den für den Datenfluss zu verwendenden Transport und alle zugehörigen UDP- oder TCP-Portinformationen. Diese Informationen werden mithilfe der Header DESCRIBE und SETUP übergeben und in der Serverantwort um eine Sitzungs-ID erweitert, die der Client und alle vorübergehenden Proxy-Geräte verwenden können, um den Stream bei weiteren Austauschen zu identifizieren.

3. Sobald die Verhandlung der Transportparameter abgeschlossen ist, gibt der Client einen PLAY-Befehl aus, um den Server anzuweisen, mit der Auslieferung des RTP-Datenstroms zu beginnen.

4. Wenn sich der Client dazu entschieden hat, den Stream zu schließen, wird ein TEARDOWN-Befehl zusammen mit der Sitzungs-ID ausgegeben, die den Server anweist, die RTP-Zustellung zu beenden, die dieser ID zugeordnet ist.

Lesen Sie weiter:

• Grundlagen der Streaming-Protokolle
• Grundlegendes zu Protokollen der Anwendungsschicht - Real Time Streaming Protocol (RTSP)
• Einführung in HTML5-Video (Opera)
• HTML5 Audio und Video: Was Sie wissen müssen
• RTSP-Analyse Wireshark

Hier ist eine schnelle und schmutzige Antwort

Es gibt einen Unterschied zwischen der Wiedergabe von Videos im Web und dem tatsächlichen Streaming in Echtzeit.

Die Wiedergabe erfolgt über einen Player, der auf der Webseite enthalten ist (möglicherweise mit Flash, JS oder einem HTML5-Videoobjekt). Der Client (Browser) lädt diesen Player herunter und führt ihn aus. Der Player wiederum holt das Video von einer einfachen Download-URL. Selbst bei Youtube gibt es Programme, mit denen Sie direkt auf die gehosteten Videodateien zugreifen und sie wie jede andere Datei herunterladen können. Da das System einen normalen alten Download-Link verwendet, sind keine komplexen Streaming-Protokolle wie RTSP erforderlich

Echtzeit-Streaming (z. B. von einer Webcam) ist ... naja, schwieriger. Flash hat diese Funktion eingebaut, sollte aber nicht mehr verwendet werden. HTML5-Video unterstützt kein Echtzeit-Streaming, aber die Leute konnten es "überlisten", indem sie den Hosting-Server dazu bringen, die von ihm angebotenen Videodateien ständig zu ändern.