描述:
我们在vue单页面中使用ckplayer时,会发现当我们点击过播放页面之后,切换到其他页面,按下空格键之前页面的视频会自动播放。
ckplayer为我们提供了空格键按下视频播放和暂停功能。
问题:
我们明明已经切换了页面,dom元素已经销毁,为什么按下空格键还会有视频播放呢?
经过一番波折:
发现除了页面上的video元素之外,还存在其他的video,在我们new出的对象player中,有一个player.V的属性,这个是插件给我们生成video对象。插件对这个属性做了监听,按下空格自动播放视频。
在vue中我们虽然销毁了页面上的video元素,但是插件中的video元素并没有销毁,并且有变量接住了这个dom,我已空格还是会对video元素起作用。
解决方案:
在vue的beforeDestroy钩子中做以下处理:
mounted: function () {
this.player = new ckplayer(videoObject);
},
beforeDestroy () {
this.player.V = null;
},
vue单页面中使用播放器插件大部分都有这个问题,ccplayer也有相同的问题...
网友评论