HTMLMediaElement通过设置src属性并调用play()播放音视频，需处理跨域、用户交互限制、状态监听及MediaRecorder兼容性等问题。
如何用 HTMLMediaElement 播放本地或远程音视频？
浏览器原生支持的音视频操作，核心就是 HTMLMediaElement（ 和 元素的基类）。它不是靠额外库，而是直接通过 DOM API 控制。
- 直接设置
src属性即可加载媒体：video.src = "demo.mp4"，之后调用video.play() - 如果资源跨域（比如从 CDN 加载），需确保服务端返回
Access-Control-Allow-Origin，否则play()会静默失败，且error事件可能不触发 - 动态创建时，建议先监听
canplay或loadedmetadata再调用play()，避免在元数据未就绪时触发错误 - 移动端 iOS Safari 要求用户手势（如
click）后才能首次播放，自动播放（autoplay）基本无效，即使加了muted也未必可靠
为什么 play() 报错 “DOMException: play() failed because the user didn’t interact with the document first”？
这是现代浏览器（Chrome、Safari、Firefox）的策略：禁止无用户交互的自动音频播放，防止骚扰。视频若带声音，同样受限。
- 解决路径只有用户显式触发：绑定到
button.onclick、input.onchange等真实交互事件中调用play() - 若必须“静音起步”，可设
video.muted = true+video.autoplay = true，但仅对视频有效；纯即使muted，部分 Android 浏览器仍会拦截 - 不要依赖
setTimeout延迟播放来绕过——策略检测的是调用栈是否源于用户事件，不是时间点
怎样读取和修改音视频的播放状态与进度？
所有状态都通过属性和事件暴露，无需额外解析：
- 当前播放位置：
video.currentTime（单位秒，可读可写） - 总时长：
video.duration（加载元数据后才有值，初始为NaN） - 播放/暂停状态：
video.paused（true表示已暂停或未开始） - 常用事件：
timeupdate（频繁触发，适合更新进度条）、ended（播完）、pause、playing - 修改进度时，直接赋值
video.currentTime = 30即可，浏览器会触发seeking→seeked流程；但若文件未缓冲到目标位置，会触发waiting事件
用 MediaRecorder 录制音视频要注意哪些兼容性问题？
MediaRecorder 依赖 getUserMedia 获取流，整条链路在老旧浏览器中支持度差：
- Chrome 71+、Firefox 68+、Edge 79+ 支持较完整；Safari 直到 14.1 才支持视频录制（音频更早），且不支持
mp4容器，只能用webm - 必须使用 HTTPS（或
localhost），http://非本地环境会直接拒绝getUserMedia - 录制前应检查
MediaRecorder.isTypeSupported("video/webm;codecs=vp9")，不同浏览器支持的 MIME 类型和编码器差异很大 -
stop()后拿到的Blob需手动构造 URL（URL.createObjectURL(blob)）才能预览或下载，别忘了后续调用URL.revokeObjectURL()防止内存泄漏
实际做媒体控制时，最易被忽略的是事件时机与异步加载的耦合：比如在 loadeddata 里调 play() 仍可能失败，因为解码器还没 ready；真正稳妥的做法是等 canplaythrough 或捕获 play 的 Promise 返回值（现代写法：video.play().catch(e => ）。
