vue中使用videojs做M3U8，hls视频流格式的直播功能.新增flv格式_videojs-flvjs-es6

最近项目业务需要用到视频流直播。格式M3U8。在此记录一下

项目vue版本是2.5.16，先安装必须的插件

1.安装

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

  "video.js": "^7.11.8",
  "videojs-contrib-hls": "^5.15.0",
  "mux.js": "^5.11.0",
1
2
3

2.配置videojs到全局，便于引用和管理

1. 新建 plugins文件夹，新建video.js文件；

video.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);
1
2
3
4

2. 在main.js中引入video.js

import "./plugins/video.js";
1

3.使用

1. 实现基本的播放

<video id="videoPlayer" class="video-js" muted></video>
......       
import Videojs from "video.js";
.....
data() {
    return {
      playUrl:'http://xxx/xx/xxxx@34020000001320001102.m3u8',//测试地址
   }
 }
 ......
 mounted(){
    this.getVideo(this.playUrl);
  },
  getVideo(url) { 
      let options = {
        autoplay: false, // 设置自动播放
        controls: true, // 显示播放的控件
        sources: [ //如果需要切换视频源，src需要动态设置
          {
            src: url,
            type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
          }
        ]
      };
      // videojs的第一个参数表示的是，文档中video的id
      const myPlyer = Videojs("videoPlayer", options, function onPlayerReady() {
       
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

4.运行测试

yarn dev
TypeError: The element or ID supplied is not valid. (videojs)
1
2

原因：页面未找到相应组件。这是由于本项目中视频是弹出框的形式，之前是隐藏状态，没有找到id为videoPlayer的组件
加nextTick解决

 this.videoVisible = true;//显示弹框
 this.$nextTick(()=>{
      this.getVideo(this.playUrl);
 }) 
1
2
3
4

测试成功

新增flv格式兼容

亲测
安装插件 yarn add videojs-flvjs-es6
video.js文件加上 import “videojs-flvjs-es6”
写了一个切换flv和hls的方法

 if(type == 0){
         this.player.src([
          {
            src: this.playUrl[0],
            type: "video/x-flv"
          }
        ]);
 }else{
        this.player.src([
          {
            src: this.playUrl[1],
            type: "application/x-mpegURL"
          }
        ]);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

完成

参考
github video.js