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

一、m3u8文件

第一次接触这种m3u8格式的视频文件，开始以为类似与.mp4这种，所以在项目中我通过html5提供的video标签做播放功能发现并不能成功，后来了解到M3U8文件是一种UTF-8编码格式的M3U文件，而M3U文件是记录一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放，种种格式常见在直播视频，监控视频。
简单的说，m3u8存放的是播放列表，视频以另一种格式储。如果使用mp4那么在多个分块直接播放时，就会出现卡顿。
m3u8不是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对应的id
            obj.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钩子函数中初始化这个容器以及暂停自动播放。

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