前言:一般出现这样的问题是与扩展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
})   最后添加个延时器就好了

 

Logo

前往低代码交流专区

更多推荐