关于vue播放flv，m3u8视频流(监控)的方法

前文：随着前端大屏页面的逐渐壮大，客户的需求也越来越多，大屏上面展示的事物也越来越丰     富。其中实时播放监控的需求逐步增加，视频流格式也是有很多种，用到最多的.flv、.m3u8。

一、 JessibucaPlayer插件用来播放flv流

1.首先是先把文件放在vue项目的public下面

2.在index.html文件里面引入 index.js文件（直接引入即可）

 3.把封装好的JessibucaPlayer组件放到公共components

 4.最后再自己用到的文件里面 引入组件即可

 如有想要文件的请私聊

二、easyplayer插件播放m3u8流

教程：

1.首先npm安装EasyPlayer、copy-webpack-plugin
ps：copy-webpack-plugin版本一定一定一定不能大于6.0，否则会报错。

 npm install @easydarwin/easyplayer --save
 npm install [email protected] --save-dev

2.最重要的地方 一定要把这个地方弄好 那就是在vue.config.js里面

const CopyWebpackPlugin = require('copy-webpack-plugin')
configureWebpack: {
  plugins:[
        new CopyWebpackPlugin([
          {
            from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf',
            to: './libs/EasyPlayer/'
          },
          {
            from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml',
            to: './libs/EasyPlayer/'
          },
          {
            from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js',
            to: './libs/EasyPlayer/'
          }
        ])
  ]
}

3.还需要在public/index.html 引入EasyPlayer-lib.min.js，可以直接在node_modules里找到@easydarwin下的dist/compent/EasyPlayer-lib.min.js复制到pubilc目录下,还有需要EasyPlayer.wasm同样放到public目录下

 4.引入组件使用

 最后效果