大家好,又见面了,我是你们的朋友全栈君。
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中使用
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/149882.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...