添加预制切片

public/index.html

@@ -148,6 +148,7 @@
                         </div>
                         <button id="transcode-btn" class="play-btn hidden">开始播放</button>
                         <button id="stop-transcode-btn" class="play-btn stop-btn hidden">停止播放</button>
+                        <button id="pre-slice-btn" class="play-btn stop-btn hidden">预切片 (HLS)</button>
                         <button id="clear-playing-download-cache-btn" class="play-btn stop-btn hidden">清空下载缓存</button>
                         <button id="clear-playing-transcode-cache-btn" class="play-btn stop-btn hidden">清空转码缓存</button>
                     </div>

public/js/main.js

@@ -18,6 +18,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const currentVideoTitle = document.getElementById('current-video-title');
     const transcodeBtn = document.getElementById('transcode-btn');
     const stopTranscodeBtn = document.getElementById('stop-transcode-btn');
+    const preSliceBtn = document.getElementById('pre-slice-btn');
     const clearPlayingDownloadBtn = document.getElementById('clear-playing-download-cache-btn');
     const clearPlayingTranscodeBtn = document.getElementById('clear-playing-transcode-cache-btn');
     const themeSelector = document.getElementById('theme-selector');
@@ -885,6 +886,10 @@ document.addEventListener('DOMContentLoaded', () => {
             stopTranscodeBtn.textContent = '停止播放';
         }
         
+        if (preSliceBtn) {
+            preSliceBtn.classList.remove('hidden');
+            preSliceBtn.disabled = false;
+        }
         if (clearPlayingDownloadBtn) {
             if (hasDownloadCache) clearPlayingDownloadBtn.classList.remove('hidden');
             else clearPlayingDownloadBtn.classList.add('hidden');
@@ -1098,6 +1103,44 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
+    const preSliceVideo = async () => {
+        if (!selectedKey) return;
+        preSliceBtn.disabled = true;
+        preSliceBtn.textContent = '预切片中...';
+
+        try {
+            const sessionId = localStorage.getItem('sessionId');
+            const body = {
+                bucket: selectedBucket,
+                key: selectedKey,
+                encoder: encoderSelect?.value || 'h264_rkmpp',
+                decoder: 'auto',
+                subtitleIndex: subtitleSelector?.value || '-1',
+                sessionId
+            };
+
+            const res = await fetch('/api/pre-slice', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body)
+            });
+
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.error || 'Pre-slice failed');
+
+            alert('已在后台开始预切片，您可以在进度条中查看进度。');
+        } catch (err) {
+            console.error('Pre-slice failed:', err);
+            alert(`预切片失败: ${err.message}`);
+            preSliceBtn.disabled = false;
+            preSliceBtn.textContent = '预切片 (HLS)';
+        }
+    };
+
+    if (preSliceBtn) {
+        preSliceBtn.addEventListener('click', preSliceVideo);
+    }
+
     const stopPolling = () => {
         if (currentPollInterval) {
             clearInterval(currentPollInterval);