CN-JS-HuiBai/Media-Coding-Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复ffmpeg转码的错误提示，改为等待MP4文件生成完成后再播放。

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-02 18:04:41 +08:00
parent 7dc1b3f486
commit 46190ace2a
3 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -62,7 +62,7 @@
<div id="transcoding-overlay" class="player-overlay hidden">
<div class="spinner"></div>
<h3>Transcoding via FFmpeg...</h3>
<p>Generating HLS segments, please wait.</p>
<p>Generating MP4 file, please wait.</p>
<div id="progress-info" class="progress-info hidden">
<div id="progress-text" class="progress-text">Initializing...</div>
<div class="progress-bar">

12
public/js/main.js
View File

@@ -41,7 +41,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
if (message.type === 'ready' && message.key === currentVideoKey) {
setProgress({ status: 'Ready to play', percent: 100, details: 'Ready to play' });
playHlsStream(message.hlsUrl);
playMp4Stream(message.mp4Url);
}
} catch (error) {
console.error('WebSocket message parse error:', error);
@@ -246,7 +246,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (data.error) throw new Error(data.error);
if (!wsConnected) {
pollForHlsReady(key, data.mp4Url);
pollForMp4Ready(key, data.mp4Url);
}
} catch (err) {
console.error(err);
@@ -255,7 +255,7 @@ document.addEventListener('DOMContentLoaded', () => {
};
// Poll the backend to check if the generated MP4 file is accessible
const pollForHlsReady = (key, hlsUrl) => {
const pollForMp4Ready = (key, mp4Url) => {
let attempts = 0;
const maxAttempts = 120; // 60 seconds max wait for first segment
const pollIntervalMs = 500;
@@ -273,10 +273,10 @@ document.addEventListener('DOMContentLoaded', () => {
if (data.ready) {
stopPolling();
setProgress({ status: 'Ready to play', percent: 100, details: 'Ready to play' });
playHlsStream(data.hlsUrl);
playMp4Stream(data.mp4Url);
} else if (attempts >= maxAttempts) {
stopPolling();
transcodingOverlay.innerHTML = `<p style="color: #ef4444;">Timeout waiting for HLS segments.</p>`;
transcodingOverlay.innerHTML = `<p style="color: #ef4444;">Timeout waiting for MP4 file.</p>`;
}
} catch (err) {
console.error("Poll Error:", err);
@@ -292,7 +292,7 @@ document.addEventListener('DOMContentLoaded', () => {
};
// Initialize MP4 Player
const playHlsStream = (url) => {
const playMp4Stream = (url) => {
transcodingOverlay.classList.add('hidden');
videoPlayer.classList.remove('hidden');
playBtn.classList.add('hidden');