H5移动端直播的要点

在移动端，基于浏览器环境与微信及QQ的软件内部环境标准实现直播功能及在其基础上的附加功能(例如，加上弹幕及其他覆盖的DOM盒子)，这个过程还是有些要点需要总结记录下的。

视屏流的兼容情况

主流浏览器支持的视屏流我了解到只有HLS格式，但是像B站播放的策略是将flv格式视屏流通过js将流数据分段解析转变成MP4格式进行播放，这个我不是很了解，后期有时间我会尝试后者的做法，为了解决迫在眉睫的需求，这里我用的是HLS格式的流格式。很简单，html5的video标签就支持解析，移动端在微信和QQ的环境里也支持良好，唯一的缺点就是有10-30s的延时。

IOS里的问题

1. 视屏默认全屏播放

这个问题很好解决，只要加上 playsinline webkit-playsinline 属性标记就能解决。

2. 自动播放

当我们需要实现视屏自动加载完成播放的需求时，官方默认的属性 autoplay属性并不起作用，这里我为了在微信中实现自动播放效果，借助微信自带的X5浏览器里引入的微信脚本https://res.wx.qq.com/open/js/jweixin-1.2.0.js，它在加载过程中会在加载时间节点的回调函数WeixinJSBridgeReady，我在该回调中重新加载资源可以实现自动播放，具体代码如下：

  document.addEventListener("WeixinJSBridgeReady", function () { 
            var view = document.getElementById('video');
            view.play();
            view.controls = false;    
        }, false); 

安卓里的问题

安卓可以说是兼容的重灾区，因为安卓默认视屏播放时是全屏的，并且不能滑动，如果微信内部的X5不提供支持，几乎实现不了自定义播放时展现的尺寸。

微信X5浏览器的问题

1. video的层级问题

在X5浏览器里默认video播放时的层级是最高的，无论你调多大的z-index参数都不能改变，所幸的是微信在2017年9月提供了支持，只要我们在video中加上x5-video-player-type='h5'就可以实现在video上再加dom盒子。

2. 部分安卓手机会出现黑边

接下来就是一些优化的问题了。通过上面的一些条件会发现在安卓端，视屏播放的时候，上下两端会出现黑边的问题，增加如x5-video-player-fullscreen=”true”这个属性就行了。