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-04 00:49:54 +08:00
parent cd866b05df
commit f3733ef8ef
2 changed files with 2 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
public/index.html
View File

@@ -110,58 +110,12 @@
</div> </div>
</div> </div>
</div> </div>
<video id="video-player" preload="auto" class="hidden"></video> <video id="video-player" preload="auto" controls class="hidden"></video>
<div id="seeking-overlay" class="seeking-overlay hidden"> <div id="seeking-overlay" class="seeking-overlay hidden">
<div class="spinner"></div> <div class="spinner"></div>
<span>跳转中...</span> <span>跳转中...</span>
</div> </div>
</div> </div>
<div id="custom-controls" class="custom-controls hidden">
<div class="controls-left">
<button id="control-play-toggle" class="control-btn icon-btn" type="button" aria-label="Play">></button>
<div id="playback-status" class="playback-status paused">
<span class="status-dot"></span>
<span id="playback-status-text">Paused</span>
</div>
<div class="control-popover volume-popover">
<button id="control-mute-toggle" class="control-btn icon-btn" type="button" aria-label="Mute">o</button>
<div class="popover-panel">
<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>
</div>
<div id="custom-seek-container" class="control-seek hidden">
<span id="seek-current-time" class="control-time">00:00:00</span>
<div id="seek-bar" class="seek-bar">
<div id="seek-bar-transcode" class="seek-bar-transcode"></div>
<div id="seek-bar-progress" class="seek-bar-progress"></div>
<div id="seek-bar-handle" class="seek-bar-handle"></div>
</div>
<span id="seek-total-time" class="control-time">00:00:00</span>
</div>
<div class="controls-right">
<div class="control-popover speed-popover">
<button id="control-speed-toggle" class="control-btn" type="button" aria-label="Playback Speed">1x</button>
<div class="popover-panel">
<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>
</div>
</div>
<button id="control-fullscreen-toggle" class="control-btn icon-btn square-btn" type="button" aria-label="Fullscreen">[]</button>
</div>
</div>
<div id="now-playing" class="now-playing hidden"> <div id="now-playing" class="now-playing hidden">
<h3>Now Playing</h3> <h3>Now Playing</h3>
<p id="current-video-title">video.mp4</p> <p id="current-video-title">video.mp4</p>

11
public/js/main.js
View File

@@ -86,7 +86,7 @@ document.addEventListener('DOMContentLoaded', () => {
let controlsPointerReleaseTimeout = null; let controlsPointerReleaseTimeout = null;
if (videoPlayer) { if (videoPlayer) {
videoPlayer.controls = false; videoPlayer.controls = true;
} }
if (playbackSpeed) { if (playbackSpeed) {
videoPlayer.playbackRate = parseFloat(playbackSpeed.value) || 1; videoPlayer.playbackRate = parseFloat(playbackSpeed.value) || 1;
@@ -427,16 +427,7 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
videoPlayer.addEventListener('volumechange', updateVolumeControls); videoPlayer.addEventListener('volumechange', updateVolumeControls);
videoPlayer.addEventListener('click', () => {
if (!isStreamActive) return;
if (videoPlayer.paused) {
videoPlayer.play().catch(() => {});
return;
}
videoPlayer.pause();
});
// Browsers usually cannot seek inside a live fragmented MP4 stream. // Browsers usually cannot seek inside a live fragmented MP4 stream.
// When the user drags the native video controls, remap that action to our server-side seek flow. // When the user drags the native video controls, remap that action to our server-side seek flow.