移动端H5直播/点播前端入坑简易手册

需求来了，只能H5

因业务需要，我们要在微信中使用直播服务。因为业务较小，没有必要花很多钱去采购第三方一条龙服务。那么，我们采用直播推流使用腾讯云的服务，前端自己开发页面。

原来考虑过使用微信小程序做，小程序本身提供直播流的组件，使用起来十分方便，且兼容性比较好。

但是貌似公司没有相关的多媒体资质，审核无法通过。所以，只能使用H5来解决，页面展示为顶部播放器，下部为留言互动。

直播流

推流：通过视频/音频采集器与服务器建立连接将实时视频音频传输到服务器。

拉流：通过客户端的播放器与服务器建立连接，实时获取直播数据，并呈现出来。

通常我们购买**云直播服务后可以在后台获取推流地址和拉流地址，这个推流地址就配置在推流工具中，如 OBS Studio ，如何配置到处都有。拉流地址则给到前端，进行播放。

**云拉流地址一般提供的格式有：m3u8、flv和rtmp。移动端只能使用m3u8，另外两个只支持PC端。

1. 播放器插件方案选择

都是大厂的，质量都不会差到哪里去，都支持移动端和PC端：

（1）TCPlayerLite：腾讯云提供的H5直播接入方案。文档地址

• 简单、轻便、只需引入一个js。
• 微信端兼容性好。

（2）Aliplayer：阿里云提供的H5直播接入方案。文档地址

• 默认样式比TCPlayer好看，UI支持自定义。
• 除了引入一个js还需要引入一个css，如果要把css放到本地，还需要去把css中引入的图片也down下来。

推荐使用TCPlayer，测试发现Aliplayer在我的测试安卓机微信上存在点问题，如：点击全屏播放，再退出全屏播放，原小屏播放器会黑屏等，我只好先放弃他，要让业务先飞起来。

2. 自动播放问题

iOS下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的。直接进入/刷新播放页面，并加载播放地址，iOS不会自动播放，需要手动触发播放按钮。但是如果进入页面用户有点击操作，或者用户进入一个播放列表再进入播放详情页，自动播放也是可能触发的。再微信中还有个方法可以处理自动播放：需要引入微信JSSDK，然后监听WeixinJSBridgeReady，再调用播放器的play方法。

//IOS微信环境下自动播放处理
document.addEventListener("WeixinJSBridgeReady",()=>{
    console.log("wx play")
    this.player && this.player.play && this.player.play()
})

3. 横屏竖屏切换问题

再系统开启了屏幕随重力旋转的时候，iOS微信浏览器会触发H5页面旋转，从竖屏到横屏，页面变宽了，然而 video标签却文字不动，样式就打乱了。因此，我们需要监听屏幕宽高的切换。不难发现，这个切换会触发window的resize和orientationchange，我们这里监听orientationchange就好。

1. 通过orientationchange监听屏幕进行了横屏竖屏切换。
2. 监听回调中通过window.orientation判断是横屏还是竖屏，orientation为0或180为竖屏，90或-90为横屏。
3. 如果是横屏没有必要按照原页面展示逻辑展示内容，既然横屏了，就直接做成全屏的样子。
4. 通过document.body.offsetWidth 和 offsetHeight 计算屏幕大小，并修改播放器的大小。
5. 我的项目中，播放器video标签外面还有一个容器，video设置宽高100%，我只用控制容器的大小。横屏的时候我加个样式让容器绝对定位到最上层，并占满屏幕，这个时候播放器也占满屏幕，从而达到全屏效果。
6. 代码中监听事件增加了一点延时。因为，在真机测试中，监听回调中orientation的值并未实时改变。

//横屏竖屏
checkVertical(){
    let orientation = window.orientation
    if(orientation == 90  || orientation == -90){
        return false    
    }else{
        return true
    }
}

//横屏竖屏切换
window.addEventListener('orientationchange', ()=>{
    setTimeout(()=>{
        let isVertical = checkVertical()
    },100)
});

4. 同层播放问题

iOS不存在问题，主要是安卓手机上存在问题，腾讯X5内核的浏览器会拦截播放器，让其处于最顶层，会遮挡页面弹窗或者其他的内容。

因此，需要开启播放器的x5模式。如：Aliplayer的兼容性适配 

5. 页面滑动问题

在微信浏览器中，如果不做特殊处理，页面上下活动到极限位置，页面会滑出一部分浏览器背景，如顶部和底部出现的空白。在直播详情页面出现这种现象很影响用户体验。如，在滑动查看聊天内容的时候，滑动区域其实只有很小一部分，当滑到底部，再继续滑动，整个页面就开始滑动，颤抖把骚年！

处理方法：

1、禁用页面默认的滑动： touch-action: none; overflow:hidden;等等。

2、采用自定义滑动：推荐使用滑动插件iScroll，多快好省，兼容多平台。参考示例：vue中使用iScroll滚动组件