<video>没声音主因是浏览器自动播放策略限制，需加muted属性或用户交互后调用play()；若视频本身无音频流、未启用controls或缺少playsinline（移动端），也会导致无声。
用 <video> 播放时为什么没声音？
常见现象是视频画面正常，但完全无声——大概率不是设备静音，而是浏览器策略或标签属性缺失导致的。
-
autoplay在多数现代浏览器（Chrome、Edge、Safari）中默认被静音限制，即使写了autoplay也必须搭配muted才能自动播放；想带声自动播，得用户首次交互（如点击）后手动调用play() - 漏写
controls不影响播放，但会隐藏音量控件，容易误判“没声音”其实是被静音了 - 音频轨道被禁用：如果视频本身不含音频流（比如纯监控录像），
<video>就真放不出声音，此时需检查文件元数据（可用ffprobe video.mp4验证）
play() 调用报错 “DOMException: play() failed because the user didn’t interact with the document first”
这是浏览器主动拦截，不是代码写错了。核心规则就一条：非静音的媒体自动播放必须由用户手势触发。
- 错误写法：
window.addEventListener('load', () => video.play())—— 页面加载完成不算用户交互 - 正确做法：绑定在
click、touchstart等明确由用户发起的事件里，例如：button.addEventListener('click', () => video.play()) - 兼容处理：调用
play()后应catch错误，避免阻断后续逻辑：video.play().catch(e => console.warn('Autoplay prevented:', e))
怎么让 <video> 和 <audio> 行为一致？
两者底层共用 MediaElement API，但默认行为差异大，直接混用容易出问题。
-
<audio>默认不显示控件区域，<video>默认有黑边占位；若只想要音频播放器界面，建议统一用<audio controls>+ CSS 隐藏播放器外观，而不是强行用<video>播音频 - 音视频加载策略不同：
<video preload="metadata">只加载头信息，适合预览；而<audio preload="auto">更倾向提前缓冲全部内容，对短语音更友好 - 移动端特别注意：
<video playsinline>必须加，否则 iOS 会强制全屏播放，破坏页面布局
自定义进度条拖动后卡顿、跳帧，怎么调？
本质是时间戳精度和浏览器解码能力不匹配，尤其在低性能设备或高码率视频上明显。
- 不要直接设
currentTime后立刻读取，要等seeking事件完成：video.currentTime = 120; video.addEventListener('seeked', () => console.log(video.currentTime)) - 避免高频设置：
input拖动时用debounce控制频率，否则连续设currentTime会堆积未完成的 seek 请求 - H.264 关键帧间隔影响拖动响应速度；若视频 I 帧间隔过大（如 10 秒），拖到中间位置可能实际跳到最近关键帧，造成“不精准”感——压缩时建议控制 GOP ≤ 2s
controls 就万事大吉；特别是 autoplay 和 seek 行为，在 iOS 和 Android 上表现还不完全一致，上线前最好真机测一遍。 
