html5的video标签播放m3u8视频

从每次开机时的广告弹窗，就可以看出flash大限将至了[aru_41]可能是想最后再捞一笔。谷歌浏览器对flash也是越来越不友好了。

好了，不废话[aru_43]今天要说的是使用html5的video标签播放m3u8视频。但video标签支持的视频格式有

1、mp4

2、WebM

3、Ogg

没有包含m3u8格式，所以需要手动绑定解码。

需要用到的是：hls.min.js

可以引用远程的：

https://cdn.jsdelivr.net/hls.js/latest/hls.min.js

也可以自行下载到本地。

video标签中需要注意的是controls属性，不加这个属性播放器的进度条、音量、全屏按钮都不会显示。autoplay代表的是自动播放，另外建议宽度设置100%。

html代码如下，可点击[运行]查看效果：

<!--部分重要代码-->
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
 <video width="80%" id="videos" controls autoplay></video>

<!--手动绑定解码-->
<script>
        if(Hls.isSupported()) {
                  var video = document.getElementById('videos');
                  var hls = new Hls();
                  //下方放m3u8地址
                  hls.loadSource('https://vs1.baduziyuan.com/20171212/PMXDkWST/index.m3u8');
                  hls.attachMedia(video);
                  hls.on(Hls.Events.MANIFEST_PARSED,function() {
                    video.play();
                });
	}
</script>

好了，完工了。点此测试密码：666（刮刮乐）[aru_67]