Vue项目集成LivePlayer播放器

---

前言

LivePlayer播放器是一款在视频监控行业应用较为广泛的开源视频播放器，本文将详细介绍如何在Vue项目中安装和使用该播放器。

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.安装

执行如下命令：

npm -i @liveqing/liveplayer --save

2.vue.config.js添加配置

代码如下：

......
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/'},
        ])
      ],
      ......
    }
  }

3.index.html页面添加配置

public文件夹下index.html页面需引用liveplayr相关js文件：

<script  type="text/javascript" src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>

4.页面中使用

具体页面中使用如下：

<template>
 	<div class="videoPlayer">
      		<LivePlayer      :videoUrl="url"    />
   	</div>
</template>
<script>
import LivePlayer from  '@liveqing/liveplayer'
export default {  
	name: 'VideoPlayer',  
	data() {   
		return {     
			url: 'http://127.0.0.1:8090/video/x.mp4'   
		}  
	},  
	components: {   
		LivePlayer 
	}
}
</script>

---

总结：如果页面报错：‘Uncaught ReferenceError: videojs is not defined’，可能原因是index.html页面未引入liveplayer-lib.min.js文件导致的。最后欢迎大家评论交流。