video标签兼容各端浏览器同层播放

<video ref="livePlayer" 
       class="live-player" 
       type="application/x-mpegURL" 
       x-webkit-airplay="true"
       webkit-playsinline="true" 
       x5-video-player-type="h5" 
       x5-video-player-fullscreen="true" 
       playsinline="true"
       preload="auto" 
       autoplay 
       :poster="liveInfo.imgUrl" 
       :src="liveInfo.voideUrl">
</video>

属性说明

• type：指定视频格式
• x-webkit-airplay：字面意思 容许airplay (通过AirPlay可以把当前的视频投放到支持此技术的其他设备上。)
• webkit-playsinline：这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放
• x5-video-player-type：启用H5播放器,是wechat安卓版特性
• x5-video-player-fullscreen：全屏设置，设置为 true 是防止横屏
• playsinline：IOS微信浏览器支持小窗内播放(关键：Ios微信浏览器小窗播放)
• preload：这个属性规定页面加载完成后载入视频*
• autoplay：自动播放
• poster：封面图

参考建议：百度贴吧直播查看源码