vue中使用video.js播放m3u8格式的视频

一、前言

实时推送的视频流的需求，vue中就可以使用video.js播放m3u8格式的视频流

1.1、官网

1.2、Github

二、实现

2.1、安装依赖

yarn add video.js
yarn add videojs-contrib-hls // 这是播放hls流需要的插件
yarn add videojs-flash // 这是播放rtmp流需要的插件
yarn add mux.js // 在vue项目中，若不安装它可能报错

2.2、main.js

引入如下依赖：

import "video.js/dist/video-js.css"; // 引入video.js的css
import hls from "videojs-contrib-hls"; // 播放hls流需要的插件
import Vue from "vue";
Vue.use(hls);

2.3、video.vue

抽离出来一个视频组件

2.4、其它

rtmp流的话，需再安装依赖videojs-flash

// main.js
import flash from "videojs-flash"; // 播放rtmp流需要的插件
import Vue from "vue";
Vue.use(flash);

组件中设置src时需要注意：

this.player.src([{
    src: url,
    type: 'rtmp/flv' // 告诉videojs这是一个rtmp流视频
}])

三、最后

本人每篇文章都是一字一句码出来，希望大佬们多提提意见。顺手来个三连击，点赞收藏关注✨。创作不易，给我打打气，加加油☕