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”这个属性就好了。