update

Author: zhangwencong317

WECHAT_FIX.md

@@ -0,0 +1,38 @@
+# 微信浏览器视频播放修复
+
+## 问题
+微信浏览器禁用了视频自动播放功能，导致网页中的视频显示全黑无法播放。
+
+## 解决方案
+已添加微信浏览器检测和点击播放功能。
+
+### 工作原理
+1. **自动检测微信浏览器**：通过 User-Agent 检测
+2. **移除自动播放**：在微信中禁用 autoplay
+3. **显示播放提示**：添加"点击播放"覆盖层
+4. **点击即播**：用户点击视频后开始播放
+
+### 修改的文件
+- `assets/js/main.js` - 添加微信检测和播放逻辑
+- `assets/css/style.css` - 添加播放提示动画
+
+### 功能特性
+✅ 自动检测微信浏览器  
+✅ 显示美观的播放按钮  
+✅ 点击/触摸即可播放  
+✅ 播放后自动隐藏提示  
+✅ 不影响其他浏览器的自动播放  
+✅ 支持页面所有视频  
+
+### 测试方法
+1. 在微信中打开网页
+2. 视频上会显示"▶ 点击播放"提示
+3. 点击视频即可播放
+4. 播放后提示消失
+
+### 备用方案
+如果点击单个视频无效，首次触摸屏幕任意位置会尝试播放所有视频。
+
+---
+
+**完成日期**：2026年2月10日

assets/css/style.css

@@ -1460,6 +1460,30 @@ h1, h2, h3, p, li, .caption, .small {
 
 main .caption { opacity: 1 !important; }
 
+/* ===== WeChat Video Play Hint ===== */
+.wechat-play-hint {
+  transition: opacity 0.3s ease;
+}
+
+.wechat-play-hint:hover {
+  background: rgba(0, 0, 0, 0.75) !important;
+}
+
+.wechat-play-hint .play-icon {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.8;
+  }
+}
+
 @media (max-width: 768px) {
   .hero-overlay .hero-links {
     margin-top: 10px;      /* 可选：按钮离上方稍微留一点 */

assets/js/main.js

@@ -4,6 +4,104 @@ const q = (s, el=document)=>el.querySelector(s);
 const qa = (s, el=document)=>[...el.querySelectorAll(s)];
 const clamp=(x,a,b)=>Math.max(a,Math.min(b,x));
 
+/* ===== WeChat Browser Video Fix ===== */
+// 检测是否是微信浏览器
+function isWeChat(){
+  return /MicroMessenger/i.test(navigator.userAgent);
+}
+
+// 微信浏览器视频播放修复
+function setupWeChatVideoFix(){
+  if(!isWeChat()) return;
+  
+  console.log('WeChat browser detected - setting up video click-to-play');
+  
+  const videos = qa('video');
+  
+  videos.forEach(video => {
+    // 移除自动播放
+    video.removeAttribute('autoplay');
+    video.pause();
+    
+    // 添加播放提示覆盖层
+    const wrapper = video.parentElement;
+    if(!wrapper) return;
+    
+    // 检查是否已经有播放提示
+    if(wrapper.querySelector('.wechat-play-hint')) return;
+    
+    const playHint = document.createElement('div');
+    playHint.className = 'wechat-play-hint';
+    playHint.innerHTML = `
+      <div class="play-icon">▶</div>
+      <div class="play-text">点击播放</div>
+    `;
+    playHint.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.6);
+      color: white;
+      cursor: pointer;
+      z-index: 10;
+      backdrop-filter: blur(4px);
+    `;
+    
+    const playIcon = playHint.querySelector('.play-icon');
+    playIcon.style.cssText = `
+      font-size: 48px;
+      margin-bottom: 8px;
+    `;
+    
+    const playText = playHint.querySelector('.play-text');
+    playText.style.cssText = `
+      font-size: 14px;
+      font-weight: 600;
+    `;
+    
+    // 确保 wrapper 是 relative 定位
+    const wrapperPosition = window.getComputedStyle(wrapper).position;
+    if(wrapperPosition === 'static'){
+      wrapper.style.position = 'relative';
+    }
+    
+    wrapper.appendChild(playHint);
+    
+    // 点击播放
+    const playVideo = () => {
+      video.play().then(() => {
+        playHint.remove();
+      }).catch(err => {
+        console.error('Video play failed:', err);
+      });
+    };
+    
+    playHint.addEventListener('click', playVideo);
+    playHint.addEventListener('touchstart', playVideo);
+  });
+  
+  // 全局触摸事件（备用方案）
+  let hasPlayedAny = false;
+  const globalPlayHandler = () => {
+    if(hasPlayedAny) return;
+    hasPlayedAny = true;
+    
+    videos.forEach(video => {
+      if(video.paused){
+        video.play().catch(() => {});
+      }
+    });
+  };
+  
+  document.addEventListener('touchstart', globalPlayHandler, {once: true, passive: true});
+}
+
 /* Active nav - Enhanced */
 function setupActiveNav(){
   const sections = qa("section[id]");
@@ -538,6 +636,7 @@ window.addEventListener("load", ()=>{
   setupBackToTop();
   setupFadeInAnimations();
   setupActiveNav();
+  setupWeChatVideoFix();
 });
 
 /* ===== Hero video interactions ===== */