大家好，又见面了，我是你们的朋友全栈君。
0 前言
- github: EasyPlayer.js
一定要是legacy分支哦，master分支是EasyWasmPlayer.js，有些功能不支持的（2022-03-26：作者已调整仓库结构，只保留了master）
1 教程
- 首先npm安装EasyPlayer、copy-webpack-plugin
ps：copy-webpack-plugin版本一定一定一定不能大于6.0，否则会出很多很多问题，具体原因可以去看这个插件的更新记录，或者百度
npm install @easydarwin/easyplayer --save
npm install copy-webpack-plugin@5.1.2 --save-dev
- copy三个文件到静态目录下，这里通过copy-webpack-plugin插件来完成这个工作，vue.config.js中配置插件copy-webpack-plugin，这里的to根目录是静态目录（build时就是dist文件夹，./libs/EasyPlayer/就是dist/libs/EasyPlayer/)
ps: 修改了vue.config.js，记得重新运行npm run dev哦，否则不生效的
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，文件位置取决于你怎么配置copy-webpack-plugin，我配置的to是./libs/EasyPlayer/，那么就引用./libs/EasyPlayer/EasyPlayer-lib.min.js
<!DOCTYPE html>
<html>
<head>
...
<script src="./libs/EasyPlayer/EasyPlayer-lib.min.js"></script>
...
</head>
<body>
<div id="app"></div>
</body>
</html>
- 使用组件
...
<easy-player :video-url="..."></easy-player>
...
import EasyPlayer from '@easydarwin/easyplayer'
...
components: {
EasyPlayer
}
...
- 相关属性和方法请去github查看官方文档
后语
- 可以看看LivePlayer.js教程，这个插件给我的第一印象就是跟EasyPlayer.js太像了？然而EasyPlayer.js并没有开源啊
- 参考文章：
EasyPlayer.js 在VUE中使用
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/149882.html原文链接：https://javaforall.net
