38 lines (29 loc) · 1.1 KB

微信浏览器视频播放修复

问题

微信浏览器禁用了视频自动播放功能，导致网页中的视频显示全黑无法播放。

解决方案

已添加微信浏览器检测和点击播放功能。

工作原理

自动检测微信浏览器：通过 User-Agent 检测
移除自动播放：在微信中禁用 autoplay
显示播放提示：添加"点击播放"覆盖层
点击即播：用户点击视频后开始播放

修改的文件

assets/js/main.js - 添加微信检测和播放逻辑
assets/css/style.css - 添加播放提示动画

功能特性

✅ 自动检测微信浏览器
✅ 显示美观的播放按钮
✅ 点击/触摸即可播放
✅ 播放后自动隐藏提示
✅ 不影响其他浏览器的自动播放
✅ 支持页面所有视频

测试方法

在微信中打开网页
视频上会显示"▶ 点击播放"提示
点击视频即可播放
播放后提示消失

备用方案

如果点击单个视频无效，首次触摸屏幕任意位置会尝试播放所有视频。

完成日期：2026年2月10日