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 22:32:28 +08:00
parent 2fb5659f09
commit c2e433350d
3 changed files with 527 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
public/index.html
View File

@@ -80,7 +80,7 @@
</section>
<section class="player-section glass-panel">
<div class="player-wrapper">
<div id="player-wrapper" class="player-wrapper">
<div id="player-overlay" class="player-overlay">
<h3>Select a video to start transcoding</h3>
</div>
@@ -119,7 +119,7 @@
</div>
</div>
</div>
<video id="video-player" controls preload="auto" class="hidden"></video>
<video id="video-player" preload="auto" class="hidden"></video>
<div id="seeking-overlay" class="seeking-overlay hidden">
<div class="spinner"></div>
<span>跳转中...</span>
@@ -136,12 +136,39 @@
<span id="seek-total-time">00:00:00</span>
</div>
</div>
<div id="custom-controls" class="custom-controls hidden">
<div class="controls-left">
<div id="playback-status" class="playback-status paused">
<span class="status-dot"></span>
<span id="playback-status-text">Paused</span>
</div>
<button id="control-play-toggle" class="control-btn" type="button">Play</button>
<button id="control-mute-toggle" class="control-btn" type="button">Mute</button>
<div class="volume-control">
<input id="volume-slider" class="volume-slider" type="range" min="0" max="1" step="0.05" value="1" />
<span id="volume-value" class="volume-value">100%</span>
</div>
</div>
<div class="controls-right">
<label class="speed-control" for="playback-speed">
<span>Speed</span>
<select id="playback-speed" class="speed-select">
<option value="0.5">0.5x</option>
<option value="0.75">0.75x</option>
<option value="1" selected>1x</option>
<option value="1.25">1.25x</option>
<option value="1.5">1.5x</option>
<option value="2">2x</option>
</select>
</label>
<button id="control-fullscreen-toggle" class="control-btn" type="button">Fullscreen</button>
</div>
</div>
<div id="now-playing" class="now-playing hidden">
<h3>Now Playing</h3>
<p id="current-video-title">video.mp4</p>
<button id="transcode-btn" class="play-btn hidden">Start Transcode</button>
<button id="stop-transcode-btn" class="play-btn stop-btn hidden">Stop Transcode</button>
<button id="play-btn" class="play-btn hidden">Play</button>
</div>
</section>
</main>