第一次在Vue项目中播放m3u8格式视频遇到的问题和解决方法

一、m3u8文件

第一次接触这种m3u8格式的视频文件，开始以为类似与.mp4这种，所以在项目中我通过html5提供的video标签做播放功能发现并不能成功，后来了解到M3U8文件是一种UTF-8编码格式的M3U文件，而M3U文件是记录一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放，种种格式常见在直播视频，监控视频。
简单的说，m3u8存放的是播放列表，视频以另一种格式储。如果使用mp4那么在多个分块直接播放时，就会出现卡顿。
m3u8不是video标签的支持的标准格式，也就是说这样的常规操作

<video width="320" height="240" controls><source src="a.m3u8"  type=application/x-mpegURL>
</video>

是无法实现的。

二、遇到的问题

看了许多解决问题的文章: https://my.oschina.net/u/3263153/blog/1805378.类似与此都是使用videojs这个开源内容，外加一层皮肤。我也尝试了很多次，反反复复地安装和卸载video.js和videojs-contrib-hls两个包，出现的问题是不论实在全局或者是需要的组件里面一旦import这两个包就会报错，也尝试着通过源码解决问题，但始终没能成功。
看了一些文章，有说是因为videojs版本的问题，很多朋友使用videojs 7.0+时，也会出现这种问题，也有说是因为node.js的内部自带了video.js当我们再install video.js就会产生冲突。说法不一，我也都尝试过，始终没有成功。

二、解决方法

刚刚说过m3u8是存放的是视频列表，而不是视频文件。
贴代码

 playVideo () {this.$refs.videolist.innerHTML='';this.videoList.push(this.vidoeSrc)let idArr = [];this.videoList.forEach((item,index)=>{var dynamicDom = document.createElement('div');dynamicDom.style.width = 30 +'%';dynamicDom.style.float = 'left';dynamicDom.style.overflow = 'hidden';dynamicDom.id = 'site' + index;dynamicDom.className ='wd50005 vh50005 pl005 pr005 pb005 ml005'let obj = {};obj.id = dynamicDom.id;//dom对应的idobj.url = this.videoItem.playurl// 测试视频// obj.url = "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8"idArr.push(obj);console.log(idArr);this.$refs.videolist.appendChild(dynamicDom);});this.mountVideoFn(idArr);},mountVideoFn(idArr){for(var i = 0;i < idArr.length;i ++){var player = 'player'+i;player = new TcPlayer(idArr[i].id, {m3u8: idArr[i].url,autoplay: this.videoAutoPlay,// coverpic: "http://www.test.com/myimage.jpg",width: "100%", height: "100%" });}},

动态生成了一个视频播放的容器，点击播放的时候遍历拿到每一条视频。

beforeDestroy() {this.videoAutoPlay = false;this.$refs.videolist.innerHTML='';},

在mounted钩子函数中调用一次函数获取视频列表。
在beforeDestroy钩子函数中初始化这个容器以及暂停自动播放。

这里面还有很多学问，像字幕，加密，清晰度等，我暂时还没有接触，以后遇到了再和大家分享