直播系统构建02-Vue新增video.js插件播放rtmp直播流

前言

上篇说到直播系统的推流我们采用OBS客户端，后端采用Red5进行接收流和编码，已经可以实现了网页观看，但是网页的观看效果不符合我们实际的生产需要，这一篇我们采用Vue+elementUI+video.js播放直播流，使页面更加美观

vue框架的搭建

使用vue cli新建系统，这里就不多说了，直接上package.json

{
  "name": "voice",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.6.4",
    "element-ui": "^2.13.0",
    "video.js": "^5.20.5",
    "videojs-flash": "^2.2.1",
    "videojs-swf": "^5.4.2",
    "vue": "^2.6.11",
    "vue-router": "^3.1.5",
    "vuex": "^3.1.2"
  },
  "devDependencies":