关于 在vue-video-player中播放m3u8流的问题_video-player m3u8暂时无法播放

准备

由于之前的rtmp流需要安装flash，而各大浏览器在2020年底就开始放弃支持flash插件了，所以为了后期使用更方便，跟硬件人员协商转换了直播视频流的格式

首先，需要安装vue-video-player

cnpm install vue-video-player --save
1

然后在main.js中引入

import VideoPlayer from 'vue-video-player'
require('vue-video-player/node_modules/video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)
1
2
3
4

在页面中使用（过程网上都有，不做介绍）

为了能播放.m3u8，还要安装videojs-contrib-hls

cnpm install --save videojs-contrib-hls
1

安装好之后就可以使用了~

使用

在要使用的页面中引入（也可以在main.js引用）

import videojs from 'video.js'
window.videojs = videojs//要先声明,在下方的hls.js中要用到,不然视频会出错
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')
1
2
3

视频就可以正常播放啦！