EasyPlayer.js在vue项目中的使用

最近项目上需要用到播放器，了解到EasyPlayer.js，它功能很强大，集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器。

github地址

记录一下个人使用 EasyPlayer.js 的步骤

1.下载安装

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目录下，然后在index.html中引入EasyPlayer-lib.min.js。

注意：作者本身并没有拷贝EasyPlayer-lib.min.js文件到public下，而是直接引入 “./libs/EasyPlayer/EasyPlayer-lib.min.js”（作者觉得是vue.config.js配置了如上的原因，打包后会多一个libs文件夹，故作者就直接引入了，亲测没有报错。）

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

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

import EasyPlayer from "@easydarwin/easyplayer";

components: {
    EasyPlayer,
},

<easyPlayer videoUrl="...." autoplay :live="true"></easyPlayer>

属性配置可参考如下：

www.npmjs.com/package/@ea… 或者 github.com/tsingsee/Ea…

以上仅此个人记录，如有错误，欢迎指正。