html5的和元素提供play()、pause()、volume、currenttime等api实现播放控制，支持timeupdate、ended等事件监听，并需注意移动端自动播放限制及loadedmetadata后读取duration等兼容性问题。
HTML5 的 <audio></audio> 和 <video></video> 元素原生支持丰富的 JavaScript API，你可以直接通过元素实例调用方法、读写属性、监听事件来实现精准控制。
基础控制：播放、暂停、音量与进度
获取媒体元素后，常用操作如下：
-
播放/暂停：
media.play()和media.pause()；注意自动播放受浏览器策略限制（如需静音自动播，可设muted="true" autoplay） -
调节音量：
media.volume = 0.7（范围 0.0–1.0），设为 0 即静音；media.muted = true可强制静音（优先级高于 volume） -
跳转时间：
media.currentTime = 32.5（单位：秒），赋值后会触发timeupdate事件 -
获取时长：
media.duration在元数据加载完成（loadedmetadata事件后）才有效，未加载时为NaN
关键事件监听：掌握播放状态变化
合理监听事件是实现响应式控制的核心。常用事件包括：
-
canplay：媒体已加载足够数据，可以开始播放（但不一定能播完） -
playing：真正开始播放（区别于play事件，后者只表示播放请求发出） -
pause：用户或脚本主动暂停 -
ended：自然播放结束（loop=false时触发） -
timeupdate：播放时间改变时频繁触发（适合更新进度条） -
error：加载或解码失败，可通过media.error查看错误码（如MEDIA_ERR_NETWORK）
示例：
const video = document.getElementById('myVideo');
video.addEventListener('timeupdate', () => {
console.log(`当前时间：${video.currentTime.toFixed(1)}s`);
});
video.addEventListener('ended', () => {
console.log('播放完毕');
});
动态控制：加载、切换与预加载
除实时操作外，还可动态管理资源：
-
更换媒体源：修改
src属性后需调用load()重载元数据，再调用play()（如：video.src = 'new.mp4'; video.load(); video.play();） -
预加载策略：设置
preload="auto"（默认）、"metadata"（仅加载头信息）或"none"（不预加载），影响初始加载行为 -
全屏控制：调用
video.requestFullscreen()进入全屏（需用户手势触发），退出用document.exitFullscreen() -
画中画：支持
video.requestPictureInPicture()（同样需用户交互触发）
兼容性与实用建议
实际开发中需注意：
- 移动端 Safari 对
play()有严格限制：必须在用户点击等手势回调中调用，且不能带延迟（避免setTimeout包裹） - 部分安卓浏览器不支持
volume设置（始终按系统音量），但muted通常可用 - 监听
loadedmetadata再读取duration或设置currentTime，避免NaN或无效跳转 - 使用
media.readyState判断当前就绪状态（如HAVE_ENOUGH_DATA表示可流畅播放）
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
