Verwendung von Video.js zur Implementierung der H5-Live-Broadcast-Schnittstelle

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zur Verwendung von Video.js zur Implementierung der H5-Live-Broadcast-Schnittstelle und zur Verwendung von Video.js zur Implementierung der H5-Live-Broadcast-Schnittstelle vorstellen ist ein praktischer Fall. Stehen Sie auf und werfen Sie einen Blick darauf.

Kürzlich habe ich eine einfache H5-Version der Live-Übertragungsseite erstellt. Ich werde die Live-Übertragungsfunktion später hinzufügen Über die Live-Übertragung möchte ich noch etwas wissen:

Zusammensetzung

Wie in der Abbildung gezeigt, verwendet der Hintergrund das Video Tag zum Abspielen der Live-Übertragung, Webscoket kann verwendet werden, um es in Echtzeit zu erhalten, Geschenke oder Animation werden mit CSS3 implementiert.

2. Prozess

Das mobile Endgerät verwendet das native System und der PC verwendet Obs-Software, um das Video bei der Datenverarbeitung und Kodierung zu sammeln und über rtmp Übertragen Sie den Stream an den Streaming-Medienserver. Der Streaming-Medienserver generiert Wiedergabevideostreams in verschiedenen Formaten, z. B. rtmp, hls, und ruft dann den Stream, die Audio- und Videodekodierung und die Wiedergabe ab.

3. Streaming

RTMP

: Es handelt sich um ein von Macromedia entwickeltes Echtzeit-Nachrichtenübertragungsprotokoll gehört zu Adobe. Es wird hauptsächlich zur Audio-, Video- und Datenkonzentrizität zwischen Flash/Air-Plattform und Streaming Media/Interaktionsserver verwendet, die das RTMP-Protokoll unterstützen.

Vorteile: Das Protokoll ist einfach, leicht auf verschiedenen Plattformen zu implementieren und verfügt über eine gute CDN-Unterstützung.

4. Pull-Flow

Durch das Verständnis wird es in 3 Typen unterteilt.

RTMP: Im Wesentlichen eine lange TCP-Verbindung, Daten werden zu jedem Zeitpunkt unmittelbar nach dem Empfang mit geringer Latenz weitergeleitet.
-HTTP-FLV: Im Wesentlichen ein HTTP-Long-Link, die Daten werden zu jedem Zeitpunkt unmittelbar nach dem Empfang mit geringer Latenz weitergeleitet.
-HLS: HTTP-Kurzlink, gute plattformübergreifende Funktion, etwas höhere Latenz. Es enthält hauptsächlich zwei Inhalte: die .m3u8-Datei und die .ts-Datei. Durch Anfordern der URL von m3u8 analysiert das Video-Tag die Datei und findet die entsprechende TS-Datei zum Abspielen.

5. Aufgetretene Probleme

Hauptsächlich bei der Verwendung von video.js

QQx5-Kernel:
In Android WeChat, qq-Browser, weil es ein Beim Abspielen eines Videos wird im x5-Kernel eine Systemwiedergabeebene angezeigt. Allerdings liegt ein Fehler im QQ-Browser vor und es gibt eine schwarze Ebene auf der obersten Ebene. Die Lösung besteht darin, das Video-Tag auszublenden.

Wenn die Daten während der Live-Übertragung empfangen werden, liegen sie im RTMP-Protokoll vor und können nicht direkt gesendet werden. Sie werden in das .m3u8-Format konvertiert

<source src="http://xxxxxx.m3u8" type=&#39;&#39;application/x-mpegURL" />

Bei der Aufnahme abgespielt, die Daten werden im MP4-Format empfangen und können direkt gesendet werden. Ich glaube, Sie haben die Methode nach dem Lesen dieser Fälle gemeistert Verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

<source src="http://xxxxxx.mp4" type=&#39;&#39;video/mp4" />

So verwenden Sie das Meta-Viewport-Attribut von HTML

So verwenden Sie die Base64-Codierung für HTML-Bilder

So verwenden Sie die horizontale HR-Linie in HTML

So erzielen Sie gemischte Grafiken und Text in HTML

Das obige ist der detaillierte Inhalt vonVerwendung von Video.js zur Implementierung der H5-Live-Broadcast-Schnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!