video

video属性

html5 video 支持 m3u8格式
参考链接

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video"></video>
<script>
 if (Hls.isSupported()) {
   var videos = document.getElementById('video') // 获取 video 标签
   var hls = new Hls() // 实例化 Hls 对象
   this.hls = hls
   hls.loadSource('http://hls01open.ys7.com/openlive/8185b9a6d18a40259474fcdad818eb18.hd.m3u8') // 传入路径
   hls.attachMedia(videos)
   hls.on(Hls.Events.MANIFEST_PARSED,function() {
     videos.play() // 调用播放 API
   })
 }
 beforeDestroy(){
   // 销毁视频流
   if (this.hls) {
     this.hls.destroy()
   }
 }
 组件销毁的生命周期里销毁创建的hls对象，不然在SPA应用里切换页面或者切换tab的时候，虽然看不到视频组件了，但还会一直在发送请求。
</script>