Web 前端如何播放 HLS(.m3u8) 视频

HTTP Live Streaming (HLS) has become a de-facto standard for streaming video on mobile devices thanks to its native support on iOS and Android. Unfortunately, all the major desktop browsers except for Safari are missing HLS support.

WEB 上主流的视频直播方案有 HLS 和 RTMP，移动 WEB 端目前以 HLS 为主（HLS存在延迟性问题，也可以借助 video.js 采用RTMP），PC端则以 RTMP 为主实时性较好

移动端 iOS 和 Android 都天然支持HLS协议，做好视频采集端、视频流推流服务之后，便可以直接在H5页面配置 video 标签播放直播视频, HLS 在 PC 端仅支持safari浏览器，类似chrome浏览器使用HTML5 video标签无法播放 m3u8 格式，可直接采用网上一些比较成熟的方案

移动端可直接通过 <video> 标签来播放 .m3u8 格式的视频: 

参考代码：

<video class="vjs-tech" width="100%" height="100%"
    controls="controls" autoplay="autoplay"
    x-webkit-airplay="true" x5-video-player-fullscreen="true"
    preload="auto" playsinline="true" webkit-playsinline
    x5-video-player-typ="h5">
    <source type="application/x-mpegURL" src="http://dlhls.cdn.zhanqi.tv/zqlive/22578_yKdJM.m3u8">
</video>

PC端需要通过其他手段（videojs-contrib-hls）来解码 .m3u8 格式的视频, 才能够通过 <video> 标签或者 flash 来播放