Vue项目中解决M3U8视频播放问题的两种方案

Vue项目中解决M3U8视频播放问题的两种方案

前言

近期在处理项目时遇到了M3U8视频无法播放的问题。该项目涉及的视频流均为M3U8格式，后端返回的也是此类格式的数据。经过长时间的排查和多篇博客的参考，受某篇文章启发，最终找到了解决方案。本文将详细介绍两种可行的解决路径。

使用video.js插件实现播放

第一种方法

1. 在Vue项目中安装必要的依赖插件。

cnpm install video.js --save
ccnp install videojs-contrib-hls --save

网络上曾有关于video.js版本兼容性的说法，认为高版本（7以上）无法使用，建议降级至5版本。但经过实际测试，这种说法并不成立，使用7及以上版本完全正常，无需刻意降级。

2. 在页面组件中使用视频播放器。

<video
id="myVideo"
class="video-js vjs-default-skin vjs-big-play-centered"
controls
preload="auto"
style='width: 100%;height: auto'
:poster="poster"
>
</video>

2.1 设置封面图（poster）。通过计算属性进行判断：若后端返回了封面图地址，则显示该封面；若无封面图，则显示本地默认图片。此逻辑可根据具体业务需求进行调整。

computed: {
  poster: function() {
   return this.posterSrc
    ? this.posterSrc
    : require("./../assets/images/coveImg.png");
  }
 },

2.2 在methods中定义一个名为getViewList的方法，用于请求后端数据并获取视频流地址。

2.3 安装依赖后，在页面中引入video.js。若遇到引入报错或模块解析问题，可直接在HTML入口文件中通过script标签引入CDN链接。

<script src="https://vjs.zencdn.net/7.3.0/video.min.js"></script>

完成上述步骤后，基础结构即已搭建完毕。

2.3 video.js配置项详解

getVideo() {
   this.myVideo = videojs("myVideo", {
    bigPlayButton: true,
    textTrackDisplay: false,
    posterImage: false,
    errorDisplay: false,
    hls: {
     withCredentials: true
    }
   });
  }

最关键的一步在于标红的配置项，务必正确配置。即使已下载安装包，若在此处未进行相应配置，M3U8视频仍无法播放。

mounted() {
this.$nextTick(() => {
this.getVideo();
});
this.getViewList();
},

定义的两个核心方法需放置在Vue的mounted生命周期钩子中执行。

使用hls.js库直接处理

第二种方法

上述方案实现了M3U8的播放，接下来介绍第二种实现方式。

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

相关资源地址请参考：https://www.npmjs.com/package/hls.js/v/canary

在项目中引入上述文件即可。

代码量较少，只需在mounted生命周期中调用相关逻辑即可。虽然这种方式默认的UI样式不如video.js美观，但同样能有效解决M3U8视频无法播放的问题。

以上两种方案均旨在解决M3U8视频播放失败的问题。

总结

以上就是本文的全部内容，希望这些内容能对大家在Vue项目中处理视频流的学习或工作有所帮助。感谢支持。