{ from: node_modules/@liveqing/liveplayer/dist/component/liv
标签：
基于VUE和webpck的前端工程这里可以参考 https://github.com/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=http://www.mamicode.com/"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 = 播放的视频地点前端web页面通过VUE集成H5直播、点播播放器LivePlayer
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/33139.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")