关于vue.js:vue中easyplayer使用

38次阅读

共计 975 个字符,预计需要花费 3 分钟才能阅读完成。

1.npm 装置 easyplayer、copy-webpack-plugin

npm install @easydarwin/easyplayer --save
npm install copy-webpack-plugin@4.0.1 --save-dev

也可在 package.json 文件中间接增加版本号,而后执行 yarn install 或 npm install:

"dependencies": {"@easydarwin/easyplayer": "^5.0.3",},
"devDependencies": {"copy-webpack-plugin": "^4.0.1",}

2. 在 vue.config.js 文件中配置

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

3. 在 public/index.html 中引入 js 动态资源
留神:文件地位要与下面配置的 to… 雷同,下面配置是的 to: ‘js/’,所以底下地址是./js

<!-- 引入 EasyPlayer 依赖 -->
<script src="./js/EasyPlayer-lib.min.js"></script>
或
<script src="<%= BASE_URL %>js/EasyPlayer-lib.min.js"></script>

4. 在 vue 中应用

<easy-player :video-url="item.videoUrl" :live="true"></easy-player>
...
import EasyPlayer from '@easydarwin/easyplayer'
...
components: {EasyPlayer}

正文完
 0