主播端
- 腾讯视频云小程序→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 | 支持 | 不支持 | 延迟最低 | 高并发情况下表现不佳 非标准80端口可能被防火墙屏蔽 | 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)
<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兼容） |