嘿，这个问题我太熟了！移动端的视频播放规则和桌面端差挺多的，咱们一步步捋清楚问题出在哪，再搞定它。

首先说核心问题：

• 移动端根本没有mouseover/mouseleave这类鼠标事件，所以你原来的hover播放逻辑在手机上完全不生效
• 现在所有主流移动端浏览器都有自动播放限制——视频不能在没有用户主动交互（比如点击、触摸）的情况下自动播放，除非是静音状态
• iOS还有个特殊坑：默认情况下视频会强制全屏播放，得给视频标签加个属性才能在页面内播放

那咱们来一步步修改，兼顾桌面和移动端：

第一步：给视频标签加必要属性 #

先确保你的<video>标签里加上这几个属性，解决iOS全屏和自动播放限制的问题：

<video src="你的视频地址" muted playsinline controls="false" poster="封面图地址"></video>

• muted：初始静音，满足移动端自动播放的基础条件
• playsinline：让iOS视频在页面内播放，不会强制跳全屏
• controls="false"：隐藏默认播放控件，用咱们自定义的交互逻辑

第二步：修改JS逻辑，兼容触摸和鼠标事件 #

把原来的鼠标事件换成更通用的事件，同时适配移动端的触摸交互：

// 封装通用播放函数
function playVideo(videoEl) {
  videoEl.play();
}

// 封装通用暂停重置函数
function pauseResetVideo(videoEl) {
  videoEl.currentTime = 13;
  videoEl.pause();
}

// 桌面端：鼠标移入播放、移出暂停重置
$(document).on('mouseenter', 'video', function() {
  playVideo(this);
  this.muted = true; // 静音播放，规避桌面端部分浏览器的自动播放限制
});
$(document).on('mouseleave', 'video', function() {
  pauseResetVideo(this);
});

// 移动端+桌面端：点击/触摸触发播放并取消静音
$(document).on('click touchstart', 'video', function(e) {
  e.preventDefault(); // 阻止默认播放行为，避免和自定义逻辑冲突
  if (this.paused) {
    this.muted = false; // 取消静音
    this.currentTime = 0; // 回到视频开头
    playVideo(this);
  }
});

// 提前加载视频元数据，确保能正常控制播放进度
$('video').each(function() {
  this.load();
});

关键细节说明： #

1. 用touchstart替代移动端click：移动端原生click有300ms延迟，touchstart响应更快，同时搭配click兼顾桌面端
2. 初始静音设置：满足移动端自动播放的条件，这样用户交互前可以实现静音预览（如果需要），点击后再取消静音
3. 事件冲突处理：通过e.preventDefault()阻止视频默认的播放行为，避免和自定义逻辑互相干扰

你可以试试这套修改后的代码，应该就能解决移动端点击无法播放的问题了！

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