这两年来我们发现越来越多的视频应用使用了m3u8格式的视频，因为可以兼容PC、移动端。相比mp4等视频源，m3u8可以减轻服务器压力（按需加载）。HLS是由苹果公司率先提出的一种协议标准，可用于直播。 m3u8是一种基于HLS(HTTP Live Streaming) 文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。不同于mp4大文件，m3u8是由一系列的ts文件组成，一般一个ts文件大概5-10秒，这些ts文件通过一个.m3u8文件做索引。用户播放视频时，可随意拖动视频进度，会读取相应进度的ts文件继续观看视频，不必等到下载完整的视频。因此在播放m3u8的时候很少有卡顿的现象。
关于HLS直播的技术示例以及m3u8切片技术我们会在后面有文章介绍。本文只做HLS点播讲解，与直播不同，点播是指视频文件已经在编辑好，随时可播放。
由于HLS是由Apple公司提出的，所以在iOS电脑或手机上，你可以直接使用Safari浏览器的播放m3u8格式视频文件。而其他浏览器则需要借助hls.js来兼容m3u8。
使用hls.js，不需要任何定制的播放器，只需要元素就能播放m3u8。
加载js和播放元素 在需要放置视频的页面位置上加入video元素和hls.js文件。
调用hls.js 首先判断浏览器是否支持hls，如果支持就实例化new Hls()，加载m3u8源，然后播放。如果不支持hls，而支持苹果原生应用，则播放另一个m3u8源。
var video = document.getElementById('video'); if(Hls.isSupported()) { var hls = new Hls(); hls.loadSource('yunqivedio.alicdn.com/2017yq/v2/0…'); hls.attachMedia(video); hls.on(Hls.Events.MANIFEST_PARSED,function() { video.play(); }); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = 'video-dev.github.io/streams/x36…'; video.addEventListener('loadedmetadata',function() { video.play(); }); } 运行，试着用PC浏览器和手机访问，你会发现m3u8的播放很流畅。
在Vue中使用hls.js 使用Vue框架的同学可以用npm先安装hls。
npm install --save hls.js 然后添加组件。
<video ref="videoRef" width="400" controls></video>
最后挂载代码：
<script>
import Hls from 'hls.js';
export default {
data () {
return {
//
}
},
mounted: function() {
var hls = new Hls();
hls.loadSource('https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8');
hls.attachMedia(this.$refs.videoRef);
hls.on(Hls.Events.MANIFEST_PARSED,function() {
this.$refs.videoRef.play();
});
}
}
</script>
