diff --git a/public/index.html b/public/index.html
index 4e0b3f5..1d83722 100644
--- a/public/index.html
+++ b/public/index.html
@@ -120,6 +120,21 @@
+
+
+
+
+
+ 00:00:00
+ /
+ 00:00:00
+
Now Playing
diff --git a/public/js/main.js b/public/js/main.js
index fe837a2..1766b46 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -38,6 +38,15 @@ document.addEventListener('DOMContentLoaded', () => {
const statBitrate = document.getElementById('stat-bitrate');
const statTime = document.getElementById('stat-time');
+ // Custom seek bar elements
+ const customSeekContainer = document.getElementById('custom-seek-container');
+ const seekBar = document.getElementById('seek-bar');
+ const seekBarProgress = document.getElementById('seek-bar-progress');
+ const seekBarHandle = document.getElementById('seek-bar-handle');
+ const seekCurrentTime = document.getElementById('seek-current-time');
+ const seekTotalTime = document.getElementById('seek-total-time');
+ const seekingOverlay = document.getElementById('seeking-overlay');
+
let currentPollInterval = null;
let selectedBucket = null;
let selectedKey = null;
@@ -49,6 +58,12 @@ document.addEventListener('DOMContentLoaded', () => {
let s3Password = '';
let s3AuthHeaders = {};
+ // Seek state
+ let videoDuration = 0;
+ let seekOffset = 0;
+ let isDraggingSeek = false;
+ let isStreamActive = false;
+
const formatBytes = (bytes) => {
if (!bytes || bytes === 0) return '0 B';
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
@@ -57,6 +72,14 @@ document.addEventListener('DOMContentLoaded', () => {
return (bytes / Math.pow(k, i)).toFixed(i > 0 ? 2 : 0) + ' ' + units[i];
};
+ const formatTime = (seconds) => {
+ if (!seconds || !isFinite(seconds) || seconds < 0) return '00:00:00';
+ const h = Math.floor(seconds / 3600);
+ const m = Math.floor((seconds % 3600) / 60);
+ const s = Math.floor(seconds % 60);
+ return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+ };
+
const sendWsMessage = (message) => {
if (ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify(message));
@@ -73,10 +96,16 @@ document.addEventListener('DOMContentLoaded', () => {
const handleWsMessage = (event) => {
try {
const message = JSON.parse(event.data);
- if (message.type === 'progress' && message.key === currentVideoKey) {
+ if (message.key !== currentVideoKey) return;
+
+ if (message.type === 'duration' && message.duration) {
+ videoDuration = message.duration;
+ if (seekTotalTime) seekTotalTime.textContent = formatTime(videoDuration);
+ }
+ if (message.type === 'progress') {
handleProgress(message.progress);
}
- if (message.type === 'ready' && message.key === currentVideoKey) {
+ if (message.type === 'ready') {
handleProgress({ status: 'finished', percent: 100, details: 'Ready to play' });
playMp4Stream(message.mp4Url);
}
@@ -104,7 +133,6 @@ document.addEventListener('DOMContentLoaded', () => {
downloadSizeText.textContent = `${downloaded} / ${total} — 下载完成`;
downloadProgressText.textContent = '100%';
downloadProgressFill.style.width = '100%';
- // Brief pause then transition to transcode phase
setTimeout(() => {
showTranscodePhase();
}, 600);
@@ -115,7 +143,6 @@ document.addEventListener('DOMContentLoaded', () => {
transcodeProgressFill.style.width = `${percent}%`;
transcodeDetailText.textContent = progress.details || 'FFmpeg 转码中...';
- // Show stats
if (progress.fps || progress.bitrate || progress.timemark) {
transcodeStats.classList.remove('hidden');
statFps.textContent = progress.fps ? `${progress.fps} fps` : '';
@@ -147,13 +174,11 @@ document.addEventListener('DOMContentLoaded', () => {
};
const resetPhases = () => {
- // Reset download phase
if (downloadPhase) downloadPhase.classList.remove('hidden');
if (downloadSizeText) downloadSizeText.textContent = '准备下载...';
if (downloadProgressText) downloadProgressText.textContent = '0%';
if (downloadProgressFill) downloadProgressFill.style.width = '0%';
- // Reset transcode phase
if (transcodePhase) transcodePhase.classList.add('hidden');
if (transcodeDetailText) transcodeDetailText.textContent = 'FFmpeg 转码中...';
if (transcodeProgressText) transcodeProgressText.textContent = '0%';
@@ -166,7 +191,6 @@ document.addEventListener('DOMContentLoaded', () => {
if (statBitrate) statBitrate.textContent = '';
if (statTime) statTime.textContent = '';
- // Reset buttons
if (stopTranscodeBtn) {
stopTranscodeBtn.classList.add('hidden');
stopTranscodeBtn.disabled = false;
@@ -174,6 +198,122 @@ document.addEventListener('DOMContentLoaded', () => {
}
};
+ // --- Custom seek bar ---
+ const showSeekBar = () => {
+ if (customSeekContainer && videoDuration > 0) {
+ customSeekContainer.classList.remove('hidden');
+ }
+ };
+
+ const hideSeekBar = () => {
+ if (customSeekContainer) customSeekContainer.classList.add('hidden');
+ };
+
+ const updateSeekBarPosition = (absoluteTime) => {
+ if (!seekBar || videoDuration <= 0) return;
+ const ratio = Math.max(0, Math.min(1, absoluteTime / videoDuration));
+ seekBarProgress.style.width = `${ratio * 100}%`;
+ seekBarHandle.style.left = `${ratio * 100}%`;
+ seekCurrentTime.textContent = formatTime(absoluteTime);
+ };
+
+ // Track playback position in the custom seek bar
+ videoPlayer.addEventListener('timeupdate', () => {
+ if (isDraggingSeek || !isStreamActive) return;
+ const absoluteTime = seekOffset + videoPlayer.currentTime;
+ updateSeekBarPosition(absoluteTime);
+ });
+
+ // Seek bar interaction: click or drag
+ const getSeekRatio = (e) => {
+ const rect = seekBar.getBoundingClientRect();
+ return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+ };
+
+ const handleSeekStart = (e) => {
+ if (!isStreamActive || videoDuration <= 0) return;
+ e.preventDefault();
+ isDraggingSeek = true;
+ seekBar.classList.add('seeking');
+ const ratio = getSeekRatio(e);
+ const targetTime = ratio * videoDuration;
+ updateSeekBarPosition(targetTime);
+ };
+
+ const handleSeekMove = (e) => {
+ if (!isDraggingSeek) return;
+ e.preventDefault();
+ const ratio = getSeekRatio(e);
+ const targetTime = ratio * videoDuration;
+ updateSeekBarPosition(targetTime);
+ };
+
+ const handleSeekEnd = (e) => {
+ if (!isDraggingSeek) return;
+ isDraggingSeek = false;
+ seekBar.classList.remove('seeking');
+ const ratio = getSeekRatio(e);
+ const targetTime = ratio * videoDuration;
+ seekToTime(targetTime);
+ };
+
+ if (seekBar) {
+ seekBar.addEventListener('mousedown', handleSeekStart);
+ document.addEventListener('mousemove', handleSeekMove);
+ document.addEventListener('mouseup', handleSeekEnd);
+
+ // Touch support
+ seekBar.addEventListener('touchstart', (e) => {
+ const touch = e.touches[0];
+ handleSeekStart({ clientX: touch.clientX, preventDefault: () => e.preventDefault() });
+ });
+ document.addEventListener('touchmove', (e) => {
+ if (!isDraggingSeek) return;
+ const touch = e.touches[0];
+ handleSeekMove({ clientX: touch.clientX, preventDefault: () => e.preventDefault() });
+ });
+ document.addEventListener('touchend', (e) => {
+ if (!isDraggingSeek) return;
+ const touch = e.changedTouches[0];
+ handleSeekEnd({ clientX: touch.clientX });
+ });
+ }
+
+ const seekToTime = (targetSeconds) => {
+ if (!selectedKey || !selectedBucket || videoDuration <= 0) return;
+ targetSeconds = Math.max(0, Math.min(targetSeconds, videoDuration - 0.5));
+ seekOffset = targetSeconds;
+
+ // Show seeking indicator
+ if (seekingOverlay) seekingOverlay.classList.remove('hidden');
+
+ // Build new stream URL with ss parameter
+ const codec = codecSelect?.value || 'h264';
+ const encoder = encoderSelect?.value || 'software';
+ let streamUrl = `/api/stream?bucket=${encodeURIComponent(selectedBucket)}&key=${encodeURIComponent(selectedKey)}&codec=${encodeURIComponent(codec)}&encoder=${encodeURIComponent(encoder)}&ss=${targetSeconds}`;
+ if (s3Username) streamUrl += `&username=${encodeURIComponent(s3Username)}`;
+ if (s3Password) streamUrl += `&password=${encodeURIComponent(s3Password)}`;
+
+ // Changing src automatically aborts the previous HTTP request,
+ // which triggers res.on('close') on the server, killing the old ffmpeg process
+ videoPlayer.src = streamUrl;
+ videoPlayer.load();
+
+ const onCanPlay = () => {
+ if (seekingOverlay) seekingOverlay.classList.add('hidden');
+ videoPlayer.play().catch(() => {});
+ videoPlayer.removeEventListener('canplay', onCanPlay);
+ };
+ videoPlayer.addEventListener('canplay', onCanPlay);
+
+ // Timeout fallback: hide seeking overlay after 8s even if canplay doesn't fire
+ setTimeout(() => {
+ if (seekingOverlay) seekingOverlay.classList.add('hidden');
+ }, 8000);
+ };
+
+ // --- End custom seek bar ---
+
const loadConfig = async () => {
if (!topBanner) return;
try {
@@ -353,7 +493,7 @@ document.addEventListener('DOMContentLoaded', () => {
return;
}
- // Build a tree structure from S3 keys, preserving original object storage directories
+ // Build a tree structure from S3 keys
const tree = {};
data.videos.forEach(key => {
const parts = key.split('/');
@@ -362,11 +502,9 @@ document.addEventListener('DOMContentLoaded', () => {
if (!current[part]) {
current[part] = {};
}
-
if (index === parts.length - 1) {
current[part].__file = key;
}
-
current = current[part];
});
});
@@ -391,7 +529,6 @@ document.addEventListener('DOMContentLoaded', () => {
return li;
};
- // Recursive function to render the tree
const renderTree = (node, container) => {
for (const [name, value] of Object.entries(node)) {
if (name === '__file') continue;
@@ -445,17 +582,20 @@ document.addEventListener('DOMContentLoaded', () => {
}
};
- // Handle video selection and trigger transcode
+ // Handle video selection
const selectVideo = (key, listItemNode) => {
- // Update UI
document.querySelectorAll('.video-item').forEach(n => n.classList.remove('active'));
listItemNode.classList.add('active');
- // Reset player UI
stopPolling();
playerOverlay.classList.add('hidden');
videoPlayer.classList.add('hidden');
videoPlayer.pause();
+ isStreamActive = false;
+ videoDuration = 0;
+ seekOffset = 0;
+ hideSeekBar();
+
if (transcodeBtn) {
transcodeBtn.disabled = false;
transcodeBtn.textContent = 'Start Transcode';
@@ -492,6 +632,10 @@ document.addEventListener('DOMContentLoaded', () => {
}
stopPolling();
resetPhases();
+ seekOffset = 0;
+ videoDuration = 0;
+ isStreamActive = false;
+ hideSeekBar();
transcodingOverlay.classList.remove('hidden');
try {
@@ -506,6 +650,8 @@ document.addEventListener('DOMContentLoaded', () => {
videoPlayer.addEventListener('loadedmetadata', () => {
transcodingOverlay.classList.add('hidden');
videoPlayer.classList.remove('hidden');
+ isStreamActive = true;
+ showSeekBar();
if (playBtn) {
playBtn.disabled = false;
playBtn.textContent = 'Play';
@@ -533,6 +679,8 @@ document.addEventListener('DOMContentLoaded', () => {
if (!res.ok) throw new Error(data.error || 'Failed to stop transcode');
handleProgress({ status: 'cancelled', percent: 0, details: 'Transcode stopped' });
+ isStreamActive = false;
+ hideSeekBar();
if (transcodeBtn) {
transcodeBtn.disabled = false;
transcodeBtn.textContent = 'Start Transcode';
@@ -557,7 +705,6 @@ document.addEventListener('DOMContentLoaded', () => {
}
};
- // Initialize MP4 Player
const playMp4Stream = (url) => {
transcodingOverlay.classList.add('hidden');
videoPlayer.classList.remove('hidden');
@@ -569,6 +716,8 @@ document.addEventListener('DOMContentLoaded', () => {
videoPlayer.src = url;
videoPlayer.load();
+ isStreamActive = true;
+ showSeekBar();
videoPlayer.addEventListener('loadedmetadata', () => {
if (playBtn) {
playBtn.disabled = false;
diff --git a/server.js b/server.js
index f9b4386..d5bfba1 100644
--- a/server.js
+++ b/server.js
@@ -111,6 +111,15 @@ const shouldRetryWithSoftware = (message) => {
return /Cannot load libcuda\.so\.1|Could not open encoder before EOF|Error while opening encoder|Operation not permitted|Invalid argument/i.test(message);
};
+const probeFile = (filePath) => {
+ return new Promise((resolve, reject) => {
+ ffmpeg.ffprobe(filePath, (err, metadata) => {
+ if (err) reject(err);
+ else resolve(metadata);
+ });
+ });
+};
+
const extractS3Credentials = (req) => {
const query = req.query || {};
const username = req.headers['x-s3-username'] || req.body?.username || query.username || query.accessKeyId || '';
@@ -284,6 +293,7 @@ app.get('/api/stream', async (req, res) => {
const key = req.query.key;
const codec = req.query.codec;
const encoder = req.query.encoder;
+ const startSeconds = parseFloat(req.query.ss) || 0;
if (!bucket) {
return res.status(400).json({ error: 'Bucket name is required' });
@@ -378,6 +388,15 @@ app.get('/api/stream', async (req, res) => {
broadcastWs(progressKey, { type: 'progress', key, progress: progressMap[progressKey] });
}
+ // Probe file for duration and broadcast to clients
+ try {
+ const metadata = await probeFile(tmpInputPath);
+ const duration = metadata.format?.duration || 0;
+ broadcastWs(progressKey, { type: 'duration', key, duration: parseFloat(duration) });
+ } catch (probeErr) {
+ console.error('Probe failed:', probeErr);
+ }
+
res.setHeader('Content-Type', 'video/mp4');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
@@ -392,6 +411,10 @@ app.get('/api/stream', async (req, res) => {
.outputOptions(streamingOptions)
.format('mp4');
+ if (startSeconds > 0) {
+ ffmpegCommand.inputOptions(['-ss', startSeconds.toString()]);
+ }
+
if (/_vaapi$/.test(encoderName)) {
ffmpegCommand
.inputOptions(['-vaapi_device', '/dev/dri/renderD128'])