vue 中使用百度cyberplayer播放器遇到的坑

上次用了百度cyberplayer播放器也做了一些介绍，在使用的过程中遇到了一些问题。播放器和vue都有一点写法的问题

1、频繁点击视频进入播放页面后再返回首页，会出现上个视频的音频和当前视屏音频都有播放。

2、开始还以为是播放器的问题，但是后面试了一下和播放器的关系不大。

用了有几种办法解决

1、修改不放弃的方法不用var声明，直接把播放器的方法保存在data()全局里面
2、利用vue的生命周期钩子在实例销毁之前销毁data()里的播放器方法
3、再次进入播放页面的时候首先调用一次播放器方法，数据全部传空的，是播放器空放，但是这个持续不了多久
4、获取到数据在从新调用播放器方法，使视频文件能正常播放

现在简单的看一下修改的地方

<script>
	export default {
		data() {
			player: Function,
		},
		methods: {
			// 百度解析视频播放方法
	      	baiduMp4(mp4Url, imgUrl) {
				// 这里前面是用var声明的player，现在把player直接存在data()里面
		       	this.player = cyberplayer("playercontainer").setup({
		       	width: 1015, // 宽度，也可以支持百分比(不过父元素宽度要有)
	          	height: 568, // 高度，也可以支持百分比
	          	title: "基本功能", // 标题
	          	file: mp4Url, // 播放地址
	          	image: imgUrl, // 预览图
	          	autostart: true, // 是否自动播放
	          	stretching: "uniform", // 拉伸设置
	          	repeat: false, // 是否重复播放
	          	volume: 100, // 音量
	          	controls: true, // controlbar是否显示
	          	starttime: 0, // 视频开始播放时间点(单位s)，如果不设置，则可以从上次播放时间点续播
	          	logo: { // logo设置
	            	linktarget: "_blank",
	            	margin: 8,
	            	hide: false,
	            	position: "top-right", // 位置
	            	file: "./img/logo.png", // 图片地址
	          	},
	          	ak: "***", // 公有云平台注册即可获得accessKey
	        	});
	        	this.playComplete();
	      	},
		},
		// 实例销毁之前清除player方法，停止播放
		beforeDestroy() {
	      this.player.remove();
	    },
		// 实例销毁之后移除所有的监听器和完全销毁这些实例，清除它与其它实例的连接，解绑全部指令及监视器
	    destroyed() {
	      this.$off();
	      this.$destroy();
	    },
	}
</script>