基于VUE和webpck的前端工程
这里可以参考 /livegbs/GB28181-Server
1、安装@liveqing/liveplayer
npm -i @liveqing/liveplayer --save-dev
2、webpack.config.js 添加配置
这里是配置webpack自动copy，当然也可以手动复制到待发布的web目录，如www
....const CopyWebpackPlugin = require('copy-webpack-plugin');....plugins: [...new CopyWebpackPlugin([{ from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'},{ from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'}]),...]
3、配置template.html
<!DOCTYPE HTML><html><head>.....<!--这里的路径是上一步copy，相对于www目录的相对路径，最终目的让浏览器可以访问到这个js--><script src="js/liveplayer-lib.min.js"></script></head><bodyr>.....</body></html>
4、.vue中使用liveplayer
4.1、 import 引入
import LivePlayer from "@liveqing/liveplayer";
4.2、 components 中添加
components: {LivePlayer}
4.3 页面中添加组件
<div>....<LivePlayer :videoUrl="url" live muted stretch></LivePlayer>....</div>
4.4 url设置
this.url = 播放的视频地址
如果觉得《VUE中集成H5直播点播播放器LivePlayer过程》对你有帮助，请点赞、收藏，并留下你的观点哦！
![[转] 失眠 --- 一招就搞定](https://sm.tqys.net/uploadfile/pic/619.jpg)
