Introduction to WEB direct broadcast technology and application of video.js in Vue

  video.js, vue.js

brief introduction

Currently, the video live broadcast service supports three live broadcast protocols, namely RTMP, HLS and FLVThe following is from ariyun help center

  • RTMPThe real-time messaging protocol, developed by Adobe, has not yet been incorporated into international standards (wikipedia). The protocol is versatile and can be used for both push and live broadcast. Its core idea is to “chop” large video frames and audio frames, and then transmit them on the Internet in the form of small data packets, and supports encryption. Therefore, privacy is relatively ideal. However, the process of unpacking and grouping packets is relatively complex, so some unexpected stability problems are easy to occur when there are large amounts of concurrent packets.
  • HLS protocol:HTTP protocol-based streaming (wikipedia). Apple’s solution divides the video into small pieces of 5-10 seconds, and then manages it with m3u8 index table. Since the videos downloaded by the client are all complete data of 5-10 seconds, the video is very smooth, but it also introduces a large delay (the general delay of HLS is about 10-30s). Compared with FLV, HLS supports iPhone and most Android mobile phone browsers very powerfully, so it is often used for URL sharing in QQ and WeChat circle of friends.
  • HTTP-FLV protocol is mainly pushed by Adobe company, and its format is extremely simple. it only adds some tag header information to large video frames and audio/ video headers. due to this extreme simplicity, it is mature in terms of delay performance and large-scale concurrency. The only deficiency is that the support on the mobile phone browser is very l imited, but it is extremely suitable to be used as the live APP protocol on the mobile phone.

Let’s look at the comparison of the three technologies:

Application in Vue

The live broadcast project we do is written by Vue, and the background mainly outputs live broadcast streams of RTMP and HLS.

The player usesvue-video-player, in fact isvideo.jsIntegration into vue


Let’s talk about some pits that are broadcast live with this plug-in and pay attention to them:

First of all, the common demo isvue-video-playerThe Chinese government has already given it and can do it as required. Among them

  1. If you need to play HLS stream, you need to install it.videojs-contrib-hlsPlug-in, non-native browser, live server needs to open CORS (described later)
  2. If you need to play RTMP stream, you need to install itvideojs-flashplug-in
  3. If both streams need to be played, the flash plug-in needs to be installed before the hls plug-in


Let’s talk about the compatibility of these two live streams.

  1. RTMP: It is said above that RTMP is a protocol developed by Adobe. At present, the main live broadcast services mainly push RTMP stream. It has a small delay, but it needs the support of flash plug-in and the installation mentioned above.videojs-flashThe plug-in for. However, it is not friendly to support flash plug-ins under MAC, and firefox browser and chrome are still two plug-ins. . This is very embarrassing.
  2. HLS: This protocol has good compatibility, but the biggest disadvantage is the high delay, about 20 seconds, so it can only be used as an alternative.

Said HLS compatibility is good, mainly refers to can let the user through JS configuration (don’t have to install flash), can look at the HLS support level in caniuse:

OnlyEdgeAndSafariProvide native support, other browsers need JS plug-in support. Is that all you have to do?videojs-contrib-hlsOk? There is still a hole in it. This pit is described in the plug-in’s official documentation:

Unlike a native HLS implementation, the HLS tech has to comply with the browser’s security policies. That means that all the files that make up the stream must be served from the same do main as the page hosting the video player or from a server that has appropriate CORS headers configured. Easy instructions are available for popular we bservers and most CDNs should have no trouble turning CORS on for your account.

The simple meaning is:In addition to native browsers that support HLS, other browsers need the live streaming server to open CORS if they want to broadcast HLS.

In the end, the plan we used was. RTMP flow is preferred. If it is not supported, switch to HLS flow. Fortunately, video.js will automatically do this switching process for us. Please paste the relevant configuration code below.

Configuration code

For player options in Vue instance, see for more codes

      playerOptions: {
        autoplay: false, // 自动播放
        controls: true, // 是否显示控制栏
        techOrder: ['flash', 'html5'], // 兼容顺序
        sourceOrder: true, // 
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        sources: [{ // 流配置,数组形式,会根据兼容顺序自动切换
          type: 'rtmp/mp4',
          src: 'rtmp://'
        }, {
          withCredentials: false,
          type: 'application/x-mpegURL',
          src: ''
        poster: "/static/img/no_data.png", // 播放器默认图片
        // controlBar: { // 配置控制栏
        //   timeDivider: false, // 时间分割线
        //   durationDisplay: false, // 总时间
        //   progressControl: true, // 进度条
        //   customControlSpacer: true, // 未知
        //   fullscreenToggle: true // 全屏
        // },


The above are some small summaries of the recent research on live broadcast projects. Other technologies in live broadcast have not been involved for the time being, and will be summarized in the future. If there are any problems, you can exchange them by shooting bricks ~


Because video.js is updated faster, vue-video-player version 4.0.6 has been locked in demo.

Reference document

Public number:Code force fully open