全屏时字幕不显示是因track.mode被设为"disabled"且未重置,而非未加载;Safari等浏览器进出全屏会主动重置mode为"disabled";需监听fullscreenchange并检查readyState后重新设置mode。

全屏时字幕不显示,是因为 track 没被“启用”而非“没加载”
浏览器在全屏模式下不会自动恢复或重置字幕轨道的 mode 状态。如果你在非全屏时手动关闭了字幕(即把 track.mode 设为 "disabled"),进入全屏后它依然保持 disabled —— 不是 bug,是规范行为。用户必须在全屏播放器 UI 里再次点击字幕按钮选中一条,或者你用 JS 主动干预。
video.textTracks 列表在全屏前后完全一致,但 mode 可能被重置
部分浏览器(尤其是 Safari)在退出/进入全屏时会重置所有 textTrack.mode 为 "disabled",哪怕之前是 "showing"。这不是 DOM 重建导致的,而是播放器底层对轨道状态的主动清理。
- 不要依赖“页面加载时设一次
track.mode = 'showing'”就一劳永逸 - 监听
video.onfullscreenchange,并在回调里重新检查并设置目标轨道的mode - 必须先确认
track.readyState === 2(loaded),否则设置无效 - 只对
track.kind === 'subtitles' && track.language === 'zh'这类明确匹配的轨道操作,避免误启其他 kind
全屏后字幕位置错位或被遮挡,本质是 ::cue 样式失效
全屏状态下,浏览器可能使用不同的渲染上下文(比如原生全屏控件),导致你写的 ::cue CSS 规则不生效,尤其当样式写在 shadow DOM 外、或用了 position: absolute 等依赖父容器定位的属性时。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面,使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力: - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面; - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”; - 提及位于 `apps/console/src/featur
-
::cue在全屏模式下支持度不一:Chrome 基本可靠,Safari 对font-size和line-height更敏感,Firefox 有时忽略background - 避免用
top/bottom精确定位;改用line、position、size等<track></track>原生属性控制布局(如<track kind="subtitles" line="80%" position="50%"></track>) - 如果必须用 CSS,加
!important并测试全屏前后 computed style 是否一致
移动端全屏(iOS Safari)字幕菜单根本不出现在右键里
iOS Safari 的全屏视频控件极度简化:没有右键菜单,也没有独立的「字幕」按钮。除非你在 HTML 中显式声明了至少一个带 default 的 <track kind="subtitles"></track>,否则字幕开关入口压根不会出现 —— 用户连手动开启的机会都没有。
立即学习“前端免费学习笔记(深入)”;
- 必须写
<track kind="subtitles" src="zh.vtt" srclang="zh" label="中文" default></track>,且只能有一个default - 不能靠 JS 动态添加
<track></track>后再设default,iOS 不认动态插入的 default 属性 - 如果需要多语言切换,得在 HTML 里一次性写好全部
<track></track>,再用 JS 控制mode,不能依赖用户从空菜单里选
track.mode = 'showing' 很可能在全屏瞬间就被浏览器悄悄改回 'disabled',而控制台连个 warning 都不给。


















