标签必须作为直接子元素、属性齐全、WebVTT文件合规且服务端返回text/vtt类型，缺一即静默失效；动态插入字幕性能差、易卡顿，而由浏览器媒体管线原生优化渲染。
用 动态插入字幕浏览器对 innerHTML 或 appendChild 插入 ，每次都要触发样式计算 + 布局 + 绘制，尤其在滚动字幕或高帧率场景下极易掉帧。常见错误现象：字幕随视频播放出现明显延迟、跳字、卡顿；DevTools 的 Performance 面板显示频繁的 Layout 和 Paint；字幕容器父级用了 transform: translateZ(0) 也压不住抖动。
-
kind="subtitles"、srclang、label 都要写全，否则部分浏览器（如 Safari）会忽略
- 字幕文件必须是 WebVTT 格式（.vtt），不能是 SRT 或纯文本；服务端需返回
Content-Type: text/vtt，否则 Chrome 拒绝加载
- 不要用 JS 动态创建
append 到 src，再调 video.textTracks[0].mode = "showing"，否则首次切换语言时可能空白
default 属性和 JS 控制哪个更稳
加 default 属性看似省事，但实际会强制浏览器在 textTracks.length === 0）。
更稳妥的做法是：移除 default，等 loadedmetadata 事件后，用 JS 显式启用：
video.addEventListener('loadedmetadata', () => {
const track = video.addTextTrack('subtitles', 'Chinese', 'zh');
track.mode = 'hidden'; // 先隐藏，避免闪现
fetch('/sub.vtt').then(r => r.text()).then(vtt => {
const parser = new window.WebVTTParser();
parser.parse(vtt, track);
track.mode = 'showing';
});
});
注意：WebVTTParser 不是所有环境都内置（Firefox/Chrome 支持，Safari 需 polyfill），生产环境建议用 vtt.js 替代原生解析。
字幕样式用
必须内联到 ::cue。外部 CSS 或 @import 会导致字幕样式加载滞后，出现“先黑底白字、再跳成红底黄字”的 FOUC（Flash of Unstyled Text）。
DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur
下载
关键限制：
- 只支持
::cue 和 ::cue-region 伪元素，不能用类名或 ID 选择器
-
::cue 内禁止使用 position、float、margin（会被忽略），可用 color、font-size、text-align、line-height、background
- 若需多语言不同样式（如中文字幕用思源黑体、英文字幕用 Inter），得靠 JS 切换
track.kind 并动态注入对应
为什么
Canvas 绘制字幕要走完整 JS 执行 → 帧循环 → fillText → GPU 上传路径，每帧都重绘，CPU 占用高；而
容易被忽略的点：
- WebVTT 文件里每条
WEBVTT cue 不能超过 200 字符，超长会截断或解析失败（Chrome 表现为整条 cue 消失）
- vtt 文件里禁止出现 UTF-8 BOM，否则 Safari 100% 解析失败，且无任何提示
- 如果字幕需要实时生成（如语音转文字流），不要用
addCue() API 动态添加，但要注意 cues 数组长度别超过 50 条，否则内存泄漏风险上升
浏览器对 常见错误现象：字幕随视频播放出现明显延迟、跳字、卡顿；DevTools 的 Performance 面板显示频繁的 Layout 和 Paint；字幕容器父级用了 加 更稳妥的做法是：移除 注意： 必须内联到 生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力：
- 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面；
- 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”；
- 提及位于 `apps/console/src/featur 关键限制： Canvas 绘制字幕要走完整 JS 执行 → 帧循环 → 容易被忽略的点： 有原生解析和渲染优化，它不参与 DOM 构建流程，而是由媒体元素（）直接驱动渲染时机。手动用 innerHTML 或 appendChild 插入 transform: translateZ(0) 也压不住抖动。
必须挂载在 内部，且 kind="subtitles"、srclang、label 都要写全，否则部分浏览器（如 Safari）会忽略Content-Type: text/vtt，否则 Chrome 拒绝加载 后再 append 到 ——得先设好 src，再调 video.textTracks[0].mode = "showing"，否则首次切换语言时可能空白
的 default 属性和 JS 控制哪个更稳default 属性看似省事，但实际会强制浏览器在 加载初期就解析整个 vtt 文件——哪怕用户根本没开字幕。这不仅拖慢首屏，还可能因 vtt 解析失败导致字幕轨道静默失效（无报错，DevTools Network 里能看到 200 但 textTracks.length === 0）。default，等 loadedmetadata 事件后，用 JS 显式启用：video.addEventListener('loadedmetadata', () => {
const track = video.addTextTrack('subtitles', 'Chinese', 'zh');
track.mode = 'hidden'; // 先隐藏，避免闪现
fetch('/sub.vtt').then(r => r.text()).then(vtt => {
const parser = new window.WebVTTParser();
parser.parse(vtt, track);
track.mode = 'showing';
});
});
WebVTTParser 不是所有环境都内置（Firefox/Chrome 支持，Safari 需 polyfill），生产环境建议用 vtt.js 替代原生解析。字幕样式用
内联还是外部 CSS 同一 HTML 文档的 中，且选择器限定为 ::cue。外部 CSS 或 @import 会导致字幕样式加载滞后，出现“先黑底白字、再跳成红底黄字”的 FOUC（Flash of Unstyled Text）。
::cue 和 ::cue-region 伪元素，不能用类名或 ID 选择器::cue 内禁止使用 position、float、margin（会被忽略），可用 color、font-size、text-align、line-height、background
track.kind 并动态注入对应 块，不能靠 media query为什么
渲染比 canvas 绘制还快fillText → GPU 上传路径，每帧都重绘，CPU 占用高；而 是浏览器媒体管线的一部分，字幕时间轴与视频 PTS 同步，由渲染线程直接合成，不经过主线程 JS 调度。
WEBVTT cue 不能超过 200 字符，超长会截断或解析失败（Chrome 表现为整条 cue 消失） src，改用 addCue() API 动态添加，但要注意 cues 数组长度别超过 50 条，否则内存泄漏风险上升
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
