这里可以参考 https://github.com/livegbs/GB28181-Server
npm -i @liveqing/liveplayer --save-dev
这里是配置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/'} ]), ... ]
<!DOCTYPE HTML><html> <head> ..... <!--这里的路径是上一步copy,相对于www目录的相对路径,最终目的让浏览器可以访问到这个js--> <script src="js/liveplayer-lib.min.js"></script> </head> <bodyr> ..... </body></html>
import LivePlayer from "@liveqing/liveplayer";
components: { LivePlayer }
<div> .... <LivePlayer :videoUrl="url" live muted stretch></LivePlayer> .... </div>
this.url = 播放的视频地址