EasyPlayer.js在vue项目中的使用一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，

最近在整视频监控的东西，要用H.265的编码，因为是第一次所以记录一下

使用的是EasyPlayer.js，它功能很强大，集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器

怎么在vue项目中使用呢？

首先第一步

npm install @easydarwin/easyplayer --save

按常规到这步然后全局引用就可以了，但是EasyPlayer.js还需要配置一些文件才能使用

需要再下个依赖，不要大于6.0版本的，不然会有bug

npm install copy-webpack-plugin@5.1.2 --save-dev

然后在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/'
          }
        ])
  ]
}

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

如果你按我这么引入会报错的话就改./EasyPlayer-lib.min.js

以上就是所有配置（tips:EasyPlayer.js的在video.js的基础上的，所以还需要安装一下video.js）

然后就是在vue中引入，也可全局这里不做演示

import EasyPlayer from "@easydarwin/easyplayer"; 
<easyPlayer videoUrl="...." autoplay :live="true"></easyPlayer>