新增编码器选择

public/js/main.js

@@ -3,14 +3,23 @@ document.addEventListener('DOMContentLoaded', () => {
     const loadingSpinner = document.getElementById('loading-spinner');
     const refreshBtn = document.getElementById('refresh-btn');
     const codecSelect = document.getElementById('codec-select');
+    const encoderSelect = document.getElementById('encoder-select');
     const playerOverlay = document.getElementById('player-overlay');
     const transcodingOverlay = document.getElementById('transcoding-overlay');
     const videoPlayer = document.getElementById('video-player');
     const nowPlaying = document.getElementById('now-playing');
     const currentVideoTitle = document.getElementById('current-video-title');
+    const playBtn = document.getElementById('play-btn');
 
     let currentPollInterval = null;
 
+    if (playBtn) {
+        playBtn.addEventListener('click', () => {
+            videoPlayer.play().catch(e => console.log('Play blocked:', e));
+            playBtn.classList.add('hidden');
+        });
+    }
+
     // Fetch list of videos from the backend
     const fetchVideos = async () => {
         videoListEl.classList.add('hidden');
@@ -134,6 +143,7 @@ document.addEventListener('DOMContentLoaded', () => {
         playerOverlay.classList.add('hidden');
         videoPlayer.classList.add('hidden');
         videoPlayer.pause();
+        if (playBtn) playBtn.classList.add('hidden');
 
         nowPlaying.classList.remove('hidden');
         currentVideoTitle.textContent = key.split('/').pop();
@@ -142,10 +152,11 @@ document.addEventListener('DOMContentLoaded', () => {
 
         try {
             const codec = codecSelect?.value || 'h264';
+            const encoder = encoderSelect?.value || 'software';
             const res = await fetch('/api/transcode', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ key, codec })
+                body: JSON.stringify({ key, codec, encoder })
             });
             const data = await res.json();
 
@@ -170,7 +181,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 const res = await fetch(`/api/status?key=${encodeURIComponent(key)}`);
                 const data = await res.json();
 
-                if (data.ready) {
+                    if (data.ready) {
                     stopPolling();
                     playHlsStream(data.hlsUrl);
                 } else if (attempts >= maxAttempts) {
@@ -194,20 +205,21 @@ document.addEventListener('DOMContentLoaded', () => {
     const playHlsStream = (url) => {
         transcodingOverlay.classList.add('hidden');
         videoPlayer.classList.remove('hidden');
+        playBtn.classList.add('hidden');
 
         if (Hls.isSupported()) {
             const hls = new Hls();
             hls.loadSource(url);
             hls.attachMedia(videoPlayer);
             hls.on(Hls.Events.MANIFEST_PARSED, () => {
-                videoPlayer.play().catch(e => console.log('Auto-play blocked'));
+                playBtn.classList.remove('hidden');
             });
         } else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
             // Safari uses native HLS
             videoPlayer.src = url;
             videoPlayer.addEventListener('loadedmetadata', () => {
-                videoPlayer.play().catch(e => console.log('Auto-play blocked'));
-            });
+                playBtn.classList.remove('hidden');
+            }, { once: true });
         }
     };