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

最新推荐文章于 2025-05-08 10:24:32 发布

码云_lei

最新推荐文章于 2025-05-08 10:24:32 发布

阅读量7.1k

点赞数 2

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/jutgj/article/details/114662043

版权

本文介绍了作者在Vue项目中首次尝试播放m3u8格式视频遇到的问题，包括m3u8文件的特性、使用video标签无法播放的问题，以及尝试使用videojs与videojs-contrib-hls库时的导入错误。最终，作者通过动态生成视频播放容器并遍历视频列表实现了播放功能。未来将探讨更多关于m3u8视频播放的复杂情况，如字幕、加密和清晰度等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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这两个包就会报错，也尝试着通过源码解决问题，但始终没能成功。

最低0.47元/天解锁文章