第一次在Vue项目中播放m3u8格式视频遇到的问题和解决方法_element admin 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>
1
2
3

是无法实现的。

二、遇到的问题

看了许多解决问题的文章: https://my.oschina.net/u/3263153/blog/1805378.类似与此都是使用videojs这个开源内容，外加一层皮肤。我也尝试了很多次，反反复复地安装和卸载video.js和videojs-contrib-hls两个包，出现的问题是不论实在全局或者是需要的组件里面一旦import这两个包就会报错，也尝试着通过源码解决问题，但始终没能成功。