核心是三点：用对原生video/audio标签、分层适配真实环境、关键细节不妥协；优先多格式兜底，MP4保底、WebM覆盖主流，移动端加playsinline，用canPlayType()检测编码支持，自动播放需muted+手势触发，进阶API需渐进增强与降级。
核心就三点：用对原生标签、分层适配真实环境、关键细节不妥协。
从 video 和 audio 标签开始，别绕远路
不用封装库、不引播放器框架，一个带 controls 的 就能跑通 80% 场景。它自带播放/暂停、键盘操作（空格、方向键）、全屏逻辑、基础事件（play、ended、error）。写法上优先用 src 属性。
- MP4（H.264 + AAC）作为保底，所有主流浏览器都认
- WebM（VP9 + Opus）覆盖 Chrome/Firefox/Edge，iOS Safari 14.1+ 也支持
- 移动端视频必须加
playsinline，否则 iOS 强制全屏 - 用
poster设封面图，避免黑屏等待；preload="metadata"平衡首帧加载与带宽消耗
格式兼容不是靠猜，而是靠检测和兜底
浏览器是否能播，取决于“容器”（MP4/WebM）和“内芯”（H.264/VP9/AAC/Opus）双重匹配。不能只看后缀名，得用 canPlayType() 主动判断。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 在 JS 中调用
video.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')精准检测编码支持 - 服务端或构建流程中提前生成多份转码文件，按需下发
- 遇到不支持的格式，降级到提示文案或静态图，别留空白区域
- 对老 Android WebView 或低版本 Safari，可 fallback 到
MediaSource或分片加载方案
交互控制要稳，尤其权限和自动播放
用户手势是很多行为的前提。iOS/Safari 对自动播放限制极严，autoplay 基本不可信；摄像头/麦克风访问也必须显式授权。
- 想静音自动播，用
autoplay muted+playsinline，再监听canplay后手动unmute - 调
getUserMedia前先检查navigator.mediaDevices是否存在，再用enumerateDevices()拿设备列表 - 约束条件写区间值，比如
{ width: { min: 640, ideal: 1280 } }，兼顾低端机和竖屏场景 - 监听
devicechange，插拔摄像头后动态刷新设备选择框，避免选了没反应
进阶能力要分层启用，不强求全覆盖
Web Audio API、MediaRecorder、Picture-in-Picture 这些不是“有就上”，而是按需渐进增强。
- 做音频可视化，必须走
AudioContext+AnalyserNode，别试图从元素直接读频谱 - 创建
AudioContext后立即suspend()，等用户点击按钮再resume()规避策略拦截 - 用
MediaRecorder录制前，先if ('MediaRecorder' in window)检测，失败则回退到上传本地文件 - PiP 按钮只在支持的浏览器显示：
document.pictureInPictureElement !== null或video.disablePictureInPicture === false
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
