回退

public/js/main.js

@@ -63,6 +63,7 @@ document.addEventListener('DOMContentLoaded', () => {
     let seekOffset = 0;
     let isDraggingSeek = false;
     let isStreamActive = false;
+    let pendingSeekTimeout = null;
 
     const formatBytes = (bytes) => {
         if (!bytes || bytes === 0) return '0 B';
@@ -101,6 +102,8 @@ document.addEventListener('DOMContentLoaded', () => {
             if (message.type === 'duration' && message.duration) {
                 videoDuration = message.duration;
                 if (seekTotalTime) seekTotalTime.textContent = formatTime(videoDuration);
+                showSeekBar();
+                updateSeekBarPosition(seekOffset + (videoPlayer.currentTime || 0));
             }
             if (message.type === 'progress') {
                 handleProgress(message.progress);
@@ -283,9 +286,15 @@ document.addEventListener('DOMContentLoaded', () => {
         if (!selectedKey || !selectedBucket || videoDuration <= 0) return;
         targetSeconds = Math.max(0, Math.min(targetSeconds, videoDuration - 0.5));
         seekOffset = targetSeconds;
+        isStreamActive = false;
+        updateSeekBarPosition(targetSeconds);
 
         // Show seeking indicator
         if (seekingOverlay) seekingOverlay.classList.remove('hidden');
+        if (pendingSeekTimeout) {
+            clearTimeout(pendingSeekTimeout);
+            pendingSeekTimeout = null;
+        }
 
         // Build new stream URL with ss parameter
         const codec = codecSelect?.value || 'h264';
@@ -304,11 +313,12 @@ document.addEventListener('DOMContentLoaded', () => {
             videoPlayer.play().catch(() => {});
             videoPlayer.removeEventListener('canplay', onCanPlay);
         };
-        videoPlayer.addEventListener('canplay', onCanPlay);
+        videoPlayer.addEventListener('canplay', onCanPlay, { once: true });
 
         // Timeout fallback: hide seeking overlay after 8s even if canplay doesn't fire
-        setTimeout(() => {
+        pendingSeekTimeout = setTimeout(() => {
             if (seekingOverlay) seekingOverlay.classList.add('hidden');
+            pendingSeekTimeout = null;
         }, 8000);
     };
 
@@ -591,9 +601,13 @@ document.addEventListener('DOMContentLoaded', () => {
         playerOverlay.classList.add('hidden');
         videoPlayer.classList.add('hidden');
         videoPlayer.pause();
+        videoPlayer.removeAttribute('src');
+        videoPlayer.load();
         isStreamActive = false;
         videoDuration = 0;
         seekOffset = 0;
+        if (seekCurrentTime) seekCurrentTime.textContent = formatTime(0);
+        if (seekTotalTime) seekTotalTime.textContent = formatTime(0);
         hideSeekBar();
 
         if (transcodeBtn) {
@@ -652,6 +666,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 videoPlayer.classList.remove('hidden');
                 isStreamActive = true;
                 showSeekBar();
+                updateSeekBarPosition(seekOffset);
                 if (playBtn) {
                     playBtn.disabled = false;
                     playBtn.textContent = 'Play';
@@ -680,6 +695,9 @@ document.addEventListener('DOMContentLoaded', () => {
 
             handleProgress({ status: 'cancelled', percent: 0, details: 'Transcode stopped' });
             isStreamActive = false;
+            videoPlayer.pause();
+            videoPlayer.removeAttribute('src');
+            videoPlayer.load();
             hideSeekBar();
             if (transcodeBtn) {
                 transcodeBtn.disabled = false;
@@ -719,6 +737,7 @@ document.addEventListener('DOMContentLoaded', () => {
         isStreamActive = true;
         showSeekBar();
         videoPlayer.addEventListener('loadedmetadata', () => {
+            updateSeekBarPosition(seekOffset);
             if (playBtn) {
                 playBtn.disabled = false;
                 playBtn.textContent = 'Play';