乐趣区

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

jiezi

主播端

  • 腾讯视频云小程序→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'} // 封面
});

视频直播协定

视频协定 用处 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 反对 / 不反对 提早最低 / 高并发状况下体现不佳 1-3s
MP4 只实用点播 http://tuhu.cn/vod/xxx.mp4 反对

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

问题收集

问题 计划 备注
局部 android 自带浏览器 体现为厂商自带播放器体现 无法控制（例如自带 controlBar、默认全屏播放等） H5 无奈解决
ios 零碎全屏成果差 应用伪全屏 +css 计划代替 思考 H5 款式问题（浏览器导航栏高度 & fullscreen 款式 fixed 兼容）

参考文档

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

退出移动版