📺一班视频网�?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { /* font-family: "YouYuan", "幼圆", "STYuanti", "华文细圆", "Apple LiGothic", sans-serif; */ font-family: sans-serif; /* 使用系统默认字体 */ background: #333; min-height: 100vh; color: white; line-height: 1.6; position: relative; overflow-x: hidden; } body::before { content: ""; position: fixed; top: -5%; left: -5%; width: 110%; height: 110%; z-index: -1; background-size: cover; background-position: center; background-image: var(--bg-image, url('./resource/backgrounds/images/1.png')); transition: opacity 1s ease-in-out, transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform: var(--bg-transform, translate(0, 0)); will-change: transform; opacity: 1; } @keyframes bgFade { 0% { opacity: 0; } 100% { opacity: 1; } } .bg-fade::before { animation: bgFade 1.5s forwards; background-image: var(--bg-image); } .settings-button { position: fixed; top: 20px; right: 20px; background-color: rgba(73, 73, 73, 0.503); padding: 10px; border-radius: 50%; cursor: pointer; z-index: 1000; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 20px; text-decoration: none; color: white; transition: all 0.3s ease; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .settings-button:hover { background-color: rgba(54, 54, 54, 0.4); transform: scale(1.1); } .settings-button:active { transform: scale(0.95) rotate(180deg); transition: all 0.2s ease; } .settings-button.active { transform: rotate(180deg); } .settings-sidebar { position: fixed; top: 0; right: -400px; width: 400px; height: 100vh; background-color: rgba(106, 106, 106, 0.363); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); z-index: 999; transition: right 0.3s ease; padding: 20px; overflow-y: auto; /* 隐藏滚动�?*/ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE �?Edge */ } .settings-sidebar::-webkit-scrollbar { display: none; /* Chrome, Safari �?Opera */ } .settings-sidebar.active { right: 0; } .settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; } .settings-header h2 { margin: 0; color: white; } .setting-item { margin-bottom: 25px; border-radius: 12px; background-color: rgba(40, 40, 40, 0.3); padding: 15px; transition: all 0.3s ease; } .setting-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; } .setting-header h3 { margin: 0; font-size: 16px; color: rgba(255, 255, 255, 0.9); font-weight: 500; display: flex; align-items: center; } .setting-content { max-height: 500px; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; opacity: 1; margin-top: 10px; } .setting-content.collapsed { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; } .toggle-icon { transition: transform 0.3s ease; font-size: 18px; margin-left: 8px; color: rgba(177, 177, 177, 0.95); /* 加深颜色，RGB值共同加40 */ } .toggle-icon.collapsed { transform: rotate(-90deg); } .setting-item label { display: block; margin-bottom: 8px; color: white; font-weight: bold; } .setting-item select, .setting-item input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; background-color: white; } .background-preview { width: 100%; height: 150px; object-fit: cover; margin-top: 10px; border-radius: 8px; } .save-settings { background-color: #4CAF50; color: white; padding: 12px 24px; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-size: 16px; margin-top: 20px; transition: background-color 0.3s; } .save-settings:hover { background-color: #45a049; } .container { max-width: 1200px; margin: 20px auto; padding: 0 20px; } .video-loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: white; padding: 15px 25px; border-radius: 20px; animation: pulse 1.5s infinite; } @keyframes pulse { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } } header { text-align: center; padding: 40px 0; background: linear-gradient(135deg, #ffacc7, #d4f500, 0.6); color: white; border-radius: 0 0 20px 20px; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); position: relative; transition: color 0.3s ease; } header h1 { transition: all 0.3s ease; position: relative; z-index: 10; /* 默认为深色文字，会通过JS动态调�?*/ } /* 为标题添加备用的文字阴影，确保在检测期间也有一定的可读�?*/ header h1.light-bg { color: #333333 !important; /* 亮背景使用深色文�?*/ text-shadow: 0 2px 4px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.5); } header h1.dark-bg { color: #ffffff !important; /* 暗背景使用白色文�?*/ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.3); } .announcement { background: rgba(40, 40, 40, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(8px); border: 2px solid rgba(80, 80, 80, 0.5); color: rgb(255, 255, 255); width: 30%; padding: 12px 16px; margin: 10px auto; border-radius: 25px; font-size: 14px; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-sizing: border-box; display: flex; align-items: center; justify-content: center; /* 添加水平居中 */ gap: 12px; opacity: 1; transform: translateY(0); animation: slideIn 0.5s ease-out; position: relative; /* 为关闭按钮的绝对定位提供参�?*/ text-align: center; /* 确保文本本身也居�?*/ cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .announcement:hover { background: rgba(55, 55, 55, 0.6); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(15px); border-color: rgba(120, 120, 120, 0.7); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } /* 公告中的链接样式 */ .announcement a { color: #66d9ef; text-decoration: underline; transition: all 0.3s ease; font-weight: 500; } .announcement a:hover { color: #00b09b; text-decoration: none; text-shadow: 0 0 8px rgba(102, 217, 239, 0.5); } .close-btn { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 18px; /* 稍微调小字体 */ line-height: 1; color: rgba(255, 255, 255, 0.6); /* 调整颜色以匹配白色文�?*/ cursor: pointer; transition: all 0.3s ease; padding: 4px 8px; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } .close-btn:hover { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.15); transform: translateY(-50%) scale(1.15); } /* 防止关闭按钮的悬浮影响公告栏的悬浮效�?*/ .close-btn:hover + * { pointer-events: none; } .announcement.hide { opacity: 0; transform: translateY(-20px); pointer-events: none; } /* 模式切换�?*/ .mode-switcher { display: flex; justify-content: center; gap: 10px; margin: 20px 0; } .mode-btn { padding: 12px 20px; background: rgba(40, 40, 40, 0.8); /* 改为深色背景 */ backdrop-filter: blur(10px); /* 添加背景模糊 */ -webkit-backdrop-filter: blur(10px); /* Safari兼容 */ border: 2px solid rgba(255, 255, 255, 0.2); /* 调整边框透明�?*/ border-radius: 25px; color: rgba(255, 255, 255, 0.7); /* 调整文字透明�?*/ cursor: pointer; transition: all 0.3s ease; font-size: 14px; font-weight: 500; } .mode-btn:hover { background: rgba(60, 60, 60, 0.9); /* 悬停时稍微亮一�?*/ backdrop-filter: blur(15px); /* 增强模糊效果 */ -webkit-backdrop-filter: blur(15px); border-color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.9); transform: translateY(-2px); } .mode-btn.active { background: linear-gradient(135deg, #00b09b, #96c93d); /* 音频缓存同款配色 */ backdrop-filter: none; /* 移除激活状态的模糊 */ -webkit-backdrop-filter: none; border-color: transparent; color: white; /* 激活状态文字为纯白 */ box-shadow: 0 0 15px rgba(0,176,155,0.3); } /* 背景选择�?*/ .bg-grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; /* 减小间距 */ max-height: 280px; /* 减小高度�?0% */ overflow-y: auto; padding: 12px; background: rgba(0, 0, 0, 0.2); border-radius: 12px; margin-top: 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2); } /* 自定义滚动条样式 */ .bg-grid-container::-webkit-scrollbar { width: 6px; } .bg-grid-container::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 3px; } .bg-grid-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; } .bg-grid-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); } .bg-item { position: relative; aspect-ratio: 2/1; width: 100%; border-radius: 6px; /* 略微减小圆角 */ overflow: hidden; cursor: pointer; border: 1px solid transparent; /* 减小边框宽度 */ transition: all 0.3s ease; } .bg-item:hover { transform: scale(1.02); /* 减小放大效果 */ border-color: rgba(255, 255, 255, 0.5); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); } .bg-item.active { border-color: #00b09b; box-shadow: 0 0 15px rgba(0,176,155,0.5); } .bg-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .bg-item:hover img { transform: scale(1.1); /* 图片悬浮时轻微放�?*/ } .bg-item .bg-name { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px; /* 增加内边�?*/ background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); color: white; font-size: 13px; text-align: center; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(5px); } .bg-item:hover .bg-name { opacity: 1; transform: translateY(0); } /* 面包屑导�?*/ .breadcrumb { display: flex; align-items: center; gap: 10px; margin: 20px 0; color: white; font-size: 14px; } .breadcrumb a { color: rgba(255, 255, 255, 0.8); text-decoration: none; transition: color 0.3s ease; } .breadcrumb a:hover { color: #ff6b6b; } .breadcrumb .separator { color: rgba(255, 255, 255, 0.5); } /* 分类卡片布局 */ .category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 20px; margin: 30px 0; } .category-card { background: rgba(50, 50, 50, 0.45); backdrop-filter: blur(28px); border: 1px solid rgba(100, 100, 100, 0.6); border-radius: 15px; padding: 30px; cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); text-align: center; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); } .category-card:hover { transform: translateY(-10px) scale(1.03); box-shadow: 0 20px 40px rgba(0,0,0,0.4); background: rgba(70, 70, 70, 0.55); backdrop-filter: blur(35px); border-color: rgba(130, 130, 130, 0.8); } .category-card .icon { font-size: 48px; margin-bottom: 15px; display: block; } .category-card h3 { color: white; font-size: 20px; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); } .category-card p { color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 15px; line-height: 1.5; } .category-card .stats { color: rgba(255, 255, 255, 0.6); font-size: 12px; margin-bottom: 10px; } .category-card .latest { color: #ff6b6b; font-size: 12px; font-weight: 500; } /* 视频列表容器 */ .video-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin: 20px 0; } .video-item { background: rgba(80, 80, 80, 0.35); backdrop-filter: blur(48px); -webkit-backdrop-filter: blur(28px); border: 1px solid rgba(120, 120, 120, 0.4); padding: 20px; border-radius: 12px; cursor: pointer; transition: all 0.4s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } /* 浅色背景时的video-item样式 */ .video-item.light-bg { background: rgba(80, 80, 80, 0.35); border: 1px solid rgba(120, 120, 120, 0.4); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } /* 深色背景时的video-item样式 */ .video-item.dark-bg { background: rgba(101, 101, 101, 0.1); border: 1px solid rgba(134, 134, 134, 0.2); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .video-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); background: rgba(50, 50, 50, 0.5); backdrop-filter: blur(82px); -webkit-backdrop-filter: blur(82px); } .video-item.active { background: linear-gradient(135deg, rgba(95, 95, 95, 0.7), rgba(101, 101, 101, 0.在�?)); backdrop-filter: blur(55px); -webkit-backdrop-filter: blur(55px); box-shadow: 0 0 30px rgba(255, 255, 255, 0.83); border: 2px solid rgba(255, 255, 255, 0.3); transform: scale(1.02); } .video-item h3 { color: white; margin-bottom: 10px; font-size: 16px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); } .video-item p { color: rgba(255, 255, 255, 0.8); font-size: 14px; margin-bottom: 15px; line-height: 1.4; } .video-item .meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255, 255, 255, 0.6); } .video-item .duration { background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px; font-weight: bold; } .video-player { width: 100%; max-height: 80vh; /* 设置最大高�?*/ margin: 40px 0; background: rgba(92, 92, 92, 0.5); /* 半透明背景 */ border-radius: 12px; overflow: hidden; box-shadow: 0 5px 20px rgba(211, 211, 211, 0.2); position: relative; display: none; /* 默认隐藏播放�?*/ opacity: 0; transform: translateY(20px); transition: all 0.5s ease; backdrop-filter: blur(32px); /* 添加背景模糊效果 */ } .video-player.show { display: block; opacity: 1; transform: translateY(0); } #mainVideo { width: 100%; height: auto; /* 改为auto，让浏览器自动计算高�?*/ max-height: 80vh; /* 设置最大高�?*/ object-fit: contain; display: block; /* 确保视频元素是块级元�?*/ } .search-box { background: rgba(40, 40, 40, 0.35); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 2px solid rgba(120, 120, 120, 0.5); color: rgba(210, 210, 210, 0.9); width: 50%; padding: 15px 25px; margin: 20px 0; border-radius: 30px; font-size: 16px; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); box-sizing: border-box; outline: none; cursor: text; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); } .search-box:hover { background: rgba(55, 55, 55, 0.55); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); border-color: rgba(150, 150, 150, 0.7); transform: translateY(-3px) scale(1.02); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25); } .search-box:focus, #bgInterval:focus { background: rgba(30, 30, 30, 0.6); outline: none; border-color: rgba(180, 180, 180, 0.8); box-shadow: 0 0 20px rgba(255, 255, 255, 0.15), 0 8px 25px rgba(0, 0, 0, 0.3); transform: translateY(-3px) scale(1.02); } .search-box::placeholder { color: rgba(255, 255, 255, 0.6); } /* 音量滑块样式 */ #soundVolumeSlider { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 8px; background: rgba(255,255,255,0.2); outline: none; transition: all 0.3s ease; } #soundVolumeSlider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #00b09b, #96c93d); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } #soundVolumeSlider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: 0 4px 12px rgba(0, 176, 155, 0.4); } #soundVolumeSlider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, #00b09b, #96c93d); cursor: pointer; border: none; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); transition: all 0.3s ease; } #soundVolumeSlider::-moz-range-thumb:hover { transform: scale(1.2); box-shadow: 0 4px 12px rgba(0, 176, 155, 0.4); } #soundVolumeSlider::-moz-range-track { height: 4px; border-radius: 8px; background: rgba(255,255,255,0.2); border: none; } #soundVolumeSlider:hover { background: rgba(255,255,255,0.3); } /* Ciallo 点击特效样式 */ .ciallo-effect { position: fixed; pointer-events: none; z-index: 9999; font-size: 20px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); animation: cialloSimpleFloat 2s ease-out forwards; user-select: none; } @keyframes cialloSimpleFloat { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-80px); } } /* 视频设置按钮和面板样�?*/ .video-settings-btn { position: absolute; right: 20px; top: 20px; z-index: 10; background: rgba(0, 0, 0, 0.7); color: white; width: 40px; height: 40px; border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: all 0.3s ease; } .video-settings-btn:hover { background: rgba(0, 0, 0, 0.9); transform: scale(1.1); } .video-settings-panel { position: absolute; right: 70px; top: 20px; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); border-radius: 12px; padding: 15px; width: 250px; z-index: 10; display: none; animation: fadeIn 0.2s ease; } .video-settings-panel.show { display: block; } .video-settings-panel h3 { color: white; margin: 0 0 15px 0; font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 8px; } .setting-group { margin-bottom: 15px; } .setting-group:last-child { margin-bottom: 0; } .setting-label { display: block; color: rgba(125, 125, 125, 0.8); margin-bottom: 8px; font-size: 14px; } .quality-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; } .quality-option { flex: 1; min-width: 80px; padding: 8px 12px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; color: rgba(255, 255, 255, 0.8); text-align: center; cursor: pointer; transition: all 0.3s ease; font-size: 13px; user-select: none; } .quality-option:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); } .quality-option.active { background: linear-gradient(135deg, #00b09b, #96c93d); color: white; border-color: transparent; box-shadow: 0 2px 8px rgba(0, 176, 155, 0.3); } .quality-option span { display: block; font-size: 11px; opacity: 0.7; margin-top: 4px; } .download-btn { display: block; width: 100%; padding: 8px; background: linear-gradient(135deg, #00b09b, #96c93d); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.3s ease; } .download-btn:hover { background: linear-gradient(135deg, #009688, #8bc34a); transform: translateY(-1px); } .cache-btn { display: block; width: 100%; padding: 8px; background: linear-gradient(135deg, #00b09b, #96c93d); color: white; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.3s ease; margin-bottom: 5px; } .cache-btn:hover { background: linear-gradient(135deg, #009688, #8bc34a); transform: translateY(-1px); } .cache-btn.cached { background: linear-gradient(135deg, #00b09b, #96c93d); } .cache-btn.cached:hover { background: linear-gradient(135deg, #009688, #8bc34a); } .cache-btn.caching { background: #FF9800; cursor: not-allowed; } .cache-status { font-size: 12px; margin-top: 5px; padding: 2px 8px; border-radius: 4px; text-align: center; } .cache-status.cached { background: rgba(76, 175, 80, 0.1); color: #4CAF50; } .cache-status.caching { background: rgba(255, 152, 0, 0.1); color: #FF9800; } .cache-status.error { background: rgba(244, 67, 54, 0.1); color: #f44336; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateX(-50%) translateY(-30px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } /* 返回按钮 */ .back-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: rgba(50, 50, 50, 0.45); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); border: 1px solid rgba(100, 100, 100, 0.6); border-radius: 20px; color: white; text-decoration: none; cursor: pointer; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .back-btn:hover { background: rgba(70, 70, 70, 0.6); backdrop-filter: blur(35px); -webkit-backdrop-filter: blur(35px); border-color: rgba(130, 130, 130, 0.8); transform: translateX(-5px) translateY(-3px) scale(1.02); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } /* 分类页面标题 */ .category-header { text-align: center; margin: 30px 0; padding: 30px; background: rgba(50, 50, 50, 0.45); border: 1px solid rgba(100, 100, 100, 0.6); border-radius: 15px; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .category-header .icon { font-size: 60px; margin-bottom: 15px; } .category-header h2 { color: white; font-size: 28px; margin-bottom: 10px; text-shadow: 0 2px 4px rgba(0,0,0,0.3); } .category-header p { color: rgba(255, 255, 255, 0.8); font-size: 16px; } .category-header .count { color: #ff6b6b; font-weight: bold; } /* 隐藏/显示状�?*/ .hidden { display: none !important; } /* 隐藏状�?*/ .hidden { display: none !important; } /* 响应式设�?*/ @media (max-width: 768px) { .category-grid { grid-template-columns: 1fr; } .video-items { grid-template-columns: 1fr; } .mode-switcher { flex-wrap: wrap; gap: 8px; } .mode-btn { padding: 10px 16px; font-size: 12px; } .quality-selector { top: 10px; right: 10px; } .search-box { width: 100%; } .breadcrumb { flex-wrap: wrap; } } @media (max-width: 480px) { .category-card { padding: 20px; } .category-card .icon { font-size: 36px; } .category-card h3 { font-size: 18px; } } </style> </head> <body> <header> <h1>📽一班视频�?/h1> <input type="text" class="search-box" id="searchInput" placeholder="🔍 输入关键词搜索视�?> <div class="announcement" id="announcement1"> 📢 公告1：播放视频卡顿，请切换至720p <span class="close-btn" onclick="closeAnnouncement('announcement1')">×</span> </div> <div class="announcement" id="announcement2"> 📢 公告2：此网页可能因服务器迁移，导致视频缺失，如有发现请联系站�? <span class="close-btn" onclick="closeAnnouncement('announcement2')">×</span> </div> <div class="announcement" id="announcement3"> �?重要公告：近期添加功能较多，部分功能可在右上角的设置进行操作，更新记录可�?a href="https://pan.seagullai.xyz/index.php/archives/13" target="_blank" style="color: #66d9ef; text-decoration: underline; white-space: nowrap;">这里查看</a> <span class="close-btn" onclick="closeAnnouncement('announcement3')">×</span> </div> </header> <div class="container">  <div class="mode-switcher"> <button class="mode-btn active" id="tagModeBtn" onclick="switchMode('tag')"> 📂 分类浏览 </button> <button class="mode-btn" id="oldModeBtn" onclick="switchMode('old')"> 📋 全部视频 </button> </div>  <nav class="breadcrumb" id="breadcrumb"> <a href="#" onclick="showCategoryHome()">🏠 首页</a> </nav>  <div id="categoryHome" class="category-grid"> <div style="grid-column: 1/-1; text-align: center; color: white; padding: 40px;"> <div class="video-loading">📺 正在加载分类数据...（若长时间加载不出界面，请刷新界面）</div> </div> </div>  <div id="categoryDetail" class="hidden"> <button class="back-btn" onclick="showCategoryHome()"> �?返回分类 </button> <div class="category-header" id="categoryHeader">  </div> <div class="video-items" id="categoryVideos">  </div> </div>  <div id="oldModeContainer" class="hidden"> <div class="video-items" id="videoItems"> <div style="grid-column: 1/-1; text-align: center; color: white; padding: 40px;"> <div class="video-loading">📺 正在加载视频列表...</div> </div> </div> </div>  <div class="video-player" id="player"> <button class="video-settings-btn" onclick="toggleVideoSettings()">⚙️</button> <div class="video-settings-panel" id="videoSettings"> <h3>视频设置</h3> <div class="setting-group"> <label class="setting-label">画质选择</label> <div class="quality-options" id="qualityOptions"></div> </div> <div class="setting-group"> <label class="setting-label">视频缓存</label> <button class="cache-btn" id="cacheVideoBtn" onclick="cacheCurrentVideo()"> 📥 缓存此视�? </button> <div class="cache-status" id="cacheVideoStatus" style="font-size: 12px; margin-top: 5px; color: #888;"> 检查缓存状�?.. </div> <div class="cache-progress-container" id="cacheProgressContainer" style="display: none; margin-top: 8px;"> <div class="cache-progress-bar" style="width: 100%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; overflow: hidden;"> <div class="cache-progress-fill" id="cacheProgressFill" style="width: 0%; height: 100%; background: linear-gradient(90deg, #00b09b, #96c93d); transition: width 0.3s ease;"></div> </div> <div class="cache-progress-text" id="cacheProgressText" style="font-size: 11px; color: #888; margin-top: 3px; text-align: center;">0%</div> </div> </div> <div class="setting-group"> <label class="setting-label">下载视频</label> <button class="download-btn" onclick="downloadCurrentVideo()"> 📥 下载当前视频 </button> </div> </div> <video controls id="mainVideo"> <source id="videoSource" type="video/mp4"> 您的浏览器不支持视频播放 </video> </div> </div> <script> // 配置管理�?class ConfigManager { static getConfig(key, defaultValue = null) { const value = localStorage.getItem(key); if (value === null) return defaultValue; try { return JSON.parse(value); } catch { return value; } } static setConfig(key, value) { try { localStorage.setItem(key, JSON.stringify(value)); } catch { localStorage.setItem(key, value); } } static getBoolConfig(key, defaultValue = false) { const value = this.getConfig(key); return value === null ? defaultValue : value === 'true' || value === true; } static setBoolConfig(key, value) { this.setConfig(key, Boolean(value)); } } // 全局变量 let videoData = null; let currentVideo = null; let filteredVideos = []; let currentMode = 'tag'; let currentCategory = null; let lastBackground = null; // 添加触摸手势支持 let touchStartX = 0; let touchEndX = 0; // DOM元素缓存 - 性能优化 const domCache = { elements: new Map(), get(id) { if (!this.elements.has(id)) { const element = document.getElementById(id); if (element) { this.elements.set(id, element); } } return this.elements.get(id) || null; }, clear() { this.elements.clear(); }, invalidate(id) { this.elements.delete(id); } }; // 工具函数 - 防抖和节�?const debounce = (func, wait) => { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func.apply(this, args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; }; const throttle = (func, limit) => { let inThrottle; return function(...args) { if (!inThrottle) { func.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; }; // 优化触摸手势支持 let isTouching = false; const handleTouchStart = (e) => { if (e.touches.length === 1) { touchStartX = e.touches[0].screenX; isTouching = true; } }; const handleTouchEnd = (e) => { if (!isTouching || e.changedTouches.length !== 1) return; touchEndX = e.changedTouches[0].screenX; isTouching = false; handleSwipe(); }; // 添加事件监听器（被动监听以提高性能�?document.addEventListener('touchstart', handleTouchStart, { passive: true }); document.addEventListener('touchend', handleTouchEnd, { passive: true }); function handleSwipe() { const swipeThreshold = 50; const diff = touchStartX - touchEndX; if (Math.abs(diff) > swipeThreshold) { if (diff > 0) { // 向左滑动 - 下一个视�? navigateVideo('next'); } else { // 向右滑动 - 上一个视�? navigateVideo('prev'); } } } // 日志记录系统 class AccessLogger { constructor() { this.userIP = 'Unknown'; this.userAgent = navigator.userAgent; this.initLogger(); } async initLogger() { await this.getUserIP(); this.logAccess(); } async getUserIP() { try { // 尝试多种方式获取IP const apis = [ 'https://api.ipify.org?format=json', 'https://ipapi.co/json/', 'https://jsonip.com' ]; for (const api of apis) { try { const response = await fetch(api); const data = await response.json(); this.userIP = data.ip || data.query || 'Unknown'; if (this.userIP !== 'Unknown') break; } catch (e) { continue; } } } catch (error) { console.warn('无法获取IP地址:', error); } } getBrowserInfo() { const ua = navigator.userAgent; let browser = 'Unknown Browser'; if (ua.includes('Chrome') && !ua.includes('Edg')) browser = 'Chrome'; else if (ua.includes('Firefox')) browser = 'Firefox'; else if (ua.includes('Safari') && !ua.includes('Chrome')) browser = 'Safari'; else if (ua.includes('Edg')) browser = 'Edge'; else if (ua.includes('Opera')) browser = 'Opera'; return browser; } logAccess() { const timestamp = new Date().toLocaleString('zh-CN'); const browser = this.getBrowserInfo(); console.log(` 🌟====================================🌟 📅 访问时间: ${timestamp} 🔍 IP地址: 【�?${this.userIP} 🎯�?🌐 浏览�? ${browser} 📱 设备信息: ${navigator.platform} 🖥�?屏幕分辨�? ${screen.width}x${screen.height} 🌟====================================🌟 `); } logVideoPlay(videoTitle) { const timestamp = new Date().toLocaleString('zh-CN'); console.log(` 🎬 视频播放日志 🎬 📅 时间: ${timestamp} 🔍 IP: 【�?${this.userIP} 🎯�?🎥 视频: ${videoTitle} 🌐 浏览�? ${this.getBrowserInfo()} `); } logModeSwitch(mode) { const timestamp = new Date().toLocaleString('zh-CN'); console.log(` 🔄 模式切换日志 🔄 📅 时间: ${timestamp} 🔍 IP: 【�?${this.userIP} 🎯�?📂 切换�? ${mode === 'tag' ? '分类浏览' : '全部视频'} 🌐 浏览�? ${this.getBrowserInfo()} `); } } // 全局日志实例 let accessLogger; // 背景缓存管理�?class BackgroundCacheManager { constructor() { this.cacheName = 'video-web-backgrounds-v1'; this.blobUrlCache = new Map(); // 缓存创建�?blob URL this.initCache(); } // 初始化缓�? async initCache() { try { this.cache = await caches.open(this.cacheName); console.log('背景缓存初始化成�?); } catch (error) { console.warn('Cache API不支持，将使用localStorage缓存:', error); this.fallbackMode = true; } } // 清理所�?blob URL cleanupBlobUrls() { for (const url of this.blobUrlCache.values()) { URL.revokeObjectURL(url); } this.blobUrlCache.clear(); console.log('清理了所�?blob URL'); } // 预缓存所有背景图�?- 优化版本 async preloadAllBackgrounds() { try { console.log('开始预缓存背景图片...'); // 检查内存使用情�? if (performance.memory && performance.memory.usedJSHeapSize > 100 * 1024 * 1024) { console.warn('内存使用过高，延迟缓�?); setTimeout(() => this.preloadAllBackgrounds(), 5000); return; } // 获取背景配置 - 添加超时控制 const timestamp = Date.now(); const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 10000); // 10秒超�? try { const response = await fetch(`./data/backgrounds.json?t=${timestamp}`, { cache: 'no-cache', signal: controller.signal }); clearTimeout(timeoutId); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`); } const bgData = await response.json(); if (!bgData.backgrounds || !Array.isArray(bgData.backgrounds)) { throw new Error('背景配置格式错误'); } // 显示缓存进度 this.showCacheProgress(0, bgData.backgrounds.length); // 减少并发数，避免内存压力和网络拥�? const concurrentLimit = 2; const results = []; let successCount = 0; let failCount = 0; for (let i = 0; i < bgData.backgrounds.length; i += concurrentLimit) { const batch = bgData.backgrounds.slice(i, i + concurrentLimit); const batchPromises = batch.map(bg => this.cacheBackground(bg.file)); try { const batchResults = await Promise.allSettled(batchPromises); results.push(...batchResults); // 统计成功和失败数�? batchResults.forEach(result => { if (result.status === 'fulfilled') { successCount++; } else { failCount++; console.warn('缓存失败:', result.reason); } }); // 更新进度 this.showCacheProgress(i + batch.length, bgData.backgrounds.length); // 增加延迟，减少内存压力和网络压力 if (i + concurrentLimit < bgData.backgrounds.length) { await new Promise(resolve => setTimeout(resolve, 300)); } } catch (error) { console.error('批次缓存失败:', error); failCount += batch.length; } } console.log(`背景缓存完成: 成功${successCount}�? 失败${failCount}个`); } catch (error) { clearTimeout(timeoutId); throw error; } console.log(`背景缓存完成: 成功${successCount}�? 失败${failCount}个`); this.hideCacheProgress(); // 保存缓存状�?- 确保时间戳是字符�? localStorage.setItem('backgroundsCached', Date.now().toString()); localStorage.setItem('backgroundsCacheVersion', '1.0'); console.log('已保存缓存时间戳:', Date.now()); } catch (error) { console.error('预缓存背景失�?', error); this.hideCacheProgress(); } } // 缓存单个背景图片 async cacheBackground(filename) { const imageUrl = `background/${filename}`; if (this.fallbackMode) { // 使用图片预加载作为备用方�? return this.preloadImage(imageUrl); } try { // 检查是否已缓存 const cachedResponse = await this.cache.match(imageUrl); if (cachedResponse) { console.log(`背景 ${filename} 已在缓存中`); return imageUrl; } // 下载并缓�? const response = await fetch(imageUrl); if (response.ok) { await this.cache.put(imageUrl, response.clone()); console.log(`背景 ${filename} 缓存成功`); return imageUrl; } else { throw new Error(`HTTP ${response.status}`); } } catch (error) { console.warn(`缓存背景 ${filename} 失败:`, error); // 回退到直接预加载 return this.preloadImage(imageUrl); } } // 备用图片预加载方�? preloadImage(imageUrl) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => resolve(imageUrl); img.onerror = reject; img.src = imageUrl; }); } // 获取缓存的背景图�? async getCachedBackground(filename) { const imageUrl = `background/${filename}`; // 检查缓存是否开�? const cacheEnabled = localStorage.getItem('backgroundCacheEnabled') !== 'false'; if (!cacheEnabled || this.fallbackMode) { return imageUrl; } // 检查是否已�?blob URL 缓存 if (this.blobUrlCache.has(filename)) { return this.blobUrlCache.get(filename); } try { const cachedResponse = await this.cache.match(imageUrl); if (cachedResponse) { const blob = await cachedResponse.blob(); const blobUrl = URL.createObjectURL(blob); // 缓存 blob URL，避免重复创�? this.blobUrlCache.set(filename, blobUrl); return blobUrl; } } catch (error) { console.warn(`获取缓存背景失败:`, error); } // 如果缓存中没有，返回原始URL return imageUrl; } // 显示缓存进度 - 优化版本 showCacheProgress(current, total) { let progressDiv = domCache.get('cacheProgress'); if (!progressDiv) { progressDiv = document.createElement('div'); progressDiv.id = 'cacheProgress'; progressDiv.style.cssText = ` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(101, 101, 101, 0.1); backdrop-filter: blur(48px); -webkit-backdrop-filter: blur(28px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); color: white; padding: 20px 30px; z-index: 10000; text-align: center; min-width: 250px; transition: all 0.4s ease; `; document.body.appendChild(progressDiv); domCache.elements.set('cacheProgress', progressDiv); } const percentage = Math.round((current / total) * 100); progressDiv.innerHTML = ` <div style="margin-bottom: 10px; font-size: 16px; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">🖼�?缓存背景图片�?..</div> <div style="margin-bottom: 10px; color: rgba(255, 255, 255, 0.8); font-size: 14px;">${current}/${total} (${percentage}%)</div> <div style="width: 200px; height: 6px; background: rgba(255,255,255,0.2); border-radius: 3px; overflow: hidden;"> <div style="width: ${percentage}%; height: 100%; background: linear-gradient(90deg, #00b09b, #96c93d); transition: width 0.3s ease;"></div> </div> `; } // 隐藏缓存进度 - 优化版本 hideCacheProgress() { const progressDiv = domCache.get('cacheProgress'); if (progressDiv) { progressDiv.style.opacity = '0'; setTimeout(() => { if (progressDiv.parentNode) { progressDiv.parentNode.removeChild(progressDiv); } domCache.invalidate('cacheProgress'); }, 300); } } // 检查是否需要更新缓�? needsCacheUpdate() { // 如果缓存未开启，不需要更�? const cacheEnabled = localStorage.getItem('backgroundCacheEnabled') !== 'false'; if (!cacheEnabled) { return false; } // 检查内存使用情况，如果blob URL过多则需要清�? if (this.blobUrlCache && this.blobUrlCache.size > 15) { console.log('检测到缓存对象过多，建议清�?); return false; // 暂不更新，避免加重内存负�? } const lastCached = localStorage.getItem('backgroundsCached'); const cacheVersion = localStorage.getItem('backgroundsCacheVersion'); const currentVersion = '1.0'; // 如果没有缓存记录或版本不匹配，需要更�? if (!lastCached || cacheVersion !== currentVersion) { return true; } // 如果缓存超过7天，也更�? const cacheAge = Date.now() - parseInt(lastCached); const sevenDays = 7 * 24 * 60 * 60 * 1000; return cacheAge > sevenDays; } // 清理旧缓�? async clearOldCache() { try { const cacheNames = await caches.keys(); const oldCaches = cacheNames.filter(name => name.startsWith('video-web-backgrounds-') && name !== this.cacheName ); await Promise.all(oldCaches.map(name => caches.delete(name))); console.log('清理旧缓存完�?); } catch (error) { console.warn('清理旧缓存失�?', error); } } } // 视频缓存管理�?- 类似背景缓存的实�?class VideoCacheManager { constructor() { this.cacheName = 'video-web-videos-v1'; this.blobUrlCache = new Map(); // 缓存创建�?blob URL this.cacheEnabled = localStorage.getItem('videoCacheEnabled') !== 'false'; this.maxCacheSize = 1000 * 1024 * 1024; // 1GB 最大缓存大�? this.initCache(); } // 初始化缓�? async initCache() { try { this.cache = await caches.open(this.cacheName); console.log('视频缓存初始化成�?); } catch (error) { console.warn('Cache API不支持，视频缓存将使用浏览器默认缓存:', error); this.fallbackMode = true; } } // 清理所�?blob URL cleanupBlobUrls() { for (const url of this.blobUrlCache.values()) { URL.revokeObjectURL(url); } this.blobUrlCache.clear(); console.log('清理了所有视�?blob URL'); } // 缓存指定的单个视�? async cacheSpecificVideo(filename, onProgress) { if (!this.cacheEnabled || this.fallbackMode) { throw new Error('视频缓存未开启或不支�?); } try { console.log(`开始缓存视�? ${filename}`); console.log('缓存参数:', { filename, cacheEnabled: this.cacheEnabled, fallbackMode: this.fallbackMode }); // 检查是否已缓存 const isAlreadyCached = await this.isVideoCached(filename); if (isAlreadyCached) { console.log(`视频 ${filename} 已在缓存中`); return { success: true, message: '视频已缓�? }; } // 检查缓存大小限�? const currentSize = await this.getCacheSize(); if (currentSize > this.maxCacheSize) { console.warn('视频缓存已达到大小限制，清理旧缓�?); await this.clearOldestVideos(); } // 下载并缓存视频（带进度回调） await this.cacheVideo(filename, onProgress); console.log(`视频 ${filename} 缓存成功`); return { success: true, message: '视频缓存成功' }; } catch (error) { console.error(`缓存视频失败: ${filename}`, error); // 提供更详细的错误信息 let errorMessage = error.message; if (error.message.includes('404')) { errorMessage = `HTTP 404: 找不到视频文�?"${filename}"`; } else if (error.message.includes('403')) { errorMessage = `HTTP 403: 访问视频文件 "${filename}" 被拒绝`; } else if (error.message.includes('所有备用URL都无法访�?)) { errorMessage = `无法访问视频文件 "${filename}"，请检查文件路径`; } return { success: false, message: errorMessage }; } } // 检查视频是否已缓存 async isVideoCached(filename) { if (!this.cacheEnabled || this.fallbackMode) { return false; } // 为服务器环境提供多个备用路径 const alternativeUrls = [ `./resource/resource/videos/${encodeURIComponent(filename)}`, `videos/${encodeURIComponent(filename)}`, `./resource/resource/videos/${filename}`, `videos/${filename}` ]; try { // 检查任一URL是否已缓�? for (const videoUrl of alternativeUrls) { const cachedResponse = await this.cache.match(videoUrl); if (cachedResponse) { console.log(`视频 ${filename} 已缓存，URL: ${videoUrl}`); return true; } } return false; } catch (error) { console.warn(`检查视频缓存状态失�? ${filename}`, error); return false; } } // 移除指定视频的缓�? async removeCachedVideo(filename) { if (!this.cacheEnabled || this.fallbackMode) { return false; } // 为服务器环境提供多个备用路径 const alternativeUrls = [ `./resource/resource/videos/${encodeURIComponent(filename)}`, `videos/${encodeURIComponent(filename)}`, `./resource/resource/videos/${filename}`, `videos/${filename}` ]; try { // 清理对应�?blob URL if (this.blobUrlCache.has(filename)) { URL.revokeObjectURL(this.blobUrlCache.get(filename)); this.blobUrlCache.delete(filename); } // 尝试从所有可能的URL中删除缓�? let deleteSuccess = false; for (const videoUrl of alternativeUrls) { try { const success = await this.cache.delete(videoUrl); if (success) { console.log(`视频 ${filename} 缓存已删除，URL: ${videoUrl}`); deleteSuccess = true; } } catch (deleteError) { console.warn(`删除URL ${videoUrl} 的缓存失�?`, deleteError); } } return deleteSuccess; } catch (error) { console.warn(`删除视频缓存失败: ${filename}`, error); return false; } } // 预缓存热门视�?- 已废弃，改为手动缓存 // 预缓存热门视�?- 已废弃，改为手动缓存 async preloadPopularVideos() { // 这个功能已被移除，现在用户需要手动缓存视�? console.warn('自动预缓存功能已废弃，请使用播放器中的缓存按钮手动缓存视�?); throw new Error('请在播放器中手动缓存您想要的视频'); } // 缓存单个视频 async cacheVideo(filename, onProgress) { if (!this.cacheEnabled || this.fallbackMode) { console.log('视频缓存未开启，跳过缓存:', filename); return; } // 为服务器环境提供多个备用路径 const alternativeUrls = [ `./resource/resource/videos/${encodeURIComponent(filename)}`, `videos/${encodeURIComponent(filename)}`, `./resource/resource/videos/${filename}`, `videos/${filename}` ]; let videoUrl = alternativeUrls[0]; // 默认使用第一�? let workingUrl = null; try { // 检查是否已缓存（检查所有可能的URL�? for (const url of alternativeUrls) { const cachedResponse = await this.cache.match(url); if (cachedResponse) { console.log(`视频 ${filename} 已在缓存中，使用URL: ${url}`); return url; } } // 检查缓存大小限�? const currentSize = await this.getCacheSize(); if (currentSize > this.maxCacheSize) { console.warn('视频缓存已达到大小限制，清理旧缓�?); await this.clearOldestVideos(); } // 尝试找到可工作的URL console.log(`开始寻找可访问的视频URL: ${filename}`); for (const url of alternativeUrls) { try { console.log(`测试URL: ${url}`); const testResponse = await fetch(url, { method: 'HEAD', cache: 'no-cache', mode: 'cors', credentials: 'same-origin' }); if (testResponse.ok) { console.log(`找到可访问的URL: ${url}`); workingUrl = url; videoUrl = url; break; } } catch (testError) { console.warn(`URL ${url} 测试失败:`, testError.message); continue; } } if (!workingUrl) { throw new Error(`所有备用URL都无法访问视频文�? ${filename}`); } // 下载并缓存视频（带进度监控） console.log(`开始下载视�? ${filename}，使用URL: ${videoUrl}`); const response = await fetch(videoUrl); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`); } // 获取文件总大�? const contentLength = response.headers.get('content-length'); const total = contentLength ? parseInt(contentLength, 10) : 0; if (total > 0 && onProgress) { // 使用ReadableStream来监控进�? const reader = response.body.getReader(); const chunks = []; let loaded = 0; while (true) { const { done, value } = await reader.read(); if (done) break; chunks.push(value); loaded += value.length; // 计算进度百分�? const progress = Math.round((loaded / total) * 100); onProgress(progress, loaded, total); } // 重新构建Response对象 const blob = new Blob(chunks); const clonedResponse = new Response(blob, { status: response.status, statusText: response.statusText, headers: response.headers }); await this.cache.put(videoUrl, clonedResponse); } else { // 没有进度监控时使用原方法 await this.cache.put(videoUrl, response.clone()); } console.log(`视频 ${filename} 缓存成功`); return videoUrl; } catch (error) { console.warn(`缓存视频 ${filename} 失败:`, error); throw error; } } // 获取缓存的视�? async getCachedVideo(filename) { if (!this.cacheEnabled || this.fallbackMode) { return `./resource/resource/videos/${filename}`; } // 为服务器环境提供多个备用路径 const alternativeUrls = [ `./resource/resource/videos/${encodeURIComponent(filename)}`, `videos/${encodeURIComponent(filename)}`, `./resource/resource/videos/${filename}`, `videos/${filename}` ]; try { // 尝试匹配缓存中的任一URL for (const videoUrl of alternativeUrls) { const cachedResponse = await this.cache.match(videoUrl); if (cachedResponse) { // 创建 blob URL const blob = await cachedResponse.blob(); let blobUrl = this.blobUrlCache.get(filename); if (!blobUrl) { blobUrl = URL.createObjectURL(blob); this.blobUrlCache.set(filename, blobUrl); } console.log(`使用缓存视频: ${filename}，原URL: ${videoUrl}`); return blobUrl; } } } catch (error) { console.warn(`获取缓存视频失败: ${filename}`, error); } // 回退到原始URL（使用第一个备用路径） return alternativeUrls[0]; } // 获取视频列表 async getVideoList() { try { const timestamp = Date.now(); const response = await fetch(`./data/videos.json?t=${timestamp}`, { cache: 'no-cache' }); if (!response.ok) { throw new Error(`HTTP ${response.status}: ${response.statusText}`); } return await response.json(); } catch (error) { console.error('获取视频列表失败:', error); return null; } } // 显示视频缓存进度 showVideoCacheProgress(current, total) { const statusDiv = document.getElementById('videoCacheUsage'); if (statusDiv) { const percentage = Math.round((current / total) * 100); statusDiv.textContent = `缓存进度: ${current}/${total} (${percentage}%)`; statusDiv.style.color = 'rgba(255, 193, 7, 0.8)'; } } // 隐藏视频缓存进度 hideVideoCacheProgress() { const statusDiv = document.getElementById('videoCacheUsage'); if (statusDiv) { this.updateVideoCacheStatus(); } } // 更新视频缓存状态显�? async updateVideoCacheStatus() { const statusDiv = document.getElementById('videoCacheUsage'); if (!statusDiv) return; try { if (!this.cacheEnabled) { statusDiv.textContent = '视频缓存未开�?; statusDiv.style.color = 'rgba(255, 255, 255, 0.6)'; return; } const [videoCount, cacheSize] = await Promise.all([ this.getVideoCacheCount(), this.getCacheSize() ]); if (videoCount > 0) { const sizeMB = Math.round(cacheSize / 1024 / 1024); statusDiv.textContent = `已缓�?${videoCount} 个视�?| ${sizeMB}MB`; statusDiv.style.color = 'rgba(76, 175, 80, 0.8)'; } else { statusDiv.textContent = '暂无视频缓存'; statusDiv.style.color = 'rgba(255, 255, 255, 0.6)'; } } catch (error) { console.warn('更新视频缓存状态失�?', error); statusDiv.textContent = '缓存状态检查失�?; statusDiv.style.color = 'rgba(255, 87, 87, 0.8)'; } } // 获取视频缓存数量 async getVideoCacheCount() { if (this.fallbackMode || !this.cache) return 0; try { const requests = await this.cache.keys(); return requests.filter(req => req.url.includes('/resource/videos/')).length; } catch (error) { console.warn('获取视频缓存数量失败:', error); return 0; } } // 估算缓存大小（字节） async getCacheSize() { if (this.fallbackMode || !this.cache) return 0; try { const requests = await this.cache.keys(); const videoRequests = requests.filter(req => req.url.includes('/resource/videos/')); // 估算：每个视频平�?0MB return videoRequests.length * 50 * 1024 * 1024; } catch (error) { console.warn('估算视频缓存大小失败:', error); return 0; } } // 清除所有视频缓�? async clearAllVideoCache() { try { // 清理 blob URLs this.cleanupBlobUrls(); // 清除 Cache API 中的视频缓存 if (!this.fallbackMode && this.cache) { const requests = await this.cache.keys(); const videoRequests = requests.filter(req => req.url.includes('/resource/videos/')); await Promise.all(videoRequests.map(req => this.cache.delete(req))); console.log(`清除�?${videoRequests.length} 个视频缓存`); } // 清除相关 localStorage localStorage.removeItem('videosCached'); localStorage.removeItem('videosCacheVersion'); console.log('视频缓存清除完成'); return true; } catch (error) { console.error('清除视频缓存失败:', error); return false; } } // 清理最旧的视频缓存 async clearOldestVideos() { if (this.fallbackMode || !this.cache) return; try { const requests = await this.cache.keys(); const videoRequests = requests.filter(req => req.url.includes('/resource/videos/')); // 删除�?个视频缓�? const toDelete = videoRequests.slice(0, 5); await Promise.all(toDelete.map(req => this.cache.delete(req))); console.log(`清理�?${toDelete.length} 个旧视频缓存`); } catch (error) { console.warn('清理旧视频缓存失�?', error); } } // 切换视频缓存开�? toggleVideoCache() { this.cacheEnabled = !this.cacheEnabled; localStorage.setItem('videoCacheEnabled', this.cacheEnabled.toString()); console.log('视频缓存状态已切换�?', this.cacheEnabled ? '开�? : '关闭'); this.updateVideoCacheStatus(); return this.cacheEnabled; } } // 创建全局缓存管理器实�?let backgroundCache; let videoCache; // 背景亮度检测和文字颜色调整 class BackgroundBrightnessDetector { constructor() { this.canvas = document.createElement('canvas'); this.ctx = this.canvas.getContext('2d'); this.headerTitle = null; // 先设为null，后面动态获�? this.isDetecting = false; this.lastDetectedBrightness = null; // 设置canvas尺寸（小尺寸足够检测亮度） this.canvas.width = 100; this.canvas.height = 100; console.log('BackgroundBrightnessDetector 初始化完�?); } // 获取标题元素（动态获取以确保DOM已加载） getHeaderTitle() { if (!this.headerTitle) { this.headerTitle = document.querySelector('header h1'); if (this.headerTitle) { console.log('成功获取标题元素'); } else { console.warn('未找到标题元�?header h1'); } } return this.headerTitle; } // 从图片URL获取亮度 async detectBrightnessFromUrl(imageUrl) { if (this.isDetecting) return this.lastDetectedBrightness; try { this.isDetecting = true; return new Promise((resolve, reject) => { const img = new Image(); img.crossOrigin = 'anonymous'; // 处理跨域问题 img.onload = () => { try { // 清空画布 this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); // 绘制图片到画布（缩放到canvas尺寸�? this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height); // 获取图像数据 const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height); const data = imageData.data; // 计算平均亮度 let totalBrightness = 0; let pixelCount = 0; // 采样检测，提高性能（每�?个像素采样一次） for (let i = 0; i < data.length; i += 16) { // 每个像素4个�?RGBA)，每�?个像素采�? const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; const alpha = data[i + 3]; if (alpha > 0) { // 忽略透明像素 // 使用相对亮度公式（考虑人眼对不同颜色的敏感度） const brightness = (0.299 * r + 0.587 * g + 0.114 * b); totalBrightness += brightness; pixelCount++; } } const averageBrightness = pixelCount > 0 ? totalBrightness / pixelCount : 128; this.lastDetectedBrightness = averageBrightness; console.log(`背景亮度检�? ${averageBrightness.toFixed(2)} (0=最�? 255=最�?`); resolve(averageBrightness); } catch (error) { console.warn('亮度检测失�?', error); resolve(128); // 返回中等亮度作为默认�? } finally { this.isDetecting = false; } }; img.onerror = () => { console.warn('图片加载失败，使用默认亮�?); this.isDetecting = false; resolve(128); }; // 处理blob URL和普通URL if (imageUrl.startsWith('blob:')) { img.src = imageUrl; } else { // 为普通URL添加时间戳避免缓存问�? img.src = `${imageUrl}?t=${Date.now()}`; } }); } catch (error) { console.warn('亮度检测过程出�?', error); this.isDetecting = false; return 128; // 返回中等亮度 } } // 根据亮度调整文字颜色和video-item样式 adjustTextColor(brightness) { const headerTitle = this.getHeaderTitle(); if (!headerTitle) { console.warn('无法获取标题元素，跳过亮度调�?); return; } // 亮度阈值：100为分界点（可以根据实际效果调整） const threshold = 100; const isDark = brightness <= threshold; // 移除之前的类 headerTitle.classList.remove('light-bg', 'dark-bg'); // 获取所有video-item元素 const videoItems = document.querySelectorAll('.video-item'); if (isDark) { // 暗背景使用白色文�? headerTitle.classList.add('dark-bg'); // video-item使用原来较浅的样�? videoItems.forEach(item => { item.classList.remove('light-bg'); item.classList.add('dark-bg'); }); console.log('应用暗背景样�?- 白色文字和浅色video-item，亮度�?', brightness.toFixed(2)); } else { // 亮背景使用深色文�? headerTitle.classList.add('light-bg'); // video-item使用现在较深的样�? videoItems.forEach(item => { item.classList.remove('dark-bg'); item.classList.add('light-bg'); }); console.log('应用亮背景样�?- 深色文字和深色video-item，亮度�?', brightness.toFixed(2)); } } // 检测并调整文字颜色（主要方法） async detectAndAdjust(imageUrl) { try { console.log('开始检测背景亮�?', imageUrl); const brightness = await this.detectBrightnessFromUrl(imageUrl); this.adjustTextColor(brightness); return brightness; } catch (error) { console.warn('文字颜色调整失败:', error); // 失败时应用安全的样式（白色文�?阴影�? const headerTitle = this.getHeaderTitle(); if (headerTitle) { headerTitle.classList.remove('light-bg'); headerTitle.classList.add('dark-bg'); console.log('应用默认样式（深色背景风格）'); } } } } // 创建全局亮度检测器实例 let brightnessDetector; // 音效管理器类 class SoundEffectManager { constructor() { this.cacheName = 'video-web-sounds-v1'; this.audioContext = null; this.soundBuffers = new Map(); // 缓存解码后的音频数据 this.enabled = ConfigManager.getBoolConfig('soundEffectsEnabled', true); // 默认开�? this.volume = ConfigManager.getConfig('soundEffectsVolume', 0.8); // 默认音量 80% this.fallbackMode = false; this.initCache(); } // 初始化缓�? async initCache() { try { this.cache = await caches.open(this.cacheName); console.log('音效缓存初始化成�?); } catch (error) { console.warn('音效缓存API不支�?', error); this.fallbackMode = true; } } // 初始化音频上下文（需要用户交互） initAudioContext() { if (!this.audioContext) { try { this.audioContext = new (window.AudioContext || window.webkitAudioContext)(); console.log('音频上下文初始化成功'); return true; } catch (error) { console.warn('音频上下文初始化失败:', error); return false; } } return true; } // 预加载并缓存音效 async preloadSound(soundName, soundUrl) { try { if (!this.fallbackMode) { // 检查是否已缓存 const cachedResponse = await this.cache.match(soundUrl); if (!cachedResponse) { // 下载并缓�? const response = await fetch(soundUrl); if (response.ok) { await this.cache.put(soundUrl, response.clone()); console.log(`音效 ${soundName} 缓存成功`); } } else { console.log(`音效 ${soundName} 已在缓存中`); } // 如果音频上下文已初始化，预解码音�? if (this.audioContext && !this.soundBuffers.has(soundName)) { const audioData = await (cachedResponse || await fetch(soundUrl)).arrayBuffer(); const audioBuffer = await this.audioContext.decodeAudioData(audioData); this.soundBuffers.set(soundName, audioBuffer); console.log(`音效 ${soundName} 解码成功`); } } return true; } catch (error) { console.warn(`预加载音�?${soundName} 失败:`, error); return false; } } // 播放音效 async playSound(soundName, soundUrl, volume = null) { if (!this.enabled) return false; // 如果没有指定音量，使用管理器设置的音�? const finalVolume = volume !== null ? volume : this.volume; // 首次播放时初始化音频上下�? if (!this.initAudioContext()) { return this.playFallbackSound(soundUrl, finalVolume); } try { // 如果还没有缓存，尝试加载 if (!this.soundBuffers.has(soundName)) { let audioData; if (!this.fallbackMode) { // 尝试从缓存获�? const cachedResponse = await this.cache.match(soundUrl); if (cachedResponse) { audioData = await cachedResponse.arrayBuffer(); } else { // 如果缓存中没有，直接获取 const response = await fetch(soundUrl); if (!response.ok) throw new Error(`获取音效失败: ${response.status}`); audioData = await response.arrayBuffer(); // 顺便缓存起来 await this.cache.put(soundUrl, response.clone()); } } else { // 回退模式直接获取 const response = await fetch(soundUrl); if (!response.ok) throw new Error(`获取音效失败: ${response.status}`); audioData = await response.arrayBuffer(); } // 解码音频 const audioBuffer = await this.audioContext.decodeAudioData(audioData); this.soundBuffers.set(soundName, audioBuffer); } // 获取缓存的音频数�? const buffer = this.soundBuffers.get(soundName); // 创建音源和音量节�? const source = this.audioContext.createBufferSource(); const gainNode = this.audioContext.createGain(); // 设置音频数据和音�? source.buffer = buffer; gainNode.gain.value = finalVolume; // 连接节点 source.connect(gainNode); gainNode.connect(this.audioContext.destination); // 播放 source.start(0); return true; } catch (error) { console.warn(`高级音效播放失败 ${soundName}:`, error); return this.playFallbackSound(soundUrl, finalVolume); } } // 备用播放方法 playFallbackSound(soundUrl, volume = 1.0) { try { const audio = new Audio(soundUrl); audio.volume = volume; audio.play(); return true; } catch (error) { console.error(`备用音效播放也失�?`, error); return false; } } // 设置是否启用音效 setEnabled(enabled) { this.enabled = enabled; ConfigManager.setBoolConfig('soundEffectsEnabled', enabled); } // 设置音效音量 setVolume(volume) { // 确保音量�?0-1 范围�? this.volume = Math.max(0, Math.min(1, volume)); ConfigManager.setConfig('soundEffectsVolume', this.volume); console.log('音效音量已设置为:', this.volume); } // 获取当前音量 getVolume() { return this.volume; } // 清理缓存 async clearCache() { try { this.soundBuffers.clear(); if (!this.fallbackMode) { await caches.delete(this.cacheName); this.cache = await caches.open(this.cacheName); } console.log('音效缓存已清�?); return true; } catch (error) { console.error('清理音效缓存失败:', error); return false; } } } // Ciallo 点击特效管理器类 class CialloEffectManager { constructor() { this.enabled = ConfigManager.getBoolConfig('cialloEffectEnabled', true); // 默认开�? this.textVariants = [ 'Ciallo�?∠・ω< )⌒★' ]; this.colors = [ '#FF6B6B', // 红色 '#4ECDC4', // 青色 '#45B7D1', // 蓝色 '#96CEB4', // 绿色 '#FFEAA7', // 黄色 '#DDA0DD', // 紫色 '#FFB347', // 橙色 '#FF69B4', // 粉色 '#87CEEB', // 天蓝�? '#98FB98' // 浅绿�? ]; console.log('Ciallo 特效管理器初始化完成'); } // 设置是否启用特效 setEnabled(enabled) { this.enabled = enabled; ConfigManager.setBoolConfig('cialloEffectEnabled', enabled); console.log('Ciallo 特效状态已切换�?', enabled ? '开�? : '关闭'); } // 获取是否启用 isEnabled() { return this.enabled; } // 创建特效元素 createEffect(x, y) { if (!this.enabled) return; // 随机选择文本和颜�? const textVariant = this.textVariants[Math.floor(Math.random() * this.textVariants.length)]; const randomColor = this.colors[Math.floor(Math.random() * this.colors.length)]; // 创建特效元素 const effect = document.createElement('div'); effect.className = 'ciallo-effect'; effect.textContent = textVariant; effect.style.color = randomColor; // 设置位置 effect.style.left = `${x}px`; effect.style.top = `${y}px`; // 添加到页�? document.body.appendChild(effect); // 动画结束后移除元�? setTimeout(() => { if (effect.parentNode) { effect.parentNode.removeChild(effect); } }, 2000); } // 处理点击事件 handleClick(event) { if (!this.enabled) return; // 获取点击位置 const x = event.clientX; const y = event.clientY; // 创建特效 this.createEffect(x, y); } } // 全局音效管理器实�?let soundEffectManager; // 全局 Ciallo 特效管理器实�?let cialloEffectManager; // 初始化点击效果系�?function initializeSoundEffects() { soundEffectManager = new SoundEffectManager(); cialloEffectManager = new CialloEffectManager(); // 预加载点击音�? soundEffectManager.preloadSound('click', './resource/backgrounds/audio/ciallo.mp3'); // 添加全局点击事件监听 document.addEventListener('click', function(event) { // 检查点击的是否是特效相关的按钮，如果是则不播放音效和特效（避免重复播放�? const clickedElement = event.target; // 排除点击效果相关的按钮和控件 if (clickedElement.id === 'soundToggle' || clickedElement.id === 'cialloToggle' || clickedElement.id === 'soundVolumeSlider' || clickedElement.onclick && clickedElement.onclick.toString().includes('toggleSoundEffects') || clickedElement.onclick && clickedElement.onclick.toString().includes('toggleCialloEffect') || clickedElement.onclick && clickedElement.onclick.toString().includes('preloadSoundEffects') || clickedElement.onclick && clickedElement.onclick.toString().includes('clearSoundCache') || clickedElement.oninput && clickedElement.oninput.toString().includes('updateSoundVolume')) { return; } // 排除点击效果按钮的父容器 const soundControls = document.getElementById('soundControls'); if (soundControls && soundControls.contains(clickedElement)) { return; } // 播放点击音效 soundEffectManager.playSound('click', './resource/backgrounds/audio/ciallo.mp3'); // 显示 Ciallo 特效 if (cialloEffectManager) { cialloEffectManager.handleClick(event); } }, { passive: true }); } // 切换音效开�?window.toggleSoundEffects = function() { if (!soundEffectManager) return; const enabled = !soundEffectManager.enabled; soundEffectManager.setEnabled(enabled); updateSoundToggleUI(); updateSoundStatus(); // 如果开启，播放测试音效 if (enabled) { setTimeout(() => { soundEffectManager.playSound('click', './resource/backgrounds/audio/ciallo.mp3'); }, 100); } }; // 更新音效开关UI function updateSoundToggleUI() { const toggle = document.getElementById('soundToggle'); if (!toggle || !soundEffectManager) return; if (soundEffectManager.enabled) { toggle.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)'; toggle.style.color = 'white'; toggle.style.borderColor = 'transparent'; toggle.textContent = '已开�?; } else { toggle.style.background = 'rgba(40, 40, 40, 0.8)'; toggle.style.color = 'rgba(255, 255, 255, 0.7)'; toggle.style.borderColor = 'rgba(255, 255, 255, 0.2)'; toggle.textContent = '已关�?; } } // 预加载音�?window.preloadSoundEffects = async function() { if (!soundEffectManager) return; const statusDiv = document.getElementById('soundStatus'); if (statusDiv) { statusDiv.textContent = '正在缓存音效...'; statusDiv.style.color = 'rgba(255, 193, 7, 0.8)'; } const success = await soundEffectManager.preloadSound('click', './resource/backgrounds/audio/ciallo.mp3'); updateSoundStatus(); if (success && soundEffectManager.enabled) { // 播放示例音效 soundEffectManager.playSound('click', './resource/backgrounds/audio/ciallo.mp3'); } }; // 清除音效缓存 window.clearSoundCache = async function() { if (!soundEffectManager) return; if (confirm('确定要删除音效缓存吗�?)) { const success = await soundEffectManager.clearCache(); if (success) { alert('音效缓存已清�?); } else { alert('清除音效缓存失败'); } updateSoundStatus(); } }; // 更新音效音量 window.updateSoundVolume = function(value) { if (!soundEffectManager) return; const volume = value / 100; // 转换�?0-1 范围 soundEffectManager.setVolume(volume); // 更新显示的百分比 const volumeValue = document.getElementById('volumeValue'); if (volumeValue) { volumeValue.textContent = `${value}%`; } console.log('音效音量已调整为:', `${value}% (${volume})`); }; // 测试音效音量 window.testSoundVolume = function() { if (!soundEffectManager || !soundEffectManager.enabled) return; // 播放测试音效 soundEffectManager.playSound('click', './resource/backgrounds/audio/ciallo.mp3'); }; // 初始化音量滑�?function initializeSoundVolumeSlider() { const slider = document.getElementById('soundVolumeSlider'); const volumeValue = document.getElementById('volumeValue'); if (!slider || !volumeValue || !soundEffectManager) return; // 获取当前音量设置 const currentVolume = soundEffectManager.getVolume(); const percentage = Math.round(currentVolume * 100); // 设置滑块和显示�? slider.value = percentage; volumeValue.textContent = `${percentage}%`; console.log('音量滑块已初始化，当前音�?', `${percentage}%`); } // 切换 Ciallo 特效开�?window.toggleCialloEffect = function() { if (!cialloEffectManager) return; const enabled = !cialloEffectManager.enabled; cialloEffectManager.setEnabled(enabled); updateCialloToggleUI(); updateCialloStatus(); // 如果开启，显示测试特效 if (enabled) { setTimeout(() => { // 在屏幕中央显示测试特�? const centerX = window.innerWidth / 2; const centerY = window.innerHeight / 2; cialloEffectManager.createEffect(centerX, centerY); }, 100); } }; // 更新 Ciallo 特效开关UI function updateCialloToggleUI() { const toggle = document.getElementById('cialloToggle'); if (!toggle || !cialloEffectManager) return; if (cialloEffectManager.enabled) { toggle.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)'; toggle.style.color = 'white'; toggle.style.borderColor = 'transparent'; toggle.textContent = '已开�?; } else { toggle.style.background = 'rgba(40, 40, 40, 0.8)'; toggle.style.color = 'rgba(255, 255, 255, 0.7)'; toggle.style.borderColor = 'rgba(255, 255, 255, 0.2)'; toggle.textContent = '已关�?; } } // 更新 Ciallo 特效状态显�?function updateCialloStatus() { const statusDiv = document.getElementById('cialloStatus'); if (!statusDiv || !cialloEffectManager) return; if (cialloEffectManager.enabled) { statusDiv.textContent = '点击时显�?Ciallo�?∠・ω< )⌒★'; statusDiv.style.color = 'rgba(76, 175, 80, 0.8)'; } else { statusDiv.textContent = 'Ciallo 特效已关�?; statusDiv.style.color = 'rgba(255, 255, 255, 0.6)'; } } // 音频缓存模式 - 跟随背景(linked) / 独立控制(independent) / 关闭(off) window.audioCacheMode = 'linked'; // 默认跟随背景缓存 // 更新音频缓存按钮UI function updateAudioCacheToggleUI() { const toggle = document.getElementById('audioCacheToggle'); const statusDiv = document.getElementById('audioCacheStatus'); if (!toggle || !statusDiv) return; if (window.audioCacheEnabled) { // 开启模�? toggle.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)'; toggle.style.color = 'white'; toggle.style.borderColor = 'transparent'; toggle.textContent = '已开�?; statusDiv.textContent = '音频缓存已开�?; statusDiv.style.color = 'rgba(76, 175, 80, 0.8)'; } else { // 关闭模式 toggle.style.background = 'rgba(40, 40, 40, 0.8)'; toggle.style.color = 'rgba(255, 255, 255, 0.7)'; toggle.style.borderColor = 'rgba(255, 255, 255, 0.2)'; toggle.textContent = '已关�?; statusDiv.textContent = '音频缓存已关�?; statusDiv.style.color = 'rgba(255, 255, 255, 0.6)'; } } // 切换音频缓存模式 window.toggleAudioCache = function() { // 只在开启和关闭之间切换 window.audioCacheEnabled = !window.audioCacheEnabled; // 保存设置 localStorage.setItem('audioCacheEnabled', window.audioCacheEnabled.toString()); // 更新UI updateAudioCacheToggleUI(); console.log('音频缓存�? + (window.audioCacheEnabled ? '开�? : '关闭')); } // 更新音效状态显�?window.updateSoundStatus = async function() { const statusDiv = document.getElementById('soundStatus'); if (!statusDiv || !soundEffectManager) return; try { let cachedResponse = false; // 检查缓存是否可用且已初始化 if (!soundEffectManager.fallbackMode && soundEffectManager.cache) { cachedResponse = await soundEffectManager.cache.match('./resource/backgrounds/audio/ciallo.mp3'); } if (cachedResponse && soundEffectManager.enabled) { statusDiv.textContent = '音效已缓存，点击音效已开�?; statusDiv.style.color = 'rgba(76, 175, 80, 0.8)'; } else if (cachedResponse) { statusDiv.textContent = '音效已缓存，但点击音效已关闭'; statusDiv.style.color = 'rgba(255, 193, 7, 0.8)'; } else if (soundEffectManager.enabled) { statusDiv.textContent = '音效未缓存，点击音效已开�?; statusDiv.style.color = 'rgba(255, 193, 7, 0.8)'; } else { statusDiv.textContent = '音效未缓存，点击音效已关�?; statusDiv.style.color = 'rgba(255, 255, 255, 0.6)'; } } catch (error) { console.warn('检查音效状态失�?', error); statusDiv.textContent = '无法检查音效状�?; statusDiv.style.color = 'rgba(255, 255, 255, 0.6)'; } }; async function loadVideoData() { try { // 检测是否为本地开发环�? const isLocalDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' || window.location.protocol === 'file:'; let apiUrl; if (isLocalDev) { apiUrl = './list.json'; } else { const timestamp = Date.now(); apiUrl = `https://video.seagullai.xyz/data/videos.json?t=${timestamp}`; } const response = await fetch(apiUrl, { cache: 'no-cache', headers: { 'Cache-Control': 'no-cache', 'Pragma': 'no-cache' } }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (!data || !data.categories || !Array.isArray(data.categories)) { throw new Error('Invalid data structure'); } videoData = data; // 确保根据当前模式正确渲染 - 关键修改 console.log('数据加载完成，当前模�?', currentMode); if (currentMode === 'tag') { renderCategoryHome(); } else if (currentMode === 'old') { renderOldMode(); } console.log('视频数据加载成功:', videoData.categories.length, '个分�?); } catch (error) { console.error('加载视频数据失败:', error); const isLocalDev = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'; if (isLocalDev) { showError( '本地开发环境数据加载失�?, '请确保已下载 list.json 文件到项目根目录，或使用 CORS 代理' ); } else { showError('视频数据加载失败', '请检查网络连接或服务器状�?); } loadFallbackData(); } } // 备用数据加载（用于本地开发测试） async function loadFallbackData() { console.log('尝试从本地服务器加载数据...'); try { const response = await fetch('http://localhost:8000/data/videos.json', { cache: 'no-cache', headers: { 'Cache-Control': 'no-cache', 'Pragma': 'no-cache' } }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); // 验证数据结构 if (!data || !data.categories || !Array.isArray(data.categories)) { throw new Error('Invalid data structure'); } videoData = data; // 根据当前模式初始化显�? if (currentMode === 'tag') { renderCategoryHome(); } else { renderOldMode(); } console.log('本地数据加载成功:', videoData.categories.length, '个分�?); } catch (error) { console.error('本地数据加载也失�?', error); // 如果本地也加载失败，显示离线示例数据 const offlineData = { categories: [ { id: "example", name: "示例分类", description: "本地服务器数据加载失败，这是离线示例数据", icon: "🎬", videos: [ { title: "示例视频1", description: "请确保本地服务器运行正常，并且videolist/list.json文件存在", baseName: "example1", sources: [ { quality: "720p", filename: "example1_720p.mp4", duration: "10:30" } ] } ] } ] }; videoData = offlineData; // 根据当前模式初始化显�? if (currentMode === 'tag') { renderCategoryHome(); } else { renderOldMode(); } // 显示错误提示 showError( '本地数据加载失败', '请确保本地服务器运行�?000端口，并且videolist/list.json文件存在' ); } } // 显示加载状�?function showLoadingState(container, message = '正在加载...') { if (container) { container.innerHTML = ` <div style="grid-column: 1/-1; text-align: center; color: white; padding: 40px;"> <div class="video-loading">${message}</div> </div> `; } } // 显示错误信息 function showError(title, message) { const errorHtml = ` <div style="grid-column: 1/-1; text-align: center; color: #ff6b6b; padding: 40px;"> <h3>⚠️ ${title}</h3> <p>${message}</p> <button onclick="loadVideoData()" style="margin-top: 15px; padding: 8px 16px; background: #ff6b6b; color: white; border: none; border-radius: 4px; cursor: pointer;">重新加载</button> </div> `; const categoryHome = document.getElementById('categoryHome'); const videoItems = document.getElementById('videoItems'); if (currentMode === 'tag' && categoryHome) { categoryHome.innerHTML = errorHtml; } else if (videoItems) { videoItems.innerHTML = errorHtml; } } // 显示加载状�?function showLoadingState(container, message = '正在加载...') { if (container) { container.innerHTML = ` <div style="grid-column: 1/-1; text-align: center; color: white; padding: 40px;"> <div class="video-loading">${message}</div> </div> `; } } // 显示分类加载状�?function showCategoryLoading() { const categoryHome = document.getElementById('categoryHome'); showLoadingState(categoryHome, '📺 正在加载分类数据...（若长时间加载不出界面，请刷新界面）'); } // 显示传统模式加载状�?function showOldModeLoading() { const videoItems = document.getElementById('videoItems'); showLoadingState(videoItems, '📺 正在加载视频列表...'); } // 模式切换 - 优化版本 function switchMode(mode) { console.log('切换模式�?', mode, '当前数据状�?', videoData ? '已加�? : '未加�?); currentMode = mode; // 使用缓存的DOM元素 const tagBtn = domCache.get('tagModeBtn'); const oldBtn = domCache.get('oldModeBtn'); const categoryHome = domCache.get('categoryHome'); const categoryDetail = domCache.get('categoryDetail'); const oldModeContainer = domCache.get('oldModeContainer'); const breadcrumb = domCache.get('breadcrumb'); // 批量更新按钮状�? if (tagBtn) tagBtn.classList.toggle('active', mode === 'tag'); if (oldBtn) oldBtn.classList.toggle('active', mode === 'old'); // 批量显示/隐藏对应内容 if (mode === 'tag') { categoryHome?.classList.remove('hidden'); categoryDetail?.classList.add('hidden'); oldModeContainer?.classList.add('hidden'); breadcrumb?.classList.remove('hidden'); // 重置分类状�? currentCategory = null; updateBreadcrumb(); // 检查数据是否已加载 if (videoData && videoData.categories) { renderCategoryHome(); } else { showCategoryLoading(); } } else { categoryHome?.classList.add('hidden'); categoryDetail?.classList.add('hidden'); oldModeContainer?.classList.remove('hidden'); breadcrumb?.classList.add('hidden'); // 检查数据是否已加载 if (videoData && videoData.categories) { renderOldMode(); } else { showOldModeLoading(); } } // 保存用户选择 localStorage.setItem('videoMode', mode); // 记录模式切换日志 if (accessLogger) { accessLogger.logModeSwitch(mode); } } // 渲染分类首页 function renderCategoryHome() { console.log('渲染分类首页，数据状�?', videoData ? '已加�? : '未加�?); if (!videoData || !videoData.categories) { console.log('数据未准备好，显示加载状�?); showCategoryLoading(); return; } currentCategory = null; updateBreadcrumb(); const categoryHome = document.getElementById('categoryHome'); if (!categoryHome) return; categoryHome.innerHTML = videoData.categories.map(category => { const videoCount = category.videos ? category.videos.length : 0; const latestVideo = category.videos && category.videos.length > 0 ? category.videos[category.videos.length - 1] : { title: '暂无视频' }; return ` <div class="category-card" onclick="showCategoryDetail('${category.id}')"> <span class="icon">${category.icon}</span> <h3>${category.name}</h3> <p>${category.description}</p> <div class="stats">${videoCount} 个视�?/div> <div class="latest">最新：${latestVideo.title}</div> </div> `; }).join(''); console.log('分类首页渲染完成'); } // 显示分类详情 function showCategoryDetail(categoryId) { if (!videoData || !videoData.categories) return; const category = videoData.categories.find(cat => cat.id === categoryId); if (!category) return; currentCategory = category; // 隐藏分类首页，显示详情页 const categoryHome = document.getElementById('categoryHome'); const categoryDetail = document.getElementById('categoryDetail'); if (categoryHome) categoryHome.classList.add('hidden'); if (categoryDetail) categoryDetail.classList.remove('hidden'); // 更新面包�? updateBreadcrumb(); // 渲染分类标题 const categoryHeader = document.getElementById('categoryHeader'); if (categoryHeader) { categoryHeader.innerHTML = ` <span class="icon">${category.icon}</span> <h2>${category.name}</h2> <p>${category.description}</p> <div class="count">${category.videos ? category.videos.length : 0} 个视�?/div> `; } // 渲染该分类的视频 renderCategoryVideos(category.videos || []); } // 返回分类首页 function showCategoryHome() { const categoryDetail = document.getElementById('categoryDetail'); const categoryHome = document.getElementById('categoryHome'); if (categoryDetail) categoryDetail.classList.add('hidden'); if (categoryHome) categoryHome.classList.remove('hidden'); currentCategory = null; updateBreadcrumb(); } // 渲染分类视频列表 function renderCategoryVideos(videos) { const categoryVideos = document.getElementById('categoryVideos'); if (!categoryVideos) return; if (!videos || videos.length === 0) { categoryVideos.innerHTML = ` <div style="grid-column: 1/-1; text-align: center; color: white; padding: 40px;"> <h3>📭 该分类暂无视�?/h3> </div> `; return; } categoryVideos.innerHTML = videos.map((video, index) => ` <div class="video-item" data-index="${index}" data-mode="category"> <h3>${video.title}</h3> <p>${video.description}</p> <div class="meta"> <small>${video.sources && video.sources[0] ? video.sources[0].filename : ''}</small> <span class="duration">${video.sources && video.sources[0] ? video.sources[0].duration : ''}</span> </div> </div> `).join(''); // 添加点击事件 categoryVideos.querySelectorAll('.video-item').forEach(item => { item.addEventListener('click', function() { console.log('分类视频项被点击:', this.dataset.index); document.querySelectorAll('.video-item').forEach(i => i.classList.remove('active')); this.classList.add('active'); const index = parseInt(this.dataset.index); console.log('准备播放分类视频，索�?', index, '视频:', videos[index]); // 确保播放器会显示（备用机制） setTimeout(() => { const player = document.getElementById('player'); if (player && !player.classList.contains('show')) { console.log('分类模式：播放器未显示，手动添加show�?); player.classList.add('show'); } }, 100); playVideo(videos[index]); console.log('分类模式：调用scrollToPlayer'); scrollToPlayer(); }); }); // 应用当前的亮度样式到新渲染的video-item applyCurrentBrightnessStyle(); } // 渲染传统模式 function renderOldMode() { if (!videoData || !videoData.categories) { showError('数据格式错误', '视频数据结构不正�?); return; } // 将所有分类的视频合并 const allVideos = []; videoData.categories.forEach(category => { if (category.videos && Array.isArray(category.videos)) { category.videos.forEach(video => { allVideos.push({ ...video, categoryName: category.name, categoryIcon: category.icon }); }); } }); filteredVideos = [...allVideos]; renderOldModeVideos(); } // 渲染传统模式视频列表 function renderOldModeVideos() { const videoItems = document.getElementById('videoItems'); if (!videoItems) return; if (!filteredVideos || filteredVideos.length === 0) { videoItems.innerHTML = ` <div style="grid-column: 1/-1; text-align: center; color: white; padding: 40px;"> <h3>🔍 没有找到匹配的视�?/h3> <p>请尝试其他关键词</p> </div> `; return; } videoItems.innerHTML = filteredVideos.map((video, index) => ` <div class="video-item" data-index="${index}" data-mode="old"> <h3>${video.title}</h3> <p>${video.description}</p> <div class="meta"> <small>${video.categoryIcon} ${video.categoryName}</small> <span class="duration">${video.sources && video.sources[0] ? video.sources[0].duration : ''}</span> </div> </div> `).join(''); // 添加点击事件 videoItems.querySelectorAll('.video-item').forEach(item => { item.addEventListener('click', function() { console.log('视频项被点击:', this.dataset.index); document.querySelectorAll('.video-item').forEach(i => i.classList.remove('active')); this.classList.add('active'); const index = parseInt(this.dataset.index); console.log('准备播放视频，索�?', index, '视频:', filteredVideos[index]); // 确保播放器会显示（备用机制） setTimeout(() => { const player = document.getElementById('player'); if (player && !player.classList.contains('show')) { console.log('播放器未显示，手动添加show�?); player.classList.add('show'); } }, 100); playVideo(filteredVideos[index]); console.log('调用scrollToPlayer'); scrollToPlayer(); }); }); // 应用当前的亮度样式到新渲染的video-item applyCurrentBrightnessStyle(); } // 应用当前亮度样式到所有video-item function applyCurrentBrightnessStyle() { const headerTitle = document.querySelector('header h1'); const videoItems = document.querySelectorAll('.video-item'); if (!headerTitle || videoItems.length === 0) return; // 根据标题的当前样式类来确定应该应用的video-item样式 if (headerTitle.classList.contains('dark-bg')) { // 暗背�?- video-item使用浅色样式 videoItems.forEach(item => { item.classList.remove('light-bg'); item.classList.add('dark-bg'); }); } else if (headerTitle.classList.contains('light-bg')) { // 亮背�?- video-item使用深色样式 videoItems.forEach(item => { item.classList.remove('dark-bg'); item.classList.add('light-bg'); }); } } // 搜索功能 - 优化版本，添加防抖和缓存 const searchCache = new Map(); let searchAbortController = null; function handleSearch(keyword) { // 取消之前的搜索请求（如果有的话） if (searchAbortController) { searchAbortController.abort(); } searchAbortController = new AbortController(); // 如果当前不是全部视频模式，切换到全部视频模式 if (currentMode !== 'old') { switchMode('old'); } if (!videoData || !videoData.categories) { return; } // 检查搜索缓�? const cacheKey = keyword.trim().toLowerCase(); if (searchCache.has(cacheKey)) { filteredVideos = searchCache.get(cacheKey); renderOldModeVideos(); return; } // 获取所有视频（缓存结果�? if (!window.allVideosCache) { window.allVideosCache = []; videoData.categories.forEach(category => { if (category.videos && Array.isArray(category.videos)) { category.videos.forEach(video => { window.allVideosCache.push({ ...video, categoryName: category.name, categoryIcon: category.icon, searchText: `${video.title} ${video.description} ${video.baseName || ''}`.toLowerCase() }); }); } }); } // 执行搜索 try { if (cacheKey === '') { filteredVideos = [...window.allVideosCache]; } else { // 使用预处理的搜索文本进行高效搜索 filteredVideos = window.allVideosCache.filter(video => video.searchText.includes(cacheKey) ); } // 缓存搜索结果 searchCache.set(cacheKey, filteredVideos); // 限制缓存大小 if (searchCache.size > 50) { const firstKey = searchCache.keys().next().value; searchCache.delete(firstKey); } renderOldModeVideos(); } catch (error) { if (error.name !== 'AbortError') { console.error('搜索失败:', error); } } } // 防抖搜索函数 const debouncedSearch = debounce(handleSearch, 300); // 测试视频文件是否可访�?async function testVideoAccessibility(videoUrl) { try { console.log('测试视频可访问�?', videoUrl); const response = await fetch(videoUrl, { method: 'HEAD', cache: 'no-cache', mode: 'cors', // 明确指定CORS模式 credentials: 'same-origin' // 同源请求包含凭据 }); if (response.ok) { console.log('视频文件可访问，状�?', response.status); return true; } else { console.warn('视频文件不可访问，状�?', response.status, response.statusText); return false; } } catch (error) { console.error('测试视频可访问性失�?', error); // 如果HEAD请求失败，尝试GET请求的范围请�? try { const response = await fetch(videoUrl, { method: 'GET', headers: { 'Range': 'bytes=0-1' }, // 只请求前2个字�? cache: 'no-cache', mode: 'cors', credentials: 'same-origin' }); if (response.ok || response.status === 206) { // 206 是部分内容响�? console.log('视频文件可访问（通过范围请求�?); return true; } } catch (rangeError) { console.error('范围请求也失�?', rangeError); } return false; } } // 播放视频 async function playVideo(video) { if (!video || !video.sources || !video.sources[0]) { console.error('无效的视频数�?', video); alert('视频数据无效，无法播�?); return; } console.log('准备播放视频:', video.title, video.sources); currentVideo = video; // 根据清晰度优先级选择最优视频源 let selectedSource = video.sources[0]; // 默认选择第一�? if (video.sources.length > 1) { if (window.qualityPriorityHigh) { // 高清优先: 优先选择�?20p的源 selectedSource = video.sources.find(source => !source.filename.includes('720')) || video.sources[0]; } else { // 流畅优先: 优先选择720p的源 selectedSource = video.sources.find(source => source.filename.includes('720')) || video.sources[0]; } } console.log('选择的视频源:', selectedSource); updateQualitySelector(video.sources); const sourceElement = document.getElementById('videoSource'); const videoElement = document.getElementById('mainVideo'); const playerElement = document.getElementById('player'); if (!sourceElement || !videoElement) { console.error('找不到视频元�?); alert('视频播放器初始化失败，请刷新页面'); return; } try { // 尝试使用缓存的视�? let videoUrl = `./resource/resource/videos/${encodeURIComponent(selectedSource.filename)}`; console.log('初始视频URL:', videoUrl); // 为服务器环境提供备用路径 const alternativeUrls = [ `./resource/resource/videos/${encodeURIComponent(selectedSource.filename)}`, `videos/${encodeURIComponent(selectedSource.filename)}`, `./resource/resource/videos/${selectedSource.filename}`, `videos/${selectedSource.filename}` ]; if (videoCache && videoCache.cacheEnabled) { try { const cachedUrl = await videoCache.getCachedVideo(selectedSource.filename); if (cachedUrl && cachedUrl !== videoUrl) { videoUrl = cachedUrl; console.log('使用缓存视频:', selectedSource.filename, '缓存URL:', videoUrl); } } catch (error) { console.warn('获取缓存视频失败，使用原始URL:', error); } } console.log('最终视频URL:', videoUrl); // 测试视频文件是否可访问（仅对非blob URL进行测试�? if (!videoUrl.includes('blob:')) { let isAccessible = await testVideoAccessibility(videoUrl); // 如果主URL不可访问，尝试备用路�? if (!isAccessible) { console.warn('主视频URL不可访问，尝试备用路�?); for (const altUrl of alternativeUrls) { if (altUrl !== videoUrl) { console.log('尝试备用URL:', altUrl); isAccessible = await testVideoAccessibility(altUrl); if (isAccessible) { videoUrl = altUrl; console.log('找到可访问的备用URL:', altUrl); break; } } } } if (!isAccessible) { throw new Error(`所有视频路径都无法访问: ${selectedSource.filename}\n请检查视频文件是否存在于videos文件夹中`); } } // 添加时间戳避免缓存问�? const finalUrl = videoUrl.includes('blob:') ? videoUrl : `${videoUrl}?t=${Date.now()}`; sourceElement.src = finalUrl; videoElement.load(); // 添加加载事件监听 const loadPromise = new Promise((resolve, reject) => { const onCanPlay = () => { console.log('视频可以播放'); videoElement.removeEventListener('canplay', onCanPlay); videoElement.removeEventListener('error', onError); resolve(); }; const onError = (event) => { console.error('视频加载错误:', event, videoElement.error); videoElement.removeEventListener('canplay', onCanPlay); videoElement.removeEventListener('error', onError); reject(new Error(`视频加载失败: ${videoElement.error?.message || '未知错误'}`)); }; videoElement.addEventListener('canplay', onCanPlay, { once: true }); videoElement.addEventListener('error', onError, { once: true }); // 10秒超�? setTimeout(() => { videoElement.removeEventListener('canplay', onCanPlay); videoElement.removeEventListener('error', onError); reject(new Error('视频加载超时')); }, 10000); }); try { await loadPromise; // 尝试播放 await videoElement.play(); console.log('视频播放成功'); } catch (playError) { console.log('自动播放失败，需要用户交�?', playError); // 显示播放提示 const playHint = document.createElement('div'); playHint.className = 'play-hint'; playHint.style.cssText = ` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: white; padding: 15px 25px; border-radius: 25px; cursor: pointer; font-size: 16px; z-index: 1000; backdrop-filter: blur(10px); border: 2px solid rgba(255,255,255,0.2); `; playHint.textContent = '🎬 点击播放视频'; playerElement.appendChild(playHint); // 点击后开始播�? playHint.onclick = async () => { try { await videoElement.play(); playHint.remove(); console.log('用户点击后播放成�?); } catch (error) { console.error('用户点击播放仍然失败:', error); playHint.textContent = '播放失败，请检查视频文�?; } }; } // 显示播放�? console.log('准备显示播放�?..'); if (playerElement) { // 清除之前的错误信�? const existingError = playerElement.querySelector('.error-message'); if (existingError) { existingError.remove(); console.log('清除了之前的错误信息'); } console.log('播放器元素存在，添加show�?); playerElement.classList.add('show'); console.log('播放器类列表:', playerElement.className); } else { console.error('播放器元素不存在�?); } // 记录视频播放日志 if (accessLogger) { accessLogger.logVideoPlay(video.title); } // 检查当前视频的缓存状�? setTimeout(() => { if (window.checkCurrentVideoCacheStatus) { window.checkCurrentVideoCacheStatus(); } }, 500); } catch (error) { console.error('视频播放失败:', error); // 即使出错也要显示播放�? console.log('出错时也要显示播放器...'); if (playerElement) { console.log('错误情况下显示播放器元素'); playerElement.classList.add('show'); console.log('错误时播放器类列�?', playerElement.className); } // 显示错误信息 const videoElement = document.getElementById('mainVideo'); if (videoElement && playerElement) { // 在播放器中显示错误信�? const errorDiv = document.createElement('div'); errorDiv.style.cssText = ` position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: white; padding: 20px; border-radius: 10px; text-align: center; z-index: 1000; border: 2px solid #ff6b6b; `; errorDiv.innerHTML = ` <h3>�?视频加载失败</h3> <p>${error.message}</p> <button onclick="location.reload()" style="margin-top: 10px; padding: 8px 16px; background: #ff6b6b; color: white; border: none; border-radius: 5px; cursor: pointer;"> 刷新页面重试 </button> `; // 清除之前的错误信�? const existingError = playerElement.querySelector('.error-message'); if (existingError) { existingError.remove(); } errorDiv.className = 'error-message'; playerElement.appendChild(errorDiv); } alert(`视频加载失败: ${error.message}\n请检查视频文件是否存在，或刷新页面重试`); } } // 视频设置面板控制 function toggleVideoSettings() { const panel = document.getElementById('videoSettings'); panel.classList.toggle('show'); } // 点击面板外关闭面�?document.addEventListener('click', function(event) { const panel = document.getElementById('videoSettings'); const settingsBtn = document.querySelector('.video-settings-btn'); if (panel && panel.classList.contains('show')) { if (!panel.contains(event.target) && !settingsBtn.contains(event.target)) { panel.classList.remove('show'); } } }); // 更新视频设置选项 function updateQualitySelector(sources) { const qualityOptions = document.getElementById('qualityOptions'); if (!qualityOptions || !sources) return; // 获取当前正在播放的文件名 const currentSource = document.getElementById('videoSource').src; const currentFilename = decodeURIComponent(currentSource.split('/').pop()); // 根据清晰度优先级排序 const sortedSources = [...sources].sort((a, b) => { const aIs720p = a.filename.includes('720'); const bIs720p = b.filename.includes('720'); if (window.qualityPriorityHigh) { // 高清优先: �?20p在前�?20p在后 if (aIs720p && !bIs720p) return 1; if (!aIs720p && bIs720p) return -1; return 0; } else { // 流畅优先: 720p在前，非720p在后 if (aIs720p && !bIs720p) return -1; if (!aIs720p && bIs720p) return 1; return 0; } }); qualityOptions.innerHTML = sortedSources.map(source => { const isActive = source.filename === currentFilename; const qualityText = source.quality === 'original' ? '原画' : source.quality; const resolution = getResolutionFromFilename(source.filename); return ` <div class="quality-option ${isActive ? 'active' : ''}" onclick="changeVideoQuality('${source.filename}', this)"> ${qualityText} ${resolution ? `<span>${resolution}</span>` : ''} </div> `; }).join(''); } // 从文件名推测分辨�?function getResolutionFromFilename(filename) { if (filename.includes('720')) return '720p'; if (filename.includes('1080')) return '1080p'; if (filename.includes('2k')) return '2K'; if (filename.includes('4k')) return '4K'; return ''; } // 切换视频画质 async function changeVideoQuality(filename, clickedOption) { if (!filename || !currentVideo) return; const videoElement = document.getElementById('mainVideo'); const sourceElement = document.getElementById('videoSource'); if (sourceElement && videoElement) { // 更新选中状�? document.querySelectorAll('.quality-option').forEach(option => { option.classList.remove('active'); }); if (clickedOption) { clickedOption.classList.add('active'); } // 记住当前播放位置 const currentTime = videoElement.currentTime; const wasPlaying = !videoElement.paused; // 尝试使用缓存的视�? let videoUrl = `./resource/resource/videos/${encodeURIComponent(filename)}`; if (videoCache && videoCache.cacheEnabled) { try { videoUrl = await videoCache.getCachedVideo(filename); console.log('切换画质时使用缓存视�?', filename); } catch (error) { console.warn('获取缓存视频失败，使用原始URL:', error); } } // 更新视频�? sourceElement.src = videoUrl; videoElement.load(); // 恢复播放位置和状�? videoElement.addEventListener('loadedmetadata', function onLoaded() { videoElement.currentTime = currentTime; if (wasPlaying) { videoElement.play(); } videoElement.removeEventListener('loadedmetadata', onLoaded); }); } } // 下载当前视频 function downloadCurrentVideo() { if (!currentVideo || !currentVideo.sources || !currentVideo.sources[0]) { alert('没有可下载的视频'); return; } // 获取当前正在播放的视频源 const videoSource = document.getElementById('videoSource'); const currentUrl = videoSource.src; const selectedFilename = currentUrl.split('/').pop(); const videoUrl = `./resource/resource/videos/${selectedFilename}`; // 创建下载链接 const a = document.createElement('a'); a.href = videoUrl; a.download = decodeURIComponent(selectedFilename); // 解码文件名，去除URL编码 // 添加下载提示 const downloadBtn = document.querySelector('.download-btn'); const originalText = downloadBtn.textContent; downloadBtn.textContent = '�?正在准备下载...'; // 开始下�? document.body.appendChild(a); a.click(); document.body.removeChild(a); // 恢复按钮文字 setTimeout(() => { downloadBtn.textContent = originalText; }, 1500); } // 滚动到播放器 function scrollToPlayer() { console.log('scrollToPlayer 被调�?); const player = document.getElementById('player'); if (player) { console.log('找到播放器元素，准备滚动'); console.log('播放器当前类:', player.className); console.log('播放器可见�?', window.getComputedStyle(player).display); setTimeout(() => { console.log('开始滚动到播放�?); player.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 200); // 延迟200ms再跳转到播放器位�? } else { console.error('找不到播放器元素�?); } } // 更新面包屑导�?function updateBreadcrumb() { const breadcrumb = document.getElementById('breadcrumb'); if (!breadcrumb) return; if (currentCategory) { breadcrumb.innerHTML = ` <a href="#" onclick="showCategoryHome()">🏠 首页</a> <span class="separator">></span> <span>${currentCategory.icon} ${currentCategory.name}</span> `; } else { breadcrumb.innerHTML = ` <a href="#" onclick="showCategoryHome()">🏠 首页</a> `; } } // 关闭指定公告 - 移除localStorage保存 function closeAnnouncement(announcementId) { const announcement = document.getElementById(announcementId); if (announcement) { announcement.classList.add('hide'); // 移除localStorage保存，这样刷新页面后公告会重新显�? // localStorage.setItem(`${announcementId}Closed`, Date.now()); // 动画完成后隐藏元�? setTimeout(() => { if (announcement) { announcement.style.display = 'none'; } }, 300); } } // 检查公告是否应该显�?function shouldShowAnnouncement(announcementId) { // 始终返回true，让公告每次刷新都显�? return true; } // 初始化公告显示状�?function initializeAnnouncements() { const announcements = ['announcement1', 'announcement2']; announcements.forEach(announcementId => { if (!shouldShowAnnouncement(announcementId)) { const announcement = document.getElementById(announcementId); if (announcement) { announcement.style.display = 'none'; } } }); console.log('公告初始化完�?- 刷新页面后公告将重新显示'); } // 背景切换功能 - 改进版（使用缓存�?async function setRandomBackground() { try { // 获取bg.json中的背景列表，添加时间戳和随机数防止缓存 const timestamp = Date.now(); const random = Math.random().toString(36).substring(7); const response = await fetch(`./data/backgrounds.json?t=${timestamp}&r=${random}`, { cache: 'no-store', // 禁用缓存 headers: { 'Cache-Control': 'no-cache', 'Pragma': 'no-cache' } }); const bgData = await response.json(); const backgrounds = bgData.backgrounds; if (!backgrounds || backgrounds.length === 0) { console.error('没有可用的背�?); // 使用默认背景 setDefaultBackground(); return; } let newBg; // 从可用的背景中随机选择一个，确保不重�? do { const randomIndex = Math.floor(Math.random() * backgrounds.length); newBg = backgrounds[randomIndex].file; } while (newBg === lastBackground && backgrounds.length > 1); lastBackground = newBg; // 使用缓存的背景图�? const cachedImageUrl = await backgroundCache.getCachedBackground(newBg); const bg = new Image(); bg.src = cachedImageUrl; bg.onload = async () => { document.body.style.setProperty('--bg-image', `url(${bg.src})`); document.body.classList.remove('bg-fade'); void document.body.offsetWidth; // 强制重绘 document.body.classList.add('bg-fade'); // 检测背景亮度并调整文字颜色 if (brightnessDetector) { try { await brightnessDetector.detectAndAdjust(bg.src); } catch (error) { console.warn('背景亮度检测失�?', error); } } // 保存随机选择的背�? localStorage.setItem('currentBg', newBg); console.log('背景设置成功:', newBg, '(来自缓存)'); }; bg.onerror = () => { console.error('背景图片加载失败:', newBg); setDefaultBackground(); }; } catch (error) { console.error('随机切换背景失败:', error); setDefaultBackground(); } } // 设置默认背景 function setDefaultBackground() { const defaultBg = '1.png'; const bg = new Image(); bg.src = `background/${defaultBg}?t=${Date.now()}`; bg.onload = () => { document.body.style.setProperty('--bg-image', `url(${bg.src})`); document.body.classList.remove('bg-fade'); void document.body.offsetWidth; document.body.classList.add('bg-fade'); localStorage.setItem('currentBg', defaultBg); lastBackground = defaultBg; console.log('使用默认背景:', defaultBg); }; bg.onerror = () => { console.error('默认背景也加载失�?); // 如果连默认背景都失败，使用纯色背�? document.body.style.setProperty('--bg-image', 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'); document.body.classList.add('bg-fade'); }; } // 恢复用户保存的背�?async function restoreSavedBackground() { const savedBg = localStorage.getItem('currentBg'); if (savedBg) { console.log('恢复用户保存的背�?', savedBg); try { const cachedImageUrl = await backgroundCache.getCachedBackground(savedBg); const img = new Image(); img.onload = async () => { document.body.style.setProperty('--bg-image', `url(${img.src})`); document.body.classList.remove('bg-fade'); void document.body.offsetWidth; document.body.classList.add('bg-fade'); // 检测背景亮度并调整文字颜色 if (brightnessDetector) { try { await brightnessDetector.detectAndAdjust(img.src); } catch (error) { console.warn('恢复背景时亮度检测失�?', error); } } lastBackground = savedBg; console.log('背景恢复成功 (来自缓存):', savedBg); }; img.onerror = () => { console.warn('保存的背景文件不存在:', savedBg); localStorage.removeItem('currentBg'); setRandomBackground(); }; img.src = cachedImageUrl; } catch (error) { console.error('恢复背景失败:', error); setRandomBackground(); } } else { console.log('没有保存的背景，设置随机背景'); setRandomBackground(); } } // 鼠标跟随背景功能 - 优化版本，添加节�?function initMouseFollowBackground() { let isMouseMoveEnabled = true; // 节流版本的鼠标移动处理函�? const throttledMouseMove = throttle((e) => { if (!isMouseMoveEnabled) return; // 计算鼠标相对于屏幕中心的位置�?1 �?1�? const mouseX = (e.clientX - window.innerWidth / 2) / (window.innerWidth / 2); const mouseY = (e.clientY - window.innerHeight / 2) / (window.innerHeight / 2); // 设置移动范围 const moveRange = 15; // 移动范围（像素） // 反方向移�? const translateX = -mouseX * moveRange; const translateY = -mouseY * moveRange; // 使用requestAnimationFrame优化性能 requestAnimationFrame(() => { document.body.style.setProperty('--bg-transform', `translate(${translateX}px, ${translateY}px)`); }); }, 16); // �?0fps document.addEventListener('mousemove', throttledMouseMove, { passive: true }); // 页面失焦时禁用鼠标跟�? document.addEventListener('visibilitychange', () => { isMouseMoveEnabled = !document.hidden; if (document.hidden) { // 页面隐藏时重置背景位�? document.body.style.setProperty('--bg-transform', 'translate(0px, 0px)'); } }); } // 键盘导航 function handleKeyboard(e) { const activeItem = document.querySelector('.video-item.active'); if (!activeItem) return; const currentIndex = parseInt(activeItem.dataset.index); const mode = activeItem.dataset.mode; let items; if (mode === 'category') { items = document.getElementById('categoryVideos').querySelectorAll('.video-item'); } else { items = document.getElementById('videoItems').querySelectorAll('.video-item'); } if(e.key === 'ArrowUp' && currentIndex > 0) { items[currentIndex - 1].click(); } if(e.key === 'ArrowDown' && currentIndex < items.length - 1) { items[currentIndex + 1].click(); } if(e.key === 'Escape' && currentMode === 'tag' && currentCategory) { showCategoryHome(); } } // 初始化应�?- 优化版本 function initializeApp() { try { console.log('开始初始化应用...'); // 性能监控 const startTime = performance.now(); // 添加全局错误处理 window.addEventListener('error', (e) => { console.error('全局错误:', e.error); if (e.error && e.error.message && e.error.message.includes('video')) { console.error('视频相关错误:', e.error); } }); window.addEventListener('unhandledrejection', (e) => { console.error('未处理的Promise拒绝:', e.reason); if (e.reason && typeof e.reason === 'string' && e.reason.includes('video')) { console.error('视频相关Promise错误:', e.reason); } e.preventDefault(); }); // 初始化日志系�? accessLogger = new AccessLogger(); // 初始化背景缓存管理器 backgroundCache = new BackgroundCacheManager(); // 初始化视频缓存管理器 videoCache = new VideoCacheManager(); console.log('视频缓存管理器初始化完成'); // 初始化背景亮度检测器 brightnessDetector = new BackgroundBrightnessDetector(); console.log('背景亮度检测器初始化完�?); // 测试亮度检测器是否工作正常 setTimeout(() => { const testTitle = brightnessDetector.getHeaderTitle(); if (testTitle) { console.log('亮度检测器测试通过 - 成功获取标题元素'); } else { console.error('亮度检测器测试失败 - 无法获取标题元素'); } }, 100); // 初始化音效管理器 initializeSoundEffects(); // 缓存常用DOM元素 const elements = ['tagModeBtn', 'oldModeBtn', 'categoryHome', 'categoryDetail', 'oldModeContainer', 'breadcrumb']; elements.forEach(id => domCache.get(id)); // 检查并自动缓存背景和音频（在后台进行，只在缓存开启时执行�? setTimeout(async () => { try { // 恢复音频缓存设置 window.audioCacheEnabled = localStorage.getItem('audioCacheEnabled') !== 'false'; console.log('恢复音频缓存状�?', window.audioCacheEnabled ? '已开�? : '已关�?); const cacheEnabled = localStorage.getItem('backgroundCacheEnabled') !== 'false'; if (cacheEnabled) { // 检查背景缓�? if (backgroundCache.needsCacheUpdate()) { console.log('检测到需要更新背景缓存，开始自动缓�?..'); // 如果检测到大量blob URL，先清理 if (backgroundCache.blobUrlCache.size > 10) { console.log('检测到过多缓存对象，先清理...'); backgroundCache.cleanupBlobUrls(); } await backgroundCache.clearOldCache(); await backgroundCache.preloadAllBackgrounds(); } // 根据音频缓存状态决定是否自动缓存音�? if (window.audioCacheEnabled) { console.log('音频缓存已开启，开始自动缓存音�?..'); await window.preloadSoundEffects(); } else { console.log('音频缓存已关闭，跳过音效缓存'); } } if (window.updateCacheStatus) { window.updateCacheStatus(); } } catch (error) { console.error('后台缓存失败:', error); } }, 3000); // 延迟3秒开始，给页面更多加载时�? // 恢复用户上次选择的模�?- 重要：在加载数据前设置模�? const savedMode = localStorage.getItem('videoMode') || 'tag'; currentMode = savedMode; // 先设置当前模�? // 使用缓存的DOM元素 const tagBtn = domCache.get('tagModeBtn'); const oldBtn = domCache.get('oldModeBtn'); if (tagBtn) tagBtn.classList.toggle('active', savedMode === 'tag'); if (oldBtn) oldBtn.classList.toggle('active', savedMode === 'old'); // 使用缓存的DOM元素 const categoryHome = domCache.get('categoryHome'); const categoryDetail = domCache.get('categoryDetail'); const oldModeContainer = domCache.get('oldModeContainer'); const breadcrumb = domCache.get('breadcrumb'); if (savedMode === 'tag') { categoryHome?.classList.remove('hidden'); categoryDetail?.classList.add('hidden'); oldModeContainer?.classList.add('hidden'); breadcrumb?.classList.remove('hidden'); } else { categoryHome?.classList.add('hidden'); categoryDetail?.classList.add('hidden'); oldModeContainer?.classList.remove('hidden'); breadcrumb?.classList.add('hidden'); } // 其他初始化代�?- 优化事件监听�? const searchInput = domCache.get('searchInput'); if (searchInput) { // 使用防抖搜索，避免频繁触�? searchInput.addEventListener('input', (e) => { const keyword = e.target.value.trim(); debouncedSearch(keyword); }, { passive: true }); } const qualitySelect = domCache.get('qualitySelect'); if (qualitySelect) { qualitySelect.addEventListener('change', async function(e) { if (currentVideo && e.target.value) { const sourceElement = domCache.get('videoSource'); const videoElement = domCache.get('mainVideo'); if (sourceElement && videoElement) { // 尝试使用缓存的视�? let videoUrl = `./resource/resource/videos/${encodeURIComponent(e.target.value)}`; if (videoCache && videoCache.cacheEnabled) { try { videoUrl = await videoCache.getCachedVideo(e.target.value); console.log('画质选择器使用缓存视�?', e.target.value); } catch (error) { console.warn('获取缓存视频失败，使用原始URL:', error); } } sourceElement.src = videoUrl; videoElement.load(); videoElement.play().catch(err => console.warn('自动播放失败:', err)); } } }); } document.addEventListener('keydown', handleKeyboard); // 提前初始化背景缓存开关状态，确保在UI创建前就设置�? window.backgroundCacheEnabled = localStorage.getItem('backgroundCacheEnabled') !== 'false'; // 添加设置按钮和侧边栏 const settingsHTML = ` <div class="settings-button" onclick="toggleSettings()">⚙️</div> <div class="settings-sidebar"> <div class="settings-header"> <h2>设置</h2> </div>  <div class="setting-item" data-setting="background"> <div class="setting-header" onclick="toggleSettingSection('background')"> <h3>🖼�?背景设置 <span class="toggle-icon">�?/span></h3> </div> <div class="setting-content" id="background-content"> <div style="margin-bottom: 15px;"> <div style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;"> <span>背景缓存</span> <button class="mode-btn" id="cacheToggle" onclick="toggleBackgroundCache()" style="min-width: 100px;"> 未开�? </button> </div> <div id="cacheStatus" style="font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 10px;"> 检查缓存状态中... </div> </div> <div style="margin-bottom: 15px;"> <div style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;"> <span>自动切换</span> <button class="mode-btn" id="bgToggle" onclick="toggleBgSwitch()" style="min-width: 100px;"> 已关�?(∞s) </button> </div> <div id="bgIntervalContainer" style="display: none; margin-top: 10px;"> <input type="number" id="bgInterval" min="1" value="30" onchange="updateInterval(this.value)" style="width: 100%; padding: 12px 20px; background: rgba(66, 66, 66, 0.15); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 2px solid rgba(255, 255, 255, 0.3); color: rgba(210, 210, 210, 0.9); border-radius: 20px; font-size: 14px; transition: all 0.3s ease; outline: none;"> </div> </div> <div> <label style="margin-bottom: 10px; display: block; font-size: 14px;">背景选择</label> <div class="bg-grid-container" id="bgGrid"></div> </div> </div> </div>  <div class="setting-item" data-setting="sound"> <div class="setting-header" onclick="toggleSettingSection('sound')"> <h3>�?点击效果 <span class="toggle-icon">�?/span></h3> </div> <div class="setting-content" id="sound-content"> <div style="margin-bottom: 15px;"> <div style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;"> <span>点击音效</span> <button class="mode-btn" id="soundToggle" onclick="toggleSoundEffects()" style="min-width: 100px;"> 已开�? </button> </div> <div id="soundStatus" style="font-size: 12px; color: rgba(255,255,255,0.6);"> 检查音效状态中... </div> </div> <div style="margin-bottom: 15px;"> <div style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;"> <span>Ciallo 特效</span> <button class="mode-btn" id="cialloToggle" onclick="toggleCialloEffect()" style="min-width: 100px;"> 已开�? </button> </div> <div id="cialloStatus" style="font-size: 12px; color: rgba(255,255,255,0.6);"> 点击时显�?Ciallo�?∠・ω< )⌒★ </div> </div> <div style="margin-bottom: 15px;"> <div style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;"> <span>音效音量</span> <span id="volumeValue" style="color: rgba(255,255,255,0.8);">80%</span> </div> <div style="display: flex; align-items: center; gap: 10px;"> <span style="font-size: 12px; color: rgba(255,255,255,0.6);">🔈</span> <input type="range" id="soundVolumeSlider" min="0" max="100" value="80" style="flex: 1; -webkit-appearance: none; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.2); outline: none;" oninput="updateSoundVolume(this.value)" onchange="testSoundVolume()"> <span style="font-size: 12px; color: rgba(255,255,255,0.6);">🔊</span> </div> </div> <div style="margin-bottom: 15px;"> <div style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;"> <span>音频缓存</span> <button class="mode-btn" id="audioCacheToggle" onclick="toggleAudioCache()" style="min-width: 100px;"> 已开�? </button> </div> <div id="audioCacheStatus" style="font-size: 12px; color: rgba(255,255,255,0.6);"> 音频缓存已开�? </div> </div> </div> </div>  <div class="setting-item" data-setting="cache"> <div class="setting-header" onclick="toggleSettingSection('cache')"> <h3>📦 缓存管理中心 <span class="toggle-icon">�?/span></h3> </div> <div class="setting-content" id="cache-content"> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;"> <button class="mode-btn" onclick="preloadBackgrounds()" style="font-size: 12px;"> 📥 缓存背景 </button> <button class="mode-btn" onclick="preloadSoundEffects()" style="font-size: 12px;"> 📥 缓存音效 </button> <button class="mode-btn" onclick="clearBackgroundCache()" style="font-size: 12px;"> 🗑�?清除背景 </button> <button class="mode-btn" onclick="clearSoundCache()" style="font-size: 12px;"> 🗑�?清除音效 </button> <button class="mode-btn" onclick="clearAllVideoCache()" style="font-size: 12px;"> 🗑�?清除视频 </button> </div> </div> </div>  <div class="setting-item" data-setting="video"> <div class="setting-header" onclick="toggleSettingSection('video')"> <h3>📹 视频播放设置 <span class="toggle-icon">�?/span></h3> </div> <div class="setting-content" id="video-content"> <div style="margin-bottom: 15px;"> <div style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;"> <span style="color: white;">视频清晰度优先级</span> <button class="mode-btn" id="qualityPriorityToggle" onclick="toggleQualityPriority()" style="min-width: 100px;"> 高清优先 </button> </div> <div style="font-size: 12px; color: rgba(255, 255, 255, 0.6);"> <div>高清优先: 4K/1080p �?720p</div> <div>流畅优先: 720p �?4K/1080p</div> </div> </div> <div style="margin-bottom: 15px;"> <div style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;"> <span style="color: white;">视频缓存</span> <button class="mode-btn" id="videoCacheToggle" onclick="toggleVideoCache()" style="min-width: 100px;"> 已关�? </button> </div> <div style="font-size: 12px; color: rgba(255, 255, 255, 0.6); margin-bottom: 10px;"> 在播放器中手动缓存您需要的视频 </div> <div id="videoCacheUsage" style="font-size: 12px; color: rgba(255, 255, 255, 0.6);"> 检查缓存状态中... </div> </div> <div> <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px;"> <button class="mode-btn" onclick="showVideoCacheStatus()" style="font-size: 12px;"> 🗂�?缓存信息 </button> <button class="mode-btn" onclick="clearAllVideoCache()" style="font-size: 12px;"> 🗑�?清除视频缓存 </button> </div> </div> </div> </div>  <div class="setting-item" data-setting="other"> <div class="setting-header" onclick="toggleSettingSection('other')"> <h3>⚙️ 其他设置 <span class="toggle-icon">�?/span></h3> </div> <div class="setting-content" id="other-content"> <div> <div style="margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;"> <span>进入网站自动全屏</span> <button class="mode-btn" id="autoFullscreenToggle" onclick="toggleAutoFullscreen()" style="min-width: 100px;"> 已关�? </button> </div> <div style="font-size: 12px; color: rgba(255, 255, 255, 0.6);"> <div>开启后进入网站将自动请求全屏模�?/div> </div> </div> </div> </div> </div> `; document.body.insertAdjacentHTML('beforeend', settingsHTML); // 添加缓存管理函数 window.preloadBackgrounds = async function() { if (!window.backgroundCacheEnabled) { alert('请先开启背景缓存功能！'); return; } const statusDiv = document.getElementById('cacheStatus'); if (statusDiv) { statusDiv.textContent = '正在缓存背景图片...'; statusDiv.style.color = 'rgba(255, 193, 7, 0.8)'; } if (backgroundCache) { try { console.log('开始预加载背景图片...'); await backgroundCache.preloadAllBackgrounds(); console.log('预加载背景完成，立即更新状态显�?); // 确保在缓存完成后立即刷新状�? if (window.updateCacheStatus) { await window.updateCacheStatus(); } // 缓存完成后重新加载背景选择器以显示缓存的图�? setTimeout(() => { loadBackgrounds(); }, 500); } catch (error) { console.error('预加载背景失�?', error); if (statusDiv) { statusDiv.textContent = '缓存背景图片失败'; statusDiv.style.color = 'rgba(255, 87, 87, 0.8)'; } } } }; window.clearBackgroundCache = async function() { if (confirm('确定要删除所有背景缓存吗？删除后需要重新下载背景图片�?)) { try { // 清理 blob URL if (backgroundCache) { backgroundCache.cleanupBlobUrls(); } // 删除缓存 if (backgroundCache && !backgroundCache.fallbackMode) { await caches.delete(backgroundCache.cacheName); } localStorage.removeItem('backgroundsCached'); localStorage.removeItem('backgroundsCacheVersion'); localStorage.setItem('backgroundCacheEnabled', 'false'); // 重新初始化缓�? backgroundCache = new BackgroundCacheManager(); // 如果视频缓存也被关闭，重新初始化 if (!videoCache || !videoCache.cacheEnabled) { videoCache = new VideoCacheManager(); } // 更新UI状�? window.backgroundCacheEnabled = false; updateCacheToggleUI(); alert('背景缓存已删除！'); if (window.updateCacheStatus) { window.updateCacheStatus(); } } catch (error) { console.error('删除缓存失败:', error); alert('删除缓存失败，请重试�?); } } }; // 缓存当前正在播放的视�? window.cacheCurrentVideo = async function() { if (!videoCache || !videoCache.cacheEnabled) { alert('请先在设置中开启视频缓存功能！'); return; } if (!currentVideo) { alert('当前没有播放视频'); return; } // 获取当前播放的视频文件名 const videoElement = document.getElementById('mainVideo'); const sourceElement = document.getElementById('videoSource'); if (!sourceElement || !sourceElement.src) { alert('无法获取当前视频信息'); return; } // 从src中提取文件名 const src = sourceElement.src; const filename = src.split('/').pop().split('?')[0]; // 移除查询参数 // 获取UI元素 const cacheBtn = document.getElementById('cacheVideoBtn'); const statusDiv = document.getElementById('cacheVideoStatus'); const progressContainer = document.getElementById('cacheProgressContainer'); const progressFill = document.getElementById('cacheProgressFill'); const progressText = document.getElementById('cacheProgressText'); // 更新按钮状�? if (cacheBtn) { cacheBtn.textContent = '�?缓存�?..'; cacheBtn.classList.add('caching'); cacheBtn.disabled = true; } if (statusDiv) { statusDiv.textContent = '准备缓存视频...'; statusDiv.className = 'cache-status caching'; } // 显示进度�? if (progressContainer) { progressContainer.style.display = 'block'; } if (progressFill) { progressFill.style.width = '0%'; } if (progressText) { progressText.textContent = '0%'; } // 进度回调函数 const onProgress = (progress, loaded, total) => { if (progressFill) { progressFill.style.width = `${progress}%`; } if (progressText) { const loadedMB = (loaded / 1024 / 1024).toFixed(1); const totalMB = (total / 1024 / 1024).toFixed(1); progressText.textContent = `${progress}% (${loadedMB}/${totalMB} MB)`; } if (statusDiv) { statusDiv.textContent = `正在缓存视频... ${progress}%`; } }; try { console.log('开始缓存当前视�?', filename); console.log('当前视频源URL:', src); // 解码文件名以处理特殊字符 const decodedFilename = decodeURIComponent(filename); console.log('解码后的文件�?', decodedFilename); const result = await videoCache.cacheSpecificVideo(decodedFilename, onProgress); if (result.success) { // 缓存成功 if (cacheBtn) { cacheBtn.textContent = '�?已缓�?; cacheBtn.classList.remove('caching'); cacheBtn.classList.add('cached'); cacheBtn.disabled = true; } if (statusDiv) { statusDiv.textContent = result.message; statusDiv.className = 'cache-status cached'; } // 完成时显�?00% if (progressFill) { progressFill.style.width = '100%'; } if (progressText) { progressText.textContent = '100% - 完成'; } // 3秒后隐藏进度�? setTimeout(() => { if (progressContainer) { progressContainer.style.display = 'none'; } }, 3000); // 更新全局缓存状�? if (videoCache.updateVideoCacheStatus) { videoCache.updateVideoCacheStatus(); } console.log('视频缓存成功:', filename); } else { throw new Error(result.message); } } catch (error) { console.error('缓存当前视频失败:', error); console.error('视频文件�?', filename); console.error('视频源URL:', src); console.error('错误详情:', { name: error.name, message: error.message, stack: error.stack }); // 恢复按钮状�? if (cacheBtn) { cacheBtn.textContent = '📥 缓存此视�?; cacheBtn.classList.remove('caching'); cacheBtn.disabled = false; } if (statusDiv) { // 提供更友好的错误信息 let friendlyMessage = '缓存失败'; if (error.message.includes('404')) { friendlyMessage = '视频文件未找�?(404)'; } else if (error.message.includes('403')) { friendlyMessage = '访问被拒�?(403)'; } else if (error.message.includes('CORS')) { friendlyMessage = '跨域请求失败'; } else if (error.message.includes('所有备用URL都无法访�?)) { friendlyMessage = '视频文件路径不正�?; } else if (error.message) { friendlyMessage = `缓存失败: ${error.message}`; } statusDiv.textContent = friendlyMessage; statusDiv.className = 'cache-status error'; } // 隐藏进度�? if (progressContainer) { progressContainer.style.display = 'none'; } // 提供更详细的错误提示 let alertMessage = '视频缓存失败！\n\n'; if (error.message.includes('404')) { alertMessage += '原因：视频文件未找到\n建议：请检查服务器上是否存在该视频文件'; } else if (error.message.includes('403')) { alertMessage += '原因：服务器拒绝访问\n建议：请检查文件权限或服务器配�?; } else if (error.message.includes('所有备用URL都无法访�?)) { alertMessage += '原因：无法找到正确的视频文件路径\n建议：请检查服务器目录结构或联系管理员'; } else { alertMessage += `详细错误�?{error.message}`; } alert(alertMessage); } }; // 检查当前视频的缓存状�? window.checkCurrentVideoCacheStatus = async function() { if (!videoCache || !currentVideo) { return; } const videoElement = document.getElementById('mainVideo'); const sourceElement = document.getElementById('videoSource'); const cacheBtn = document.getElementById('cacheVideoBtn'); const statusDiv = document.getElementById('cacheVideoStatus'); if (!sourceElement || !sourceElement.src || !cacheBtn || !statusDiv) { return; } try { // 从src中提取文件名 const src = sourceElement.src; const filename = src.split('/').pop().split('?')[0]; // 检查是否已缓存 const isCached = await videoCache.isVideoCached(filename); if (isCached) { cacheBtn.textContent = '�?已缓�?; cacheBtn.classList.add('cached'); cacheBtn.disabled = true; statusDiv.textContent = '此视频已缓存'; statusDiv.className = 'cache-status cached'; } else { cacheBtn.textContent = '📥 缓存此视�?; cacheBtn.classList.remove('cached', 'caching'); cacheBtn.disabled = false; statusDiv.textContent = '此视频未缓存'; statusDiv.className = 'cache-status'; } } catch (error) { console.warn('检查视频缓存状态失�?', error); statusDiv.textContent = '检查缓存状态失�?; statusDiv.className = 'cache-status error'; } }; window.clearAllVideoCache = async function() { if (confirm('确定要删除所有视频缓存吗？删除后需要重新下载视频文件�?)) { try { const success = await videoCache.clearAllVideoCache(); if (success) { alert('视频缓存已删除！'); // 更新UI状�? if (videoCache.updateVideoCacheStatus) { videoCache.updateVideoCacheStatus(); } } else { alert('删除视频缓存失败，请重试�?); } } catch (error) { console.error('删除视频缓存失败:', error); alert('删除视频缓存失败，请重试�?); } } }; window.showVideoCacheStatus = async function() { try { const [videoCount, cacheSize] = await Promise.all([ videoCache.getVideoCacheCount(), videoCache.getCacheSize() ]); const sizeMB = Math.round(cacheSize / 1024 / 1024); const message = `视频缓存状态：\n\n` + `缓存视频数量: ${videoCount} 个\n` + `估算缓存大小: ${sizeMB} MB\n` + `缓存状�? ${videoCache.cacheEnabled ? '已开�? : '已关�?}\n` + `最大缓存限�? ${Math.round(videoCache.maxCacheSize / 1024 / 1024)} MB`; alert(message); } catch (error) { console.error('获取视频缓存状态失�?', error); alert('获取视频缓存状态失�?); } }; window.toggleVideoCache = function() { if (!videoCache) { alert('视频缓存系统未初始化'); return; } const newState = videoCache.toggleVideoCache(); const toggle = document.getElementById('videoCacheToggle'); if (toggle) { updateVideoCacheToggleUI(toggle, newState); } alert(`视频缓存�?{newState ? '开�? : '关闭'}`); }; // 更新视频缓存开关UI function updateVideoCacheToggleUI(toggle, isEnabled) { if (!toggle) return; if (isEnabled) { toggle.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)'; toggle.style.color = 'white'; toggle.style.borderColor = 'transparent'; toggle.textContent = '已开�?; } else { toggle.style.background = 'rgba(40, 40, 40, 0.8)'; toggle.style.color = 'rgba(255, 255, 255, 0.7)'; toggle.style.borderColor = 'rgba(255, 255, 255, 0.2)'; toggle.textContent = '已关�?; } } // 切换背景缓存开�? window.toggleBackgroundCache = function() { // 切换缓存状�? window.backgroundCacheEnabled = !window.backgroundCacheEnabled; localStorage.setItem('backgroundCacheEnabled', window.backgroundCacheEnabled.toString()); console.log('背景缓存状态已切换�?', window.backgroundCacheEnabled ? '开�? : '关闭'); // 更新UI显示 updateCacheToggleUI(); if (window.backgroundCacheEnabled) { console.log('开启缓存，准备预加载背�?..'); // 开启缓存时自动预缓存，延迟100ms确保状态更�? setTimeout(() => { // 先预加载背景 preloadBackgrounds(); // 根据音频缓存状态决定是否同时缓存音�? if (window.audioCacheEnabled && soundEffectManager) { console.log('音频缓存已开启，同时预加载音�?..'); preloadSoundEffects(); } }, 100); } else { // 关闭缓存时立即更新状态显�? const statusDiv = document.getElementById('cacheStatus'); if (statusDiv) { statusDiv.textContent = '缓存未开�?; statusDiv.style.color = 'rgba(255, 255, 255, 0.6)'; } } // 重新加载背景选择器以应用缓存状�? setTimeout(() => { loadBackgrounds(); }, 500); }; // 更新缓存开关UI function updateCacheToggleUI() { const toggle = document.getElementById('cacheToggle'); if (!toggle) return; if (window.backgroundCacheEnabled) { // 开启状�?- 使用统一的渐变色 toggle.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)'; toggle.style.color = 'white'; toggle.style.borderColor = 'transparent'; toggle.textContent = '已开�?; } else { // 关闭状�? toggle.style.background = 'rgba(40, 40, 40, 0.8)'; toggle.style.color = 'rgba(255, 255, 255, 0.7)'; toggle.style.borderColor = 'rgba(255, 255, 255, 0.2)'; toggle.textContent = '未开�?; } } // 加载背景配置 loadBackgrounds(); // 初始化缓存开关状态和更新缓存状�?- 增加延迟确保所有初始化完成 setTimeout(() => { console.log('开始初始化缓存状态显�?..'); // 确保变量已正确初始化 if (typeof window.backgroundCacheEnabled === 'undefined') { window.backgroundCacheEnabled = localStorage.getItem('backgroundCacheEnabled') !== 'false'; console.log('重新初始化背景缓存状�?', window.backgroundCacheEnabled); } updateCacheToggleUI(); if (window.updateCacheStatus) { window.updateCacheStatus(); } if (window.updateSoundStatus) { window.updateSoundStatus(); } if (window.updateCialloStatus) { window.updateCialloStatus(); } // 初始化点击效果按钮状�? updateSoundToggleUI(); updateCialloToggleUI(); // 初始化音量滑�? setTimeout(() => { initializeSoundVolumeSlider(); }, 500); // 延迟确保DOM已完全加�? // 初始化音频缓存按钮状�? if (typeof window.audioCacheEnabled === 'undefined') { window.audioCacheEnabled = localStorage.getItem('audioCacheEnabled') !== 'false'; console.log('重新初始化音频缓存状�?', window.audioCacheEnabled ? '已开�? : '已关�?); } updateAudioCacheToggleUI(); // 初始化视频缓存按钮状�? if (videoCache) { const videoCacheToggle = document.getElementById('videoCacheToggle'); if (videoCacheToggle) { updateVideoCacheToggleUI(videoCacheToggle, videoCache.cacheEnabled); } // 更新视频缓存状态显�? videoCache.updateVideoCacheStatus(); } // 初始化背景自动切换状�? const bgToggle = document.getElementById('bgToggle'); if (bgToggle) { if (window.bgSwitchEnabled) { // 开启状态的样式 bgToggle.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)'; bgToggle.style.color = 'white'; bgToggle.style.borderColor = 'transparent'; const bgInterval = parseInt(localStorage.getItem('bgInterval')) || 30; bgToggle.textContent = `已开�?(${bgInterval}s)`; // 启动自动切换 if (!window.bgInterval) { window.bgInterval = setInterval(setRandomBackground, bgInterval * 1000); } } else { // 关闭状态的样式 bgToggle.style.background = 'rgba(40, 40, 40, 0.8)'; bgToggle.style.color = 'rgba(255, 255, 255, 0.7)'; bgToggle.style.borderColor = 'rgba(255, 255, 255, 0.2)'; bgToggle.textContent = '已关�?(∞s)'; } } }, 1500); // 增加延迟�?500ms，确保缓存管理器完全初始�? // 添加设置相关函数 window.toggleSettings = function() { const sidebar = document.querySelector('.settings-sidebar'); const settingsButton = document.querySelector('.settings-button'); sidebar.classList.toggle('active'); settingsButton.classList.toggle('active'); }; // 切换设置区域的折叠状�? window.toggleSettingSection = function(sectionId) { const content = document.getElementById(`${sectionId}-content`); const header = document.querySelector(`[data-setting="${sectionId}"] .setting-header`); const icon = header.querySelector('.toggle-icon'); // 切换折叠状�? content.classList.toggle('collapsed'); icon.classList.toggle('collapsed'); // 保存用户设置 const collapsedSections = JSON.parse(localStorage.getItem('collapsedSections') || '{}'); collapsedSections[sectionId] = content.classList.contains('collapsed'); localStorage.setItem('collapsedSections', JSON.stringify(collapsedSections)); console.log(`切换设置区域 ${sectionId}: ${content.classList.contains('collapsed') ? '已折�? : '已展开'}`); }; // 恢复设置区域的折叠状�? window.restoreSettingSections = function() { try { const collapsedSections = JSON.parse(localStorage.getItem('collapsedSections') || '{}'); // 设置区域ID列表 const sections = ['background', 'sound', 'cache', 'video', 'other']; sections.forEach(sectionId => { const content = document.getElementById(`${sectionId}-content`); const icon = document.querySelector(`[data-setting="${sectionId}"] .toggle-icon`); if (content && icon) { if (collapsedSections[sectionId]) { content.classList.add('collapsed'); icon.classList.add('collapsed'); } else { content.classList.remove('collapsed'); icon.classList.remove('collapsed'); } } }); console.log('已恢复设置区域折叠状�?); } catch (error) { console.warn('恢复设置区域折叠状态失�?', error); } }; // 直接更改背景图片 window.changeBgDirectly = async function(filename) { if (!filename) return; console.log('正在切换背景�?', filename); try { // 使用缓存的背景图�? const cachedImageUrl = await backgroundCache.getCachedBackground(filename); console.log('设置背景图片URL:', cachedImageUrl); document.body.style.setProperty('--bg-image', `url("${cachedImageUrl}")`); document.body.classList.remove('bg-fade'); void document.body.offsetWidth; document.body.classList.add('bg-fade'); // 检测背景亮度并调整文字颜色 if (brightnessDetector) { try { await brightnessDetector.detectAndAdjust(cachedImageUrl); } catch (error) { console.warn('手动切换背景时亮度检测失�?', error); } } localStorage.setItem('currentBg', filename); // 更新活动状�? const bgItems = document.querySelectorAll('.bg-item'); bgItems.forEach(item => { const itemImg = item.querySelector('img'); if (itemImg && itemImg.src.includes(filename)) { item.classList.add('active'); } else { item.classList.remove('active'); } }); console.log('背景切换成功 (来自缓存)'); } catch (error) { console.error('切换背景失败:', error); // 回退到原始方�? const imageUrl = `background/${filename}?t=${Date.now()}`; document.body.style.setProperty('--bg-image', `url("${imageUrl}")`); // 即使使用回退方法也尝试检测亮�? if (brightnessDetector) { try { await brightnessDetector.detectAndAdjust(imageUrl); } catch (error) { console.warn('回退方法亮度检测失�?', error); } } } }; // 添加点击外部关闭设置面板 document.addEventListener('click', function(event) { const sidebar = document.querySelector('.settings-sidebar'); const settingsButton = document.querySelector('.settings-button'); if (sidebar && sidebar.classList.contains('active')) { // 检查点击是否在设置面板内或设置按钮�? if (!sidebar.contains(event.target) && !settingsButton.contains(event.target)) { sidebar.classList.remove('active'); settingsButton.classList.remove('active'); } } }); // 背景切换开关状�? window.bgSwitchEnabled = false; // 切换背景切换开�? window.toggleBgSwitch = function() { const toggle = document.getElementById('bgToggle'); const container = document.getElementById('bgIntervalContainer'); window.bgSwitchEnabled = !window.bgSwitchEnabled; // 保存用户设置 localStorage.setItem('bgSwitchEnabled', window.bgSwitchEnabled.toString()); // 清除现有的定时器 if (window.bgInterval) { clearInterval(window.bgInterval); window.bgInterval = null; } if (window.bgSwitchEnabled) { // 启用背景切换 toggle.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)'; toggle.style.color = 'white'; toggle.style.borderColor = 'transparent'; const interval = document.getElementById('bgInterval').value; toggle.textContent = `已开�?(${interval}s)`; container.style.display = 'block'; updateInterval(interval); } else { // 禁用背景切换 toggle.style.background = 'rgba(40, 40, 40, 0.8)'; toggle.style.color = 'rgba(255, 255, 255, 0.7)'; toggle.style.borderColor = 'rgba(255, 255, 255, 0.2)'; toggle.textContent = '已关�?(∞s)'; container.style.display = 'none'; } }; // 更新背景切换间隔 window.updateInterval = function(interval) { // 清除现有的定时器 if (window.bgInterval) { clearInterval(window.bgInterval); window.bgInterval = null; } // 只有在开启状态才设置新的定时�? if (window.bgSwitchEnabled) { window.bgInterval = setInterval(setRandomBackground, interval * 1000); // 更新按钮文本显示当前间隔 const toggle = document.getElementById('bgToggle'); toggle.textContent = `已开�?(${interval}s)`; } }; // 视频清晰度优先级设置 window.qualityPriorityHigh = true; // 默认高清优先 // 切换清晰度优先级 window.toggleQualityPriority = function() { const toggle = document.getElementById('qualityPriorityToggle'); window.qualityPriorityHigh = !window.qualityPriorityHigh; updateQualityToggleUI(toggle, window.qualityPriorityHigh); // 保存设置 ConfigManager.setBoolConfig('qualityPriorityHigh', window.qualityPriorityHigh); // 如果当前有视频在播放，重新排序清晰度选项 if (currentVideo && currentVideo.sources) { updateQualitySelector(currentVideo.sources); } }; // 更新清晰度优先级按钮UI function updateQualityToggleUI(toggle, isHighPriority) { if (!toggle) return; if (isHighPriority) { // 高清优先 toggle.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)'; toggle.style.color = 'white'; toggle.style.borderColor = 'transparent'; toggle.textContent = '高清优先'; } else { // 流畅优先 - 也使用绿色渐�? toggle.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)'; toggle.style.color = 'white'; toggle.style.borderColor = 'transparent'; toggle.textContent = '流畅优先'; } } // 自动全屏功能 window.autoFullscreenEnabled = ConfigManager.getBoolConfig('autoFullscreenEnabled', false); // 切换自动全屏 window.toggleAutoFullscreen = function() { const toggle = document.getElementById('autoFullscreenToggle'); window.autoFullscreenEnabled = !window.autoFullscreenEnabled; updateAutoFullscreenToggleUI(toggle, window.autoFullscreenEnabled); // 保存设置 ConfigManager.setBoolConfig('autoFullscreenEnabled', window.autoFullscreenEnabled); // 重新检查自动全屏设�? if (window.autoFullscreenEnabled) { checkAutoFullscreen(); } else { cleanupAutoFullscreen(); } console.log('自动全屏设置:', window.autoFullscreenEnabled ? '已开�? : '已关�?); }; // 更新自动全屏按钮UI function updateAutoFullscreenToggleUI(toggle, isEnabled) { if (!toggle) return; if (isEnabled) { toggle.style.background = 'linear-gradient(135deg, #00b09b, #96c93d)'; toggle.style.color = 'white'; toggle.style.borderColor = 'transparent'; toggle.textContent = '已开�?; toggle.style.boxShadow = '0 0 15px rgba(0,176,155,0.3)'; } else { toggle.style.background = 'rgba(40, 40, 40, 0.8)'; toggle.style.color = 'rgba(255, 255, 255, 0.7)'; toggle.style.borderColor = 'rgba(255, 255, 255, 0.2)'; toggle.textContent = '已关�?; toggle.style.boxShadow = 'none'; } } // 尝试进入全屏 - 增强版本 function requestFullscreen() { const elem = document.documentElement; if (elem.requestFullscreen) { return elem.requestFullscreen().catch(err => { console.warn('标准全屏API失败:', err); return false; }); } else if (elem.webkitRequestFullscreen) { // Safari elem.webkitRequestFullscreen(); return Promise.resolve(true); } else if (elem.msRequestFullscreen) { // IE/Edge elem.msRequestFullscreen(); return Promise.resolve(true); } else if (elem.mozRequestFullScreen) { // Firefox elem.mozRequestFullScreen(); return Promise.resolve(true); } return Promise.resolve(false); } // 强制自动全屏 - 立即尝试版本 let autoFullscreenAttempts = 0; const maxAttempts = 5; async function forceAutoFullscreen() { if (!window.autoFullscreenEnabled || autoFullscreenAttempts >= maxAttempts) return; autoFullscreenAttempts++; console.log(`尝试自动全屏 (�?{autoFullscreenAttempts}�?...`); try { // 方法1: 立即尝试全屏（在页面加载早期成功率更高） const success = await requestFullscreen(); if (success !== false) { console.log('自动全屏成功�?); return; } } catch (error) { console.warn('直接全屏失败:', error); } // 方法2: 尝试多种DOM Ready状态下的全�? if (document.readyState === 'loading') { // 在DOM加载完成时立即尝�? document.addEventListener('DOMContentLoaded', async () => { try { await requestFullscreen(); } catch (e) { console.warn('DOMContentLoaded全屏失败:', e); } }, { once: true }); } // 方法3: 创建隐藏的自动点击元�? try { const autoClicker = document.createElement('div'); autoClicker.style.cssText = ` position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: transparent; z-index: -1; pointer-events: auto; `; autoClicker.addEventListener('click', async () => { await requestFullscreen(); if (autoClicker.parentNode) { autoClicker.parentNode.removeChild(autoClicker); } }); document.body.appendChild(autoClicker); // 立即触发点击 setTimeout(() => { const event = new MouseEvent('click', { view: window, bubbles: true, cancelable: true, clientX: window.innerWidth / 2, clientY: window.innerHeight / 2 }); autoClicker.dispatchEvent(event); }, 10); // 极短延迟 } catch (error) { console.warn('自动点击全屏失败:', error); } // 方法4: 更短间隔的重�? if (autoFullscreenAttempts < maxAttempts) { setTimeout(() => { forceAutoFullscreen(); }, 100); // 缩短�?00ms } else { console.log('所有自动全屏尝试均失败，显示用户提�?); showAutoFullscreenHint(); } } // 检查并执行立即自动全屏 function checkAutoFullscreen() { if (window.autoFullscreenEnabled) { console.log('自动全屏已开启，立即开始尝�?..'); autoFullscreenAttempts = 0; // 重置尝试次数 // 立即尝试（不延迟�? forceAutoFullscreen(); // 同时设置用户交互备用方案 setupUserInteractionBackup(); } else { // 清理所有相关设�? cleanupAutoFullscreen(); } } // 设置用户交互备用方案 function setupUserInteractionBackup() { // 如果强制全屏失败，则启用用户交互方案 setTimeout(() => { if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.mozFullScreenElement && !document.msFullscreenElement) { console.log('强制全屏失败，启用用户交互方�?..'); document.addEventListener('click', triggerAutoFullscreenOnInteraction, { once: true }); document.addEventListener('keydown', triggerAutoFullscreenOnInteraction, { once: true }); document.addEventListener('touchstart', triggerAutoFullscreenOnInteraction, { once: true, passive: true }); } }, 3000); // 3秒后检�? } // 用户交互触发的全�? async function triggerAutoFullscreenOnInteraction() { if (window.autoFullscreenEnabled) { console.log('检测到用户交互，执行全�?..'); await requestFullscreen(); hideAutoFullscreenHint(); cleanupAutoFullscreen(); } } // 清理自动全屏相关设置 function cleanupAutoFullscreen() { document.removeEventListener('click', triggerAutoFullscreenOnInteraction); document.removeEventListener('keydown', triggerAutoFullscreenOnInteraction); document.removeEventListener('touchstart', triggerAutoFullscreenOnInteraction); hideAutoFullscreenHint(); } // 显示自动全屏提示（仅在强制全屏失败时�? function showAutoFullscreenHint() { // 检查是否已经全�? if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) { return; // 已经全屏，不显示提示 } let hint = document.getElementById('autoFullscreenHint'); if (!hint) { hint = document.createElement('div'); hint.id = 'autoFullscreenHint'; hint.style.cssText = ` position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(255, 193, 7, 0.95); color: white; padding: 12px 20px; border-radius: 25px; font-size: 14px; font-weight: 500; z-index: 9999; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4); animation: slideDown 0.5s ease; cursor: pointer; transition: all 0.3s ease; border: 2px solid rgba(255, 193, 7, 0.8); `; hint.innerHTML = '�?浏览器阻止了自动全屏，点击此处手动全�?; hint.onclick = async () => { await requestFullscreen(); hideAutoFullscreenHint(); cleanupAutoFullscreen(); }; document.body.appendChild(hint); // 10秒后自动隐藏提示 setTimeout(() => { hideAutoFullscreenHint(); }, 10000); } } // 隐藏自动全屏提示 function hideAutoFullscreenHint() { const hint = document.getElementById('autoFullscreenHint'); if (hint && hint.parentNode) { hint.style.opacity = '0'; hint.style.transform = 'translateX(-50%) translateY(-20px)'; setTimeout(() => { if (hint.parentNode) { hint.parentNode.removeChild(hint); } }, 300); } } async function loadBackgrounds() { const bgGrid = document.getElementById('bgGrid'); console.log('开始加载背景列�?..'); // 显示加载状�? bgGrid.innerHTML = '<div style="text-align: center; padding: 20px; color: rgba(255,255,255,0.7);">加载背景列表�?..</div>'; let bgData = null; try { // 添加时间戳和随机数防止缓�? const timestamp = Date.now(); const random = Math.random().toString(36).substring(7); console.log('正在从服务器获取bg.json...'); const response = await fetch(`./data/backgrounds.json?t=${timestamp}&r=${random}`, { cache: 'no-store', // 禁用缓存 headers: { 'Cache-Control': 'no-cache', 'Pragma': 'no-cache' } }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } bgData = await response.json(); console.log('成功读取bg.json:', bgData); // 验证数据格式 if (!bgData.backgrounds || !Array.isArray(bgData.backgrounds)) { throw new Error('背景配置格式错误'); } const currentBg = localStorage.getItem('currentBg') || bgData.backgrounds[0].file; // 清空加载状�? bgGrid.innerHTML = ''; // 根据bg.json生成背景选项 console.log('开始加载背景列表，按JSON顺序显示�?); // 创建一个异步函数来处理每个背景�? const createBgItem = async (bg, index) => { // 从文件名中提取数�? const fileNumber = parseInt(bg.file.match(/\d+/)[0]); const bgItem = document.createElement('div'); bgItem.className = 'bg-item'; bgItem.dataset.number = fileNumber; // 保存实际的文件编�? bgItem.dataset.order = index; // 保存JSON中的顺序 if (bg.file === currentBg) { bgItem.classList.add('active'); console.log(`当前激活的背景: ${bg.name} (${bg.file}) - 编号${fileNumber}`); } const img = document.createElement('img'); // 尝试使用缓存的背景图�? if (backgroundCache && window.backgroundCacheEnabled) { try { const cachedImageUrl = await backgroundCache.getCachedBackground(bg.file); img.src = cachedImageUrl; console.log(`背景选择器使用缓存图�? ${bg.file}`); } catch (error) { console.warn(`缓存获取失败，使用原始图�? ${bg.file}`, error); img.src = `background/${bg.file}?_=${Date.now()}`; } } else { // 如果缓存未开启或不可用，使用原始图片 img.src = `background/${bg.file}?_=${Date.now()}`; } img.alt = bg.name; img.title = `${bg.name} (${bg.file})`; // 添加背景名称标签 const nameLabel = document.createElement('div'); nameLabel.className = 'bg-name'; nameLabel.textContent = bg.name; // 添加点击事件 bgItem.onclick = () => { document.querySelectorAll('.bg-item').forEach(item => item.classList.remove('active')); bgItem.classList.add('active'); changeBgDirectly(bg.file); }; bgItem.appendChild(img); bgItem.appendChild(nameLabel); return bgItem; }; // 并发创建背景项（限制并发数避免过载） const bgItems = []; const batchSize = 3; for (let i = 0; i < bgData.backgrounds.length; i += batchSize) { const batch = bgData.backgrounds.slice(i, i + batchSize); const batchPromises = batch.map((bg, batchIndex) => createBgItem(bg, i + batchIndex) ); const batchItems = await Promise.all(batchPromises); bgItems.push(...batchItems); // 添加小延迟避免阻塞UI if (i + batchSize < bgData.backgrounds.length) { await new Promise(resolve => setTimeout(resolve, 50)); } } // 按照文件编号顺序排序并添加到网格 bgItems.sort((a, b) => parseInt(a.dataset.number) - parseInt(b.dataset.number)) .forEach(item => bgGrid.appendChild(item)); } catch (error) { console.error('加载背景配置失败:', error); } // 设置默认间隔 document.getElementById('bgInterval').value = 30; // 如果没有当前背景，设置第一个为默认 const currentBg = localStorage.getItem('currentBg'); if (!currentBg && bgData && bgData.backgrounds && bgData.backgrounds.length > 0) { console.log('设置默认背景:', bgData.backgrounds[0].file); changeBgDirectly(bgData.backgrounds[0].file); } else if (currentBg) { // 如果有保存的背景，确保在背景列表中标记为活动状�? console.log('标记保存的背景为活动状�?', currentBg); setTimeout(() => { const bgItems = document.querySelectorAll('.bg-item'); bgItems.forEach(item => { const itemImg = item.querySelector('img'); if (itemImg && itemImg.src.includes(currentBg)) { item.classList.add('active'); } else { item.classList.remove('active'); } }); }, 100); } } // 加载设置 const bgInterval = parseInt(localStorage.getItem('bgInterval')) || 30; // 恢复用户保存的背�?- 改为默认开启随机背�? const savedBgEnabled = localStorage.getItem('bgSwitchEnabled'); if (savedBgEnabled === null) { // 首次访问，默认开启随机背�? restoreSavedBackground(); } else { // 已有保存设置，按照用户设置执�? restoreSavedBackground(); } // 页面卸载时清�?blob URL，防止内存泄�? window.addEventListener('beforeunload', () => { if (backgroundCache) { backgroundCache.cleanupBlobUrls(); } if (videoCache) { videoCache.cleanupBlobUrls(); } }); // 页面隐藏时也清理，适用于单页应�? document.addEventListener('visibilitychange', () => { if (document.hidden && backgroundCache) { backgroundCache.cleanupBlobUrls(); } if (document.hidden && videoCache) { videoCache.cleanupBlobUrls(); } }); // 更新缓存状态显�? window.updateCacheStatus = async function() { const statusDiv = document.getElementById('cacheStatus'); if (!statusDiv) return; try { console.log('开始检查缓存状�?..'); // 检查缓存开关状�? if (!window.backgroundCacheEnabled) { console.log('缓存功能已关�?); statusDiv.textContent = '缓存未开�?; statusDiv.style.color = 'rgba(255, 255, 255, 0.6)'; return; } console.log('缓存功能已开启，检查缓存内�?..'); // 直接检查Cache API中的实际内容 const [bgCount, audioCount] = await Promise.all([ window.getBgCacheCount(), window.getAudioCacheCount() ]); console.log(`检测到 ${bgCount} 个背景图片缓�? ${audioCount} 个音频缓存`); // 不再依赖lastCached时间戳，直接根据缓存计数判断 if (bgCount > 0 || audioCount > 0) { // 有实际缓存数�? const cacheSize = await window.getCacheSize(); const lastCached = localStorage.getItem('backgroundsCached'); let cacheDate = '未知日期'; // 更健壮的日期解析处理 if (lastCached) { try { const timestamp = parseInt(lastCached); if (!isNaN(timestamp)) { cacheDate = new Date(timestamp).toLocaleDateString(); console.log('缓存时间戳解析成�?', timestamp, '->', cacheDate); } else { console.warn('缓存时间戳解析失败，非数�?', lastCached); } } catch (error) { console.warn('缓存时间戳解析异�?', error); } } else { console.log('未找到缓存时间戳'); // 找到缓存但没有时间戳，立即设置当前时�? localStorage.setItem('backgroundsCached', Date.now().toString()); } let statusText = ''; if (bgCount > 0 && audioCount > 0) { statusText = `已缓�?${bgCount} 张背景图�? ${audioCount} 个音�?br>${cacheDate} | �?{cacheSize}MB`; } else if (bgCount > 0) { statusText = `已缓�?${bgCount} 张背景图�? 音频未缓�?br>${cacheDate} | �?{cacheSize}MB`; } else if (audioCount > 0) { statusText = `背景未缓�? 已缓�?${audioCount} 个音�?br>${cacheDate} | �?{cacheSize}MB`; } statusDiv.innerHTML = statusText; statusDiv.style.color = 'rgba(76, 175, 80, 0.8)'; console.log('显示缓存状�? 已缓�?); } else { // 缓存开启但没有数据 statusDiv.textContent = '缓存已开启，等待缓存背景和音�?..'; statusDiv.style.color = 'rgba(255, 193, 7, 0.8)'; console.log('显示缓存状�? 等待缓存'); } } catch (error) { console.warn('更新缓存状态失�?', error); statusDiv.textContent = '缓存状态检查失�?; statusDiv.style.color = 'rgba(255, 87, 87, 0.8)'; } }; // 获取缓存的背景图片数�? window.getBgCacheCount = async function() { try { if (!backgroundCache) { console.warn('背景缓存管理器未初始�?); return 0; } if (backgroundCache.fallbackMode) { console.warn('缓存处于回退模式，无法获取准确计�?); return 0; } try { const cache = await caches.open(backgroundCache.cacheName); const requests = await cache.keys(); // 只计算背景图片的缓存数量 const bgCount = requests.filter(req => req.url.includes('/resource/backgrounds/') && !req.url.includes('ciallo.mp3') ).length; console.log(`当前背景缓存数量: ${bgCount} (总缓存条�? ${requests.length})`); return bgCount; } catch (error) { console.warn('缓存API调用失败:', error); return 0; } } catch (error) { console.warn('无法计算缓存数量:', error); return 0; } }; // 获取缓存的音频数�? window.getAudioCacheCount = async function() { try { if (!soundEffectManager) { console.warn('音效管理器未初始�?); return 0; } if (soundEffectManager.fallbackMode) { console.warn('音效缓存处于回退模式，无法获取准确计�?); return 0; } try { const cache = await caches.open(soundEffectManager.cacheName); const requests = await cache.keys(); // 计算音频缓存数量 const audioCount = requests.filter(req => req.url.includes('ciallo.mp3') || req.url.includes('.mp3') || req.url.includes('.wav') || req.url.includes('.ogg') ).length; console.log(`当前音频缓存数量: ${audioCount} (总缓存条�? ${requests.length})`); return audioCount; } catch (error) { console.warn('音频缓存API调用失败:', error); return 0; } } catch (error) { console.warn('无法计算音频缓存数量:', error); return 0; } }; // 保留旧函数以保持兼容�? window.getCacheCount = window.getBgCacheCount; // 估算缓存大小 window.getCacheSize = async function() { try { if ((!backgroundCache || backgroundCache.fallbackMode) && (!soundEffectManager || soundEffectManager.fallbackMode)) { return 0; } try { let totalSize = 0; // 估算背景图片缓存大小 if (backgroundCache && !backgroundCache.fallbackMode) { const bgCache = await caches.open(backgroundCache.cacheName); const bgRequests = await bgCache.keys(); // 只计算背景图片的缓存 const bgImageRequests = bgRequests.filter(req => req.url.includes('/resource/backgrounds/') && !req.url.includes('ciallo.mp3') ); // 估算大小 - 每张图约500KB const bgSizeInMB = Math.round(bgImageRequests.length * 0.5 * 10) / 10; console.log(`背景缓存大小估算: ${bgSizeInMB}MB (${bgImageRequests.length}张图�?`); totalSize += bgSizeInMB; } // 估算音频缓存大小 if (soundEffectManager && !soundEffectManager.fallbackMode) { const audioCache = await caches.open(soundEffectManager.cacheName); const audioRequests = await audioCache.keys(); // 只计算音频文�? const audioFileRequests = audioRequests.filter(req => req.url.includes('.mp3') || req.url.includes('.wav') || req.url.includes('.ogg') ); // 估算大小 - 每个音频�?00KB const audioSizeInMB = Math.round(audioFileRequests.length * 0.1 * 10) / 10; console.log(`音频缓存大小估算: ${audioSizeInMB}MB (${audioFileRequests.length}个音频文�?`); totalSize += audioSizeInMB; } return totalSize || 0.1; // 至少显示0.1MB } catch (error) { console.warn('缓存API调用失败:', error); return 0; } } catch (error) { console.warn('无法计算缓存大小:', error); return 0; } }; // 默认开启自动切�?- 修改这里 window.bgSwitchEnabled = savedBgEnabled !== 'false'; // 只有明确设置为false才关�? // 初始化清晰度优先级设�? window.qualityPriorityHigh = ConfigManager.getBoolConfig('qualityPriorityHigh', true); // 更新清晰度优先级按钮状�? const qualityToggle = document.getElementById('qualityPriorityToggle'); if (qualityToggle) { updateQualityToggleUI(qualityToggle, window.qualityPriorityHigh); } initMouseFollowBackground(); // 预加载前5张背景图�? [1,2,3,4,5].forEach(num => { const img = new Image(); img.src = `background/${num}.png`; }); // �?initializeApp 函数中，替换原来的公告自动关闭代�? // 初始化公告显示状�? initializeAnnouncements(); // 可选：设置自动关闭时间（如果需要的话） setTimeout(() => { // 自动关闭所有未手动关闭的公�? ['announcement1', 'announcement2'].forEach(announcementId => { const announcement = document.getElementById(announcementId); if (announcement && !announcement.classList.contains('hide') && announcement.style.display !== 'none') { closeAnnouncement(announcementId); } }); }, 120000); // 2分钟后自动关�? // 初始化自动全屏设置UI setTimeout(() => { const autoFullscreenToggle = document.getElementById('autoFullscreenToggle'); if (autoFullscreenToggle) { updateAutoFullscreenToggleUI(autoFullscreenToggle, window.autoFullscreenEnabled); } }, 100); // 恢复设置区域的折叠状�? setTimeout(() => { restoreSettingSections(); }, 200); // 性能监控报告 const initTime = performance.now() - startTime; console.log(`应用初始化完成，耗时: ${initTime.toFixed(2)}ms`); // 内存使用监控 if (performance.memory) { console.log(`内存使用: ${(performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}MB`); } // 环境检测和调试信息 console.log('=== 环境检测信�?==='); console.log('当前页面URL:', window.location.href); console.log('协议:', window.location.protocol); console.log('主机:', window.location.host); console.log('路径:', window.location.pathname); console.log('User Agent:', navigator.userAgent); console.log('是否支持Service Worker:', 'serviceWorker' in navigator); console.log('是否支持Cache API:', 'caches' in window); console.log('======================'); // 检查自动全�? checkAutoFullscreen(); // 最后加载视频数�? loadVideoData(); } catch (error) { console.error('应用初始化失�?', error); // 显示错误提示给用�? document.body.innerHTML = ` <div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; background: rgba(0,0,0,0.8); padding: 20px; border-radius: 10px;"> <h3>⚠️ 应用初始化失�?/h3> <p>请刷新页面重�?/p> <button onclick="location.reload()" style="margin-top: 10px; padding: 10px 20px; background: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;"> 刷新页面 </button> </div> `; } } // 早期自动全屏尝试 - 在页面加载的最早期执行 (function earlyAutoFullscreen() { // 立即检查是否开启了自动全屏 const autoFullscreenEnabled = localStorage.getItem('autoFullscreenEnabled') === 'true'; if (autoFullscreenEnabled) { console.log('检测到自动全屏设置，立即尝�?..'); // 立即尝试全屏 const elem = document.documentElement; const tryFullscreen = () => { if (elem.requestFullscreen) { elem.requestFullscreen().then(() => { console.log('早期自动全屏成功�?); }).catch(() => { console.log('早期自动全屏失败，将在初始化时重�?); }); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } }; // 立即尝试 tryFullscreen(); // 在文档状态变化时再次尝试 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', tryFullscreen, { once: true }); } // 在页面完全加载时再次尝试 window.addEventListener('load', tryFullscreen, { once: true }); } })(); // 页面加载完成后初始化 - 优化版本 document.addEventListener('DOMContentLoaded', () => { // 立即添加背景淡入效果�? document.body.classList.add('bg-fade'); initializeApp(); }); // 如果DOM已经加载完成，直接执�?if (document.readyState !== 'loading') { document.body.classList.add('bg-fade'); initializeApp(); } // 页面卸载时清理资�?window.addEventListener('beforeunload', () => { try { // 清理blob URL if (backgroundCache) { backgroundCache.cleanupBlobUrls(); } // 清理搜索缓存 if (searchCache) { searchCache.clear(); } // 清理DOM缓存 domCache.clear(); // 清理视频缓存 if (window.allVideosCache) { window.allVideosCache = null; } // 取消未完成的搜索请求 if (searchAbortController) { searchAbortController.abort(); } console.log('页面资源清理完成'); } catch (error) { console.warn('资源清理失败:', error); } }); // 页面隐藏时的资源管理 document.addEventListener('visibilitychange', () => { if (document.hidden) { // 页面隐藏时清理一些非必要资源 if (searchCache && searchCache.size > 10) { // 清理部分搜索缓存 const entries = Array.from(searchCache.entries()); entries.slice(0, entries.length - 10).forEach(([key]) => { searchCache.delete(key); }); } // 暂停背景自动切换 if (window.bgInterval) { clearInterval(window.bgInterval); window.bgSwitchPaused = true; } } else { // 页面重新显示时恢复背景自动切�? if (window.bgSwitchPaused && window.bgSwitchEnabled) { const interval = parseInt(localStorage.getItem('bgInterval')) || 30; window.bgInterval = setInterval(setRandomBackground, interval * 1000); window.bgSwitchPaused = false; } } }); // 页面加载完成后检测初始背景亮�?window.addEventListener('load', () => { // 延迟一点时间确保背景已经加载并且亮度检测器已初始化 setTimeout(async () => { if (brightnessDetector) { try { // 获取当前设置的背景图片URL const bgImageValue = getComputedStyle(document.body).getPropertyValue('--bg-image'); if (bgImageValue && bgImageValue !== 'none') { // 提取URL const urlMatch = bgImageValue.match(/url\(["']?([^"']*)["']?\)/); if (urlMatch && urlMatch[1]) { const imageUrl = urlMatch[1]; console.log('检测初始背景亮�?', imageUrl); await brightnessDetector.detectAndAdjust(imageUrl); } else { console.log('CSS变量中没有有效的背景图片URL，使用默认样�?); applyDefaultTextStyle(); } } else { // 如果没有设置背景，检查是否有保存的背景或随机背景 console.log('没有检测到当前背景，等待背景设置完�?..'); // 等待背景设置完成后再检�? const checkBgInterval = setInterval(async () => { const currentBgImageValue = getComputedStyle(document.body).getPropertyValue('--bg-image'); if (currentBgImageValue && currentBgImageValue !== 'none') { clearInterval(checkBgInterval); const urlMatch = currentBgImageValue.match(/url\(["']?([^"']*)["']?\)/); if (urlMatch && urlMatch[1]) { console.log('延迟检测到背景:', urlMatch[1]); await brightnessDetector.detectAndAdjust(urlMatch[1]); } else { applyDefaultTextStyle(); } } }, 500); // 10秒后停止检查，使用默认样式 setTimeout(() => { clearInterval(checkBgInterval); applyDefaultTextStyle(); }, 10000); } } catch (error) { console.warn('初始背景亮度检测失�?', error); applyDefaultTextStyle(); } } else { console.warn('亮度检测器未初始化'); applyDefaultTextStyle(); } // 应用默认文字样式的辅助函�? function applyDefaultTextStyle() { console.log('应用默认文字样式（深色背景）'); const headerTitle = document.querySelector('header h1'); if (headerTitle) { headerTitle.classList.remove('light-bg'); headerTitle.classList.add('dark-bg'); } } }, 1000); }); </script> </body> </html>