UniApp中使用LivePlayer进行视频或在流媒体播放

wangdaoyin20102025-12-13 11:15

参考官网文档：https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%9C%A8-vue-%E4%B8%AD%E4%BD%BF%E7%94%A8

1、安装：vue2：npm install @liveqing/liveplayer

在vue中使用，安装 copy-webpack-plugin 插件, npm install copy-webpack-plugin@4.6.0,

进行文件拷贝

复制代码

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    configureWebpack: {
      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/'},
        ])
      ]
    }
  }

官网运行报错如下

需要修改成

复制代码

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
	configureWebpack: {	 
		plugins: [new CopyWebpackPlugin([{
				from: path.join(__dirname,
					'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'),
			},
			{
				from: path.join(__dirname,
					'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js'),
				to: 'js/'
			},
			{
				from: path.join(__dirname,
					'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'),

			}
		])]
	},
}

至于里面的"path"和"__dirname"等待后面继续研究

最后再index.html中添加对iveplayer-lib.min.js的引用

复制代码

<script src="js/liveplayer-lib.min.js"></script>

到这个地方就可以正常启动了，主要注意一下复制的写法