背景视频同步播放

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: '' });
   });