背景视频同步播放

assets/script.js

@@ -11,6 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // ===== 视频逻辑 =====
   const player = document.getElementById('player');
+  const bgVideo = document.getElementById('bgVideo');
   const videoWrap = document.getElementById('videoWrap');
   const videoPanel = document.getElementById('video');
   const includeLocalToggle = document.getElementById('includeLocalToggle');
@@ -68,7 +69,18 @@ document.addEventListener('DOMContentLoaded', () => {
     if (!playlist.length) return;
     index = (i + playlist.length) % playlist.length;
     const item = playlist[index];
+    try { player.crossOrigin = 'anonymous'; } catch {}
     player.src = item.url;
+    if (bgVideo) {
+      try {
+        bgVideo.muted = true;
+        bgVideo.loop = true;
+        bgVideo.setAttribute('playsinline', '');
+        bgVideo.src = item.url;
+        bgVideo.load();
+        bgVideo.play().catch(() => {});
+      } catch {}
+    }
     // 已移除标题展示，无需设置文本
     player.load();
     if (videoPanel) videoPanel.style.setProperty('--progress', '0');
@@ -186,16 +198,42 @@ document.addEventListener('DOMContentLoaded', () => {
     if (!isFinite(d) || d <= 0) return;
     const p = Math.max(0, Math.min(1, t / d));
     if (videoPanel) videoPanel.style.setProperty('--progress', String(p * 360));
+    if (!bgCtx) return;
+    const now = Date.now();
+    if (now - bgLastUpdate < 1500) return;
+    bgLastUpdate = now;
+    try {
+      bgCtx.drawImage(player, 0, 0, bgCanvas.width, bgCanvas.height);
+      const img = bgCtx.getImageData(0, 0, bgCanvas.width, bgCanvas.height).data;
+      let r = 0, g = 0, b = 0, cnt = 0;
+      for (let i = 0; i < img.length; i += 4) {
+        r += img[i]; g += img[i+1]; b += img[i+2]; cnt++;
+      }
+      if (cnt > 0) {
+        r = Math.round(r / cnt); g = Math.round(g / cnt); b = Math.round(b / cnt);
+        const mix = (c) => Math.round(c * 0.25 + 255 * 0.75);
+        const base = `rgb(${mix(r)},${mix(g)},${mix(b)})`;
+        const accent = `rgba(${r},${g},${b},0.2)`;
+        document.documentElement.style.setProperty('--bg-base', base);
+        document.documentElement.style.setProperty('--bg-accent', accent);
+      }
+    } catch {}
   });
 
   // 播放结束自动下一条
   player.addEventListener('ended', () => { next(); });
+  const bgCanvas = document.createElement('canvas');
+  bgCanvas.width = 32; bgCanvas.height = 18;
+  const bgCtx = bgCanvas.getContext('2d', { willReadFrequently: true });
+  let bgLastUpdate = 0;
+  player.addEventListener('loadeddata', () => { bgLastUpdate = 0; });
 
   let lastLoggedVideo = '';
   player.addEventListener('play', () => {
     const cur = player.currentSrc || player.src || '';
     if (!cur || cur === lastLoggedVideo) return;
     lastLoggedVideo = cur;
+    if (bgVideo) { try { bgVideo.play().catch(() => {}); } catch {} }
     track({ event: 'video_play', page: location.pathname, url: cur, title: '' });
   });
 

assets/style.css

@@ -7,6 +7,8 @@
   --radius: 6px;
   --shadow: 0 6px 14px rgba(226, 38, 38, 0.08);
   --shadow-hover: 0 8px 20px rgba(226, 38, 38, 0.12);
+  --bg-base: #ffffff;
+  --bg-accent: #fff5f5;
 }
 
 * { box-sizing: border-box; }
@@ -17,10 +19,14 @@ body {
     sans-serif;
   color: #333;
   background:
-    radial-gradient(1200px 400px at 10% -20%, #fff5f5 0%, transparent 40%),
-    linear-gradient(#ffffff, #ffffff);
+    radial-gradient(1200px 400px at 10% -20%, var(--bg-accent) 0%, transparent 40%),
+    linear-gradient(var(--bg-base), var(--bg-base));
 }
 
+#bgVideoContainer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
+#bgVideoContainer video { width: 100%; height: 100%; object-fit: cover; filter: blur(36px) saturate(120%) brightness(1.05) contrast(1.05); transform: scale(1.06); opacity: 0.5; }
+.page { position: relative; z-index: 1; }
+
 .page {
   max-width: var(--page-max);
   padding: 16px;
@@ -33,7 +39,7 @@ body {
   top: 0;
   z-index: 100;
   border: var(--border);
-  background: #fff;
+  background: rgba(255,255,255,0.95);
   min-height: 60px;
   padding: 10px 16px;
   display: flex;
@@ -69,7 +75,7 @@ body {
   padding: 8px 14px;
   border-radius: 999px;
   border: 1px solid var(--red);
-  background: #fff;
+  background: rgba(255,255,255,0.92);
   transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
 }
 

index.php

@@ -153,6 +153,7 @@
     </style>
   </head>
   <body>
+    <div id="bgVideoContainer" aria-hidden="true"><video id="bgVideo" muted autoplay loop playsinline></video></div>
     <div class="page">
       <header class="menu">
         <div class="menu__logo">菜单</div>