Using Video.js to implement H5 live broadcast interface

This time I will bring you how to use Video.js to implement the H5 live broadcast interface and use Video.js to implement the H5 live broadcast interface. Get up and take a look. Recently I made a mobile H5 simple version of the live broadcast page. It only has the live broadcast function. I will add barrages and gifts later. The requirement is in WeChat. Although it does not involve recording live broadcasts, I still want to know about it. Regarding the relevant knowledge of live broadcast,

1. Composition

As shown in the figure, the background uses the video tag to play the live broadcast. If there is a barrage, webscoket can be used to obtain it in real time. Barrage, gifts or

animation

are implemented using css3.

2. Process

The mobile terminal uses the native system, and the PC uses obs software to collect

video

, in data processing, encoding, and through rtmp Push the stream to the streaming media server. The streaming media server will generate playback video streams in different formats, such as rtmp, hls, and then pull the stream, audio and video decoding, and playback.

3. Streaming

RTMP

: It is a real-time message transmission protocol developed by Macromedia. The modified protocol is based on TCP and now belongs to Adobe. It is mainly used Audio, video and data concentricity between Flash/air platform and streaming media/interaction server supporting RTMP protocol.

Advantages: The protocol is simple, easy to implement on various platforms, and has good CDN support.

4. Pull flow

Through understanding, it is divided into three types.

RTMP: Essentially a long TCP link, the data at each moment is forwarded immediately after being received, with low delay.

-HTTP-FLV: Essentially an HTTP long link, the data at each moment is forwarded immediately after being received, with low latency.

-HLS: HTTP short link, good cross-platform, slightly higher latency. It mainly includes two contents: .m3u8 file and .ts file. By requesting the url of m3u8, the video tag will parse the file and find the corresponding ts file to play.

5. Problems encountered

Mainly use video.js

QQx5 kernel:

In Android WeChat, qq browser, Because it is an x5 kernel, a system playback layer will pop up when playing a video, but there is a bug in the QQ browser, and there is a black layer on the top layer. The solution is to hide the video tag.

When the data is received during the live broadcast, it is in rtmp protocol and cannot be broadcast directly. It is converted into .m3u8 format

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

When the recording is played, the data is received in MP4 format and can be used directly

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

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use the meta viewport attribute of HTML

How to use base64 encoding for html images

How to use the hr horizontal line in HTML

How to achieve mixed arrangement of graphics and text in HTML

The above is the detailed content of Using Video.js to implement H5 live broadcast interface. For more information, please follow other related articles on the PHP Chinese website!