HTML5 <video> 元素提供原生JavaScript API实现播放控制与交互：含duration、currentTime等状态属性，play()、pause()等控制方法，timeupdate、loadedmetadata等事件监听，以及全屏、可见性联动和本地文件播放等实用功能。
HTML5 <video> 元素自带一套轻量、标准的 JavaScript API，无需额外库即可实现播放控制、状态监听、进度调节等核心功能。掌握这些接口，是构建自定义播放器或增强视频交互体验的基础。
基础属性与状态读取
用于获取当前播放状态和媒体元信息：
-
video.duration：返回总时长（秒），加载完成前为
NaN；建议监听loadedmetadata或canplay事件后再读取 -
video.currentTime：可读可写，单位为秒；设值可跳转到指定时间点（如
v.currentTime = 30） -
video.paused：布尔值，
true表示已暂停或尚未开始 -
video.ended：布尔值，播放完毕后为
true -
video.volume：取值范围
0.0–1.0，0表示静音 -
video.muted：直接设置是否静音，优先级高于
volume -
video.playbackRate：设置播放速率（如
0.5慢放、2快放），默认为1
核心控制方法
触发播放行为或重置状态：
- video.play()：返回 Promise，成功则继续播放，失败（如被自动播放策略拦截）会 reject，需捕获处理
- video.pause()：立即暂停，无返回值
-
video.load()：重新加载
src或<source>指定的资源，重置播放状态（如currentTime=0、paused=true） -
video.canPlayType(type)：检测浏览器是否支持某 MIME 类型（如
"video/mp4"），返回"probably"、"maybe"或空字符串
关键事件监听
响应播放生命周期变化：
立即学习“前端免费学习笔记（深入）”；
- timeupdate：播放过程中高频触发（通常每 200–250ms 一次），适合更新进度条 UI
- play / pause / ended：分别在开始播放、暂停、播放结束时触发
-
loadedmetadata：元数据（时长、尺寸等）加载完成时触发，此时
duration可靠 - canplay / canplaythrough：前者表示可开始播放（缓冲少量内容），后者表示可连续播放到底（缓冲较充分）
-
error：加载或解码出错时触发，
video.error包含具体错误码（如MEDIA_ERR_SRC_NOT_SUPPORTED）
实用辅助接口
提升兼容性与用户体验：
-
全屏控制：现代浏览器支持
video.requestFullscreen()（注意各厂商前缀已逐步淘汰，标准名可用）；退出全屏用document.exitFullscreen() -
可见性联动：结合
document.hidden和visibilitychange事件，在用户切走标签页时自动暂停，返回时恢复 -
本地文件播放：配合
<input type="file">和window.URL.createObjectURL(file)，可预览用户选择的本地视频文件
