H5直播调研和自定义播放器设计

小皇帝James

主播端

  • 腾讯视频云小程序→rtmp推流→扫码(rtmp://49458.livepush.myqcloud.com/tuhulive)
  • obs工具推流image.png

直播端

  1. 引入播放器脚本
    <script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script>
  2. 初始化播放器
new window.TcPlayer('video', {
  'm3u8': 'http://play.tuhu.org/tuhulive/THMKT175B6074B01.m3u8?txSecret=faee19db98b2f9c49df6e83f8988af3c&txTime=5FAEAD80', // 播放地址
  'live': true, // 是否直播
  'poster': {style: 'cover', src: 'https://img1.tuhu.org/image/1bVYFnclnyZ_sE45y6Kcug_w700_h1244.jpeg'} // 封面
});

视频直播协议

视频协议 用途 URL地址格式 浏览器兼容PC/H5 优缺点 延迟
HLS(M3U8) 可用于直播 http://tuhu.cn/live/xxx.m3u8 支持 支持 手机浏览器支持度高 延迟非常高 10-30s 机型不同android偏高
HLS(M3U8) 可用于点播 http://tuhu.cn/vod/xxx.m3u8 支持 支持
FLV 可用于直播 http://tuhu.cn/live/xxx.flv 支持 不支持 成熟度高、高并发无压力 需集成SDK 2-3s
FLV 可用于点播 http://tuhu.cn/vod/xxx.flv 支持 不支持
RTMP 只适用直播 rtmp://tuhu.cn/live/xxx 支持 不支持 延迟最低 高并发情况下表现不佳
非标准80端口可能被防火墙屏蔽
1-3s
MP4 只适用点播 http://tuhu.cn/vod/xxx.mp4 支持 支持

HLS协议直播延迟解决方案

1、通过适当减少分片个数 or 缩短分片时长来降低延迟(可能造成卡顿影响)
2、配置obs推流参数
image.png

image.png

3、快直播

  • 快直播目前处于内测阶段,官方文档缺失较严重
  • 快直播基于webrtc实现,支持chrome、safari、微信内嵌网页等,如浏览器不支持webrtc,则无法使用
  • 目前已知兼容性问题:

    • IOS Safari浏览器版本不支持11.1.2以下 建议12及以上(本机IphoneX 11.4.1 safari上实测延迟2s左右)
    • 安卓部分华为机型(Chrome 浏览器和 以Chrome WebView 为内核的浏览器均不支持)
  • 不能从现有的标准H5直播业务平滑迁移,需要检测页面是否支持快直播拉流, 如果不支持可以使用原有hls协议拉流,需要客户端自行实现。

视频播放伪全屏

视频全屏时会使用系统自带的播放器,无法定制,使用css伪全屏方案代替

目前已知的全屏情况:

  • x5 内核(包括 Android 端的微信、手机 QQ 和 QQ 浏览器):不支持 Fullscreen API,支持 webkitEnterFullScreen,全屏后进入 x5 内核的全屏模式。
  • Android Chrome:支持 Fullscreen API,全屏后进入元素全屏模式。
  • Android系统浏览器:不支持 Fullscreen API,全屏为厂商定制全屏模式。
  • iOS (包括微信、手机 QQ、Safari):不支持 Fullscreen API,支持 webkitEnterFullScreen,全屏后进入 iOS 系统 UI 的全屏模式。
  • IE8/9/10:不支持 Fullscreen API,不支持 webkitEnterFullScreen,全屏为网页全屏模式。
  • 桌面端微信浏览器:不支持 Fullscreen API,不支持 webkitEnterFullScreen,全屏为网页全屏模式 (macOS 微信浏览器目前不支持任何全屏模式)。
  • 其他桌面端现代浏览器:通常支持 Fullscreen API,全屏后进入元素全屏模式。

系统全屏:元素必须是video元素,进入系统全屏模式

  • android:video.requestFullscreen/exitFullscreen
  • ios:video.webkitEnterFullscreen/webkitExitFullscreen

元素全屏:浏览器自带的element元素全屏,进入元素全屏模式

  • android: element.requestFullscreen/element.exitFullscreen
  • ios:不支持

伪全屏:通过一系列绝对定位元素实现element的伪全屏

  • 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;
}

视频容器层APP内旋转:
.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; 
}

播放器代码

问题收集

问题方案备注
部分android自带浏览器 表现为厂商自带播放器表现 无法控制 (例如自带controlBar、默认全屏播放等)H5无法解决
ios系统全屏效果差使用伪全屏+css方案代替考虑H5样式问题(浏览器导航栏高度 & fullscreen样式fixed兼容)

参考文档

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

阅读 782

IT吴彦祖

533 声望
5 粉丝
0 条评论

IT吴彦祖

533 声望
5 粉丝
文章目录
宣传栏