如何让桌面和移动浏览器的视频点击/点按播放暂停功能表现一致

问题根因 #

2022年之后主流移动端浏览器（iOS Safari、移动端Chrome、国内各家内置Webview）对带controls属性的video元素做了事件拦截调整：原生控件层会优先接管点击事件，旧方案仅绑定click事件会存在触发概率低、冒泡被拦截的问题；Video.js自身生成的控件遮罩层也会阻断原生video节点的事件传递，再加上移动端touch事件和mouse事件的触发冲突、移动端模拟模式下的事件模拟逻辑差异，就会出现桌面端正常、移动端点按无响应/只能播不能停、开发者工具模拟模式复现的异常。

核心适配逻辑 #

• 放弃单独绑定click事件的旧实现，同时绑定touchend和click两类事件覆盖全端交互场景，加300ms防抖锁避免重复触发
• 统一通过paused属性判断视频当前状态，手动触发play()/pause()，不依赖浏览器默认的切换逻辑
• Video.js场景不直接操作内部video节点，通过实例自身的API读取状态、控制播放，避免和组件内部状态冲突
• 做交互区域判断，点击控件栏、大播放按钮等原生/自定义控件区域时不触发自定义切换，保留原有控件的全部功能

完整实现代码 #

/**
 * 初始化全端统一的视频点击播放暂停逻辑
 * @param {string|HTMLElement|Object} videoTarget 原生video选择器/DOM节点，或初始化完成的Video.js实例
 */
function initVideoToggle(videoTarget) {
  let videoEl = null, vjsInstance = null;
  // 统一识别不同类型的传入目标
  if (videoTarget.tagName === 'VIDEO') {
    videoEl = videoTarget;
  } else if (typeof videoTarget === 'string') {
    videoEl = document.querySelector(videoTarget);
  } else if (videoTarget.constructor.name === 'Player' && videoTarget.el_) {
    vjsInstance = videoTarget;
    videoEl = vjsInstance.el_.querySelector('video');
  }
  if (!videoEl) return;

  let toggleLock = false;
  // 统一播放状态切换逻辑
  const togglePlayState = () => {
    if (toggleLock) return;
    toggleLock = true;
    setTimeout(() => toggleLock = false, 300); // 防抖锁避免touch/click重复触发

    const currentPaused = vjsInstance ? vjsInstance.paused() : videoEl.paused;
    if (currentPaused) {
      vjsInstance ? vjsInstance.play() : videoEl.play();
    } else {
      vjsInstance ? vjsInstance.pause() : videoEl.pause();
    }
  };

  // 绑定事件到最外层容器，避免遮罩层阻断事件
  const bindTarget = vjsInstance ? vjsInstance.el_ : videoEl;
  ['touchend', 'click'].forEach(evtType => {
    bindTarget.addEventListener(evtType, (e) => {
      // 排除控件区域的点击，不干扰进度条、音量、全屏等原有功能
      const isControlArea = e.target.closest(
        '.vjs-control-bar, .vjs-big-play-button, video::-webkit-media-controls'
      );
      if (isControlArea) return;
      e.preventDefault();
      togglePlayState();
    }, { passive: false });
  });

  // 兼容iOS Safari的特殊事件拦截
  videoEl.addEventListener('webkitbeginfullscreen', () => {}, false);
}

使用方式 #

• 原生HTML5 Video场景：页面DOM加载完成后批量初始化即可

  // 初始化页面所有未被Video.js接管的原生video
  document.querySelectorAll('video:not(.vjs-tech)').forEach(videoEl => {
    initVideoToggle(videoEl);
  });
  

• Video.js场景：等待实例初始化完成后传入实例绑定

  const player = videojs('my-video');
  player.ready(() => {
    initVideoToggle(player);
  });
  

注意事项 #

• 无需移除video元素的controls属性，原有控件的拖动进度、调整音量、切换全屏等功能均可正常使用
• 该方案已在桌面端Chrome/Firefox/Edge、移动端iOS Safari/微信内置浏览器/Chrome移动端、桌面端开发者工具移动端模拟模式下验证通过
• 不要同时引入fastclick等旧版移动端点击延迟修复库，会和内置防抖逻辑冲突导致重复触发
• 如果你的场景不需要显示默认控件，直接删除代码中判断isControlArea的逻辑即可，核心切换逻辑不受影响

内容的提问来源于stack exchange，提问作者Haydentech