修改了前端界面，增加了编码方式和硬件编码器的选择，并添加了播放按钮和转码进度显示。同时在后端引入了fluent-ffmpeg库来处理视频转码，并使用WebSocket实时传输转码进度信息到前端。

public/js/main.js

@@ -246,7 +246,7 @@ document.addEventListener('DOMContentLoaded', () => {
             if (data.error) throw new Error(data.error);
 
             if (!wsConnected) {
-                pollForHlsReady(key, data.hlsUrl);
+                pollForHlsReady(key, data.mp4Url);
             }
         } catch (err) {
             console.error(err);
@@ -254,7 +254,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
-    // Poll the backend to check if the generated m3u8 file is accessible
+    // Poll the backend to check if the generated MP4 file is accessible
     const pollForHlsReady = (key, hlsUrl) => {
         let attempts = 0;
         const maxAttempts = 120; // 60 seconds max wait for first segment
@@ -291,35 +291,22 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
-    // Initialize HLS Player
+    // Initialize MP4 Player
     const playHlsStream = (url) => {
         transcodingOverlay.classList.add('hidden');
         videoPlayer.classList.remove('hidden');
         playBtn.classList.add('hidden');
         resetProgress();
 
-        if (Hls.isSupported()) {
-            const hls = new Hls();
-            hls.loadSource(url);
-            hls.attachMedia(videoPlayer);
-            hls.on(Hls.Events.MANIFEST_PARSED, () => {
-                if (playBtn) {
-                    playBtn.disabled = false;
-                    playBtn.textContent = 'Play';
-                    playBtn.classList.remove('hidden');
-                }
-            });
-        } else if (videoPlayer.canPlayType('application/vnd.apple.mpegurl')) {
-            // Safari uses native HLS
-            videoPlayer.src = url;
-            videoPlayer.addEventListener('loadedmetadata', () => {
-                if (playBtn) {
-                    playBtn.disabled = false;
-                    playBtn.textContent = 'Play';
-                    playBtn.classList.remove('hidden');
-                }
-            }, { once: true });
-        }
+        videoPlayer.src = url;
+        videoPlayer.load();
+        videoPlayer.addEventListener('loadedmetadata', () => {
+            if (playBtn) {
+                playBtn.disabled = false;
+                playBtn.textContent = 'Play';
+                playBtn.classList.remove('hidden');
+            }
+        }, { once: true });
     };
 
     // Bind events