vue播放flv、m3u8视频流(监控)的方法实例

目录

• 前文：
• 一、 JessibucaPlayer插件用来播放flv流
• 二、easyplayer插件播放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.引入组件使用

 最后效果

总结

到此这篇关于vue播放flv、m3u8视频流(监控)的文章就介绍到这了,更多相关vue播放flv m3u8视频流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！