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>