因业务需要，我们要在微信中使用直播服务。因为业务较小，没有必要花很多钱去采购第三方一条龙服务。那么，我们采用直播推流使用腾讯云的服务，前端自己开发页面。
原来考虑过使用微信小程序做，小程序本身提供直播流的组件，使用起来十分方便，且兼容性比较好。
但是貌似公司没有相关的多媒体资质，审核无法通过。所以，只能使用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就好。
通过orientationchange监听屏幕进行了横屏竖屏切换。监听回调中通过window.orientation判断是横屏还是竖屏，orientation为0或180为竖屏，90或-90为横屏。如果是横屏没有必要按照原页面展示逻辑展示内容，既然横屏了，就直接做成全屏的样子。通过document.body.offsetWidth 和 offsetHeight 计算屏幕大小，并修改播放器的大小。我的项目中，播放器video标签外面还有一个容器，video设置宽高100%，我只用控制容器的大小。横屏的时候我加个样式让容器绝对定位到最上层，并占满屏幕，这个时候播放器也占满屏幕，从而达到全屏效果。代码中监听事件增加了一点延时。因为，在真机测试中，监听回调中orientation的值并未实时改变。 //横屏竖屏checkVertical(){let orientation = window.orientationif(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滚动组件