H5 live broadcasting research and custom player design

The anchor end

• Tencent video cloud sweep the small program – RTMP push flow – code (rtmp://49458.livepush.myqcloud.com/tuhulive)
• OBS tools push flow

The live end

1. Introducing the player script < script SRC = “https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js” charset = “utf-8” > < / script >
2. Initialize the player

new window.TcPlayer('video', { 'm3u8': 'http://play.tuhu.org/tuhulive/THMKT175B6074B01.m3u8?txSecret=faee19db98b2f9c49df6e83f8988af3c&txTime=5FAEAD80', // play address 'live': true, // broadcast 'poster': {style: 'cover', SRC: 'https://img1.tuhu.org/image/1bVYFnclnyZ_sE45y6Kcug_w700_h1244.jpeg'}}); / / cover

Video Live Protocol

HLS protocol live broadcast delay solution

1. Reduce delay by appropriately reducing the number of sharding or shortening the sharding time (may cause lag)

2. Configure OBS push flow parameters

3. Live

• Kuaidi live streaming is currently in the private beta stage, and the official documents are missing seriously
• Kuaidcast is based on WebRTC, which supports Chrome, Safari, WeChat embedded web pages, etc. If the browser does not support WebRTC, it cannot be used

• Currently known compatibility issues:

  • IOS Safari version does not support 11.1.2 Recommendation 12 and above (the measured delay on native iPHONEX 11.4.1 Safari is about 2s)
  • Some Android Huawei models (Chrome and Chrome WebView browsers are not supported)
• It cannot be smoothly migrated from the existing standard H5 live streaming service, and it is necessary to detect whether the page supports fast live streaming. If not, it can use the original HLS protocol to pull streaming, which needs to be realized by the client itself.

Video playback pseudo full screen

Full screen video will use the system’s own player, can not be customized, use CSS pseudo full screen scheme instead

So far known full-screen situation:

• X5 kernel (including WeChat on Android, QQ on mobile phone and QQ browser) : Fullscreen API is not supported, but WebKitEnterFullscreen is supported. Fullscreen mode of X5 kernel is entered after Fullscreen.
• Android Chrome: Support Fullscreen API. After Fullscreen, enter element Fullscreen mode.
• Android browser: Fullscreen API is not supported. Fullscreen mode is customized for vendors.
• IOS (including WeChat, mobile QQ, Safari) : Fullscreen API is not supported, but WebKitEnterFullscreen is supported. After Fullscreen, it will enter the Fullscreen mode of iOS system UI.
• IE8/9/10: Fullscreen API is not supported, WebKitEnterFullscreen is not supported, Fullscreen is the Fullscreen mode of the web page.
• Desktop WeChat Browser: Fullscreen API is not supported, WebKitEnterFullscreen is not supported, Fullscreen is web Fullscreen mode (MacOS WeChat Browser currently does not support any Fullscreen mode).
• Other modern desktop browsers: Usually support the Fullscreen API, and then go into element Fullscreen mode after Fullscreen.

System full screen: The element must be a video element to enter system full screen mode

• Android: video. RequestFullscreen/exitFullscreen
• Ios: video webkitEnterFullscreen/webkitExitFullscreen

Element full screen: The browser has the element element full screen, enter the element full screen mode

• Android: element. RequestFullscreen/element. ExitFullscreen
• IOS: Not supported

Pseudo full screen: A pseudo full screen of an Element through a series of absolutely positioned elements

• android: element.requestFullscreen/element.exitFullscreen
• ios: element.classList.add/remove(fullscreen)

<div class="th-video">
  <div id="video" class="outer-wrap">
    <div class="inner-wrap">
      <div class="container">
        <div class="ui-area">
          <div class="header-bar"></div>
          <span class="play-btn"></span>
          <div class="control-bar"></div>
          <div class="ended-wrap"></div>
          <div class="barrage-wrap"></div>
        </div>
        <div class="player-area">
          <video />
          <div class="poster"></div>
          <div class="loading"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.th-video {-webkit-tap-highlight-color: transparent; Padding - top: 56.25%; position: relative; width: 100%; height: 0; .outer-wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; .inner-wrap { display: inline-block; width: 100%; height: 100%; .container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; video { width: 100% ! important; height: 100% ! important; }}}}} :. Outer-wrap. Fullscreen {Object-Fit: contain; position: fixed ! important; width: 100% ! important; height: 100% ! important; min-width: 0px ! important; max-width: none ! important; min-height: 0px ! important; max-height: none ! important; top: 0 ! important; right: 0 ! important; bottom: 0 ! important; left: 0 ! important; box-sizing: border-box ! important; transform: none ! important; margin: 0px ! important; z-index: 10000 ! important; .rotate {transform: rotate(90deg) Translate3D (0, 0, 0)! important; transform-origin: 0 ! important; width: 100vh ! important; height: 100vw ! important; top: -50vw ! important; left: 50% ! important; z-index: 10000 ! important; }

Player code

Problem to collect

Reference documentation

https://cloud.tencent.com/doc…