H5模式或者移动端真机的场景下，使用腾讯云点播TCPlayer进行播放的时候，需双击视频才可播放、双击视频才可暂停。

原因分析

在移动端跟点击事件相关的问题，需要想到三点

  • 第一：与移动端事件主要有touchstart touchmove touchend touchcancel，跟click有区分，而在移动端，手指点击一个元素，会经过：touchstart –> touchmove –> touchend –> click；
  • 第二：移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟，其原因主要是移动端的双击会缩放导致click判断延迟；
  • 第三：移动端存在点穿问题，发生这种现象的场景主要有两个

    (1)当前页面点击蒙层，蒙层消失，蒙层下的dom的点击事件被触发；
    (2)跨页面的时候，比如页面A,B都有一个按钮，并且在同一个位置，点击页面A，跳转到页面B会触发点击事件；

综上所述的移动端问题，在常规情况下会使用fastclick来进行解决，简单快捷方便，fastclick的基本实现原理则是：拦截了用户的点击事件，阻止了默认事件，最后执行了自己的事件。

fastclick的实现流程

  1. 业务正常使用click绑定事件
  2. 在document.body绑定touchstart和touchend
    touchstart
    用于记录当前点击的元素targetElement；
    touchend
    （1）阻止默认事件（屏蔽之后的click事件）
    （2）合成click事件，并添加可跟踪属性forwardedTouchEvent
    （3）在targetElement上触发click事件
    （4）targetElement上绑定的事件立即执行，完成FastClick
  3. 执行业务自己的click事件

打开腾讯云点播TCPlayer引入的js，不难看出，同时监听了touch和click事件，然后这个流程很显然是跟fastclick的实现流程冲突了。

解决方案

1、删除fastclick的使用
2、下载autilTouch.zip，解压开可以得到directives文件夹和touch.js，拷贝至项目的utils文件夹里面。
3、在main.js下去全局使用

1
2
3
4
import '@/utils/touch'
import directives from '@/utils/directives'
.....
directives.init(Vue)