关于javascript:H5直播调研和自定义播放器设计

主播端

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

直播端

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'} // 封面
});

视频直播协定

HLS 协定直播提早解决方案

1、通过适当缩小分片个数 or 缩短分片时长来升高提早（可能造成卡顿影响）
2、配置 obs 推流参数

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)

 视频容器层：:fullscreen {
  object-fit: contain; 
  position: fixed !important; 
  width: 100% !important; 
  height: 100% !important; 
  top: 0 !important;
  right: 0 !important; 
  bottom: 0 !important; 
  left: 0 !important;  
  transform: none !important;  
  margin: 0px !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; 
}

视频容器内包裹层：.outer: {
  position: relative; 
  display: inline-block; 
  width: 100%; 
  height: 100%; 
  .inner: { 
    position: absolute; 
    top: 0;
    right: 0; 
    bottom: 0; 
    left: 0; 
    overflow: hidden;  
    video: { 
      width: 100% !important; 
      height: 100% !important; 
    }
  }
}

问题收集

参考文档

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