关于vue.js:vue中easyplayer使用

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 }

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理