解决vue-video-player点击暂停/播放时,会触发多次的问题
前言:一般出现这样的问题是与扩展fastclick有关。fastclick主要是用于优化移动端点击延迟300ms的问题。而fastclick会与video.js冲突。vue-video-player是必须引入video.js作为基础条件的。这就导致了一次点击暂停/播放事件,会多次的触发暂停/播放。导致事件覆盖,所以会有点击无效的感觉。解决方法其实很简单,但是大多数是直接修改node_modules
·
前言:一般出现这样的问题是与扩展fastclick有关。fastclick主要是用于优化移动端点击延迟300ms的问题。而fastclick会与video.js冲突。vue-video-player是必须引入video.js作为基础条件的。这就导致了一次点击暂停/播放事件,会多次的触发暂停/播放。导致事件覆盖,所以会有点击无效的感觉。
解决方法其实很简单,但是大多数是直接修改node_modules内的fastclick源码,粗暴而且维护困难。
一、方法
fastclick本身需要在main.js里引入,我们再引入 FastClick
后重写 needsClick
方法,来进行解决
import FastClick from 'fastclick'
FastClick.attach(document.body) // 去掉点击延迟300秒
// 重写FastClick的needsClick方法
var deviceIsWindowsPhone = navigator.userAgent.indexOf('Windows Phone') >= 0
var deviceIsIOS = /iP(ad|hone|od)/.test(navigator.userAgent) && !deviceIsWindowsPhone
FastClick.prototype.needsClick = function (target) {
switch (target.nodeName.toLowerCase()) {
// Don't send a synthetic click to disabled inputs (issue #62)
case 'button':
case 'select':
case 'textarea':
if (target.disabled) {
return true
}
break
case 'input':
// File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
if ((deviceIsIOS && target.type === 'file') || target.disabled) {
return true
}
break
case 'label':
case 'iframe': // iOS8 homescreen apps can prevent events bubbling into frames
case 'video':
return true
}
return (/\bneedsclick\b/).test(target.className) || /\bvjs/.test(target.className)
}
二、注意事项
如果按照上述方法在引入FastClick后重写needsClick方法,但是点击播放/暂停按钮仍然有问题。可能对重写方法中的最后的return进行修改
setTimeout(() => {
return (/\\bneedsclick\\b/).test(target.className) || target.className.indexOf("vjs") != -1
}) 最后添加个延时器就好了
更多推荐
已为社区贡献9条内容
所有评论(0)