html5多媒体技术以原生video/audio标签为起点，通过多source适配、poster与preload优化、controlslist精细控制、getusermedia权限降级、web audio api处理及分层兼容策略，实现跨平台稳定音视频体验。
HTML5 多媒体技术已全面取代插件方案，成为现代网页音视频能力的基石。关键不在于堆砌功能，而在于选对 API、适配真实环境、兼顾体验与兼容性。
用对原生标签，少写 JS 就能跑起来
video 和 audio 元素不是“可选项”，而是默认起点。它们自带播放控制、键盘支持、全屏逻辑和基础事件（play、pause、ended），无需额外封装就能满足 80% 场景。
- 始终提供 多个 source：MP4（H.264+AAC）保底 Safari/iOS，WebM（VP9+Opus）覆盖 Chrome/Firefox，必要时加 OGG 音频兜底
- 用 poster 属性设视频封面图，避免黑屏等待；用 preload="metadata" 平衡加载速度与首帧响应
- 添加 controlsList="nodownload noremoteplayback" 精细控制右键菜单和投屏行为（Chrome/Edge 支持）
设备访问要稳，权限与降级两手抓
调用摄像头或麦克风不是“请求即得”，必须预判拒绝、无设备、静音等真实链路。
- getUserMedia() 前先检查 navigator.mediaDevices 是否可用，再 enumerateDevices() 获取设备列表供用户手动切换
- 约束条件（constraints）别只写理想值，例如
{ width: { min: 640, ideal: 1280 }, facingMode: "user" }，兼顾低端设备与竖屏优先场景 - 监听 devicechange 事件，在用户插拔摄像头后动态更新设备下拉菜单，避免“选了没反应”
音频处理绕不开 Web Audio API
单纯播放用
- 创建 AudioContext 后立即 suspend()，等用户手势（如点击按钮）再 resume()，规避 iOS/Safari 自动播放策略
- 用 AnalyserNode 提取频谱数据时，注意 fftSize 设置影响精度和性能，2048 是常见平衡点
- 连接节点链路前，确保所有节点处于同一上下文；避免直接操作 audio 元素的 volume，改用 GainNode 实现平滑音量调节
兼容性不是终点，而是开发起点
所谓“兼容”，不是让老浏览器勉强跑新功能，而是分层交付：核心内容可访问 → 基础交互可用 → 高级效果增强。
- 用 Can I Use 查具体 API 在目标浏览器中的支持状态，重点关注 iOS Safari 和 Android WebView 的差异点
- 对 MediaRecorder、WebRTC 等高阶 API，先 feature detect 再启用，失败时回退到文件上传或截图方案
- 移动端 video 播放务必加 playsinline 属性，否则 iOS 默认强制全屏，破坏页面布局
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
