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

修复流式传输的错误

Browse Source
This commit is contained in:
CN-JS-HuiBai
2026-04-02 21:52:51 +08:00
parent c2a8cf79c8
commit fd199fdde7
4 changed files with 248 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
public/index.html
View File

@@ -85,13 +85,37 @@
<h3>Select a video to start transcoding</h3>
</div>
<div id="transcoding-overlay" class="player-overlay hidden">
<div class="spinner"></div>
<h3>Transcoding via FFmpeg...</h3>
<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">
<div id="progress-fill" class="progress-fill"></div>
<!-- Download Phase -->
<div id="download-phase" class="phase-container">
<div class="phase-icon download-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
</div>
<h3>正在从 S3 下载源文件...</h3>
<p id="download-size-text" class="phase-detail">准备下载...</p>
<div class="progress-info">
<div id="download-progress-text" class="progress-text">0%</div>
<div class="progress-bar">
<div id="download-progress-fill" class="progress-fill"></div>
</div>
</div>
</div>
<!-- Transcode Phase -->
<div id="transcode-phase" class="phase-container hidden">
<div class="phase-icon transcode-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>
</div>
<h3>正在转码并流式传输...</h3>
<p id="transcode-detail-text" class="phase-detail">FFmpeg 转码中...</p>
<div class="progress-info">
<div id="transcode-progress-text" class="progress-text">0%</div>
<div class="progress-bar">
<div id="transcode-progress-fill" class="progress-fill transcode-fill"></div>
</div>
<div id="transcode-stats" class="transcode-stats hidden">
<span id="stat-fps"></span>
<span id="stat-bitrate"></span>
<span id="stat-time"></span>
</div>
</div>
</div>
</div>