JavaScript 实现原生视频播放器需隐藏默认控件，通过事件监听控制播放/暂停、进度拖拽、音量与全屏；核心是同步 video 元素状态与自定义 UI，处理 loadedmetadata、timeupdate、fullscreenchange 等事件，并优化悬停显示、自动隐藏及移动端兼容性。
用 JavaScript 实现一个基础但可扩展的视频播放器，核心是控制 <video></video> 元素的行为，并用自定义 DOM 元素替代默认控件。全屏、播放/暂停、进度拖拽、音量控制等都可以通过原生 API 和事件监听完成，无需第三方库。
用原生 video 标签搭起播放器骨架
先写一个干净的 HTML 结构，隐藏浏览器默认控件（controls="false"），只保留视频容器和后续要插入的自定义控件栏：
<div class="video-player">
<video id="myVideo" preload="metadata">
<source src="example.mp4" type="video/mp4">
</video>
<div class="custom-controls">
<button class="play-btn">▶</button>
<input type="range" class="progress-bar" min="0" max="100">
<span class="time-current">00:00</span> / <span class="time-duration">--:--</span>
<button class="fullscreen-btn">⤢</button>
</div>
</div>关键点：设置 preload="metadata" 让视频快速获取时长；所有交互逻辑由 JS 驱动，CSS 负责样式和布局。
绑定播放/暂停与进度条同步
监听按钮点击和视频自身事件，保持 UI 与状态一致：
立即学习“Java免费学习笔记（深入）”；
- 点击播放按钮 → 调用
video.play()或video.pause()，同时切换按钮文字或图标 - 监听
timeupdate事件，实时更新进度条value和当前时间显示 - 拖动进度条时，用
video.currentTime = (e.target.value / 100) * video.duration跳转 - 监听
loadedmetadata后填充总时长（time-duration）
实现真正可用的全屏切换
不要只调 video.requestFullscreen() —— 它可能被父容器限制。正确做法是让整个 .video-player 进入全屏，并统一处理退出逻辑：
- 点击全屏按钮时，检查
document.fullscreenElement判断当前状态 - 若未全屏，调用
playerElement.requestFullscreen()（注意：不同浏览器前缀已基本淘汰，现代浏览器用标准方法即可） - 监听
fullscreenchange事件，在进入/退出时切换按钮图标、调整布局（如隐藏某些控件）、甚至重设视频宽高比 - 按 ESC 或调用
document.exitFullscreen()都会触发该事件，适合做清理工作
细节优化让体验更自然
几个容易忽略但影响体验的关键点：
-
鼠标悬停显示控件栏：给
.video-player绑定mousemove，延时隐藏控件（用setTimeout+clearTimeout防抖） -
静音/音量联动：把音量滑块和 mute 按钮状态同步，
video.muted改变时也要更新滑块值和图标 -
空闲时自动隐藏控件：在播放中启动计时器，几秒无操作就
opacity: 0，hover 或点击再恢复 - 移动端适配：iOS Safari 不允许 JS 自动播放带声音的视频，建议默认静音 + 用户手势后才取消静音
基本上就这些。不复杂但容易忽略细节——比如忘记监听 loadedmetadata 就读不到时长，或者没处理 fullscreenchange 导致退出全屏后 UI 错乱。把 video API 当成普通 DOM 元素来操作，逻辑就清晰了。
