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

主播端

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

直播端

引入播放器脚本
<script src="https://imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.3.js" charset="utf-8"></script>
初始化播放器

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...