JavaScript可通过原生video API实现自定义播放控制：关闭默认控件后，用play()/pause()、currentTime、volume、requestFullscreen()等控制行为；结合range输入框与timeupdate等事件构建进度条、音量条；响应loadedmetadata、ended等事件更新UI，并优化悬停显示、移动端触摸及键盘访问体验。
JavaScript 实现视频播放控制并自定义界面，核心是操作原生 <video> 元素的 API，并通过 DOM 操作替换或覆盖默认控件。不需要第三方库也能完成，关键是理解视频元素的事件、属性和方法。
用原生 video 标签 + JS 控制播放行为
先确保 HTML 中有一个带 id 的 <video> 标签，关闭默认控件（controls="false"），便于完全自定义：
<video id="myVideo" src="example.mp4" preload="metadata"></video>
然后用 JS 绑定常用操作：
立即学习“Java免费学习笔记（深入）”；
-
播放/暂停：调用
play()或pause()方法，注意现代浏览器要求用户手势触发（如点击）才能自动播放 -
跳转时间：设置
currentTime属性，单位为秒（支持小数），例如video.currentTime = 32.5 -
调节音量：设置
volume（0–1），muted属性控制静音 -
全屏切换：调用
requestFullscreen()（注意各浏览器前缀差异，建议用Element.requestFullscreen()并做兼容处理）
构建自定义控制条（进度条、音量条等）
控制条本质是一组同步更新的 <input type="range"> 和事件监听器：
-
进度条：用
<input type="range" id="progress">，初始max设为视频时长（video.duration），监听timeupdate事件实时更新value；拖动时监听input事件并设置currentTime -
音量条：类似逻辑，绑定
volume和muted，拖动时更新volume，点击静音按钮切换muted -
播放速率：用
video.playbackRate（如 0.5、1、1.5、2），配合下拉菜单或按钮切换
响应视频状态变化（加载、播放、结束等）
视频生命周期事件让界面反馈更准确：
-
loadedmetadata：元数据加载完成，此时可读取duration、设置进度条max -
timeupdate：播放中频繁触发，用于更新当前时间显示和进度条位置 -
play/pause：切换播放状态时更新按钮图标（如 ▶️ ↔ ⏸️） -
ended：播放结束，可重置按钮、显示“重播”或自动跳转 -
waiting/canplay：处理缓冲与加载状态，显示加载动画
样式与交互细节建议
自定义界面不只是功能，也影响体验：
- 控制条默认隐藏，鼠标悬停或点击视频区域时淡入（用 CSS
:hover或 JS 切换 class） - 进度条拖动手柄（thumb）用 CSS 自定义样式，避免浏览器默认丑陋外观
- 移动端需适配触摸事件（
touchstart、touchmove），因为input事件在 iOS 上对 range 不稳定 - 键盘支持：给播放按钮加
tabindex="0"，监听Enter或Space键触发播放
