美文网首页
Vue中ckplayer 空格播放带来的坑

Vue中ckplayer 空格播放带来的坑

作者: Litchi_015f | 来源:发表于2019-11-26 14:10 被阅读0次

描述:

我们在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也有相同的问题...

相关文章

网友评论

      本文标题:Vue中ckplayer 空格播放带来的坑

      本文链接:https://www.haomeiwen.com/subject/blvewctx.html