track标签不支持readonly属性，因其非表单控件且无用户编辑接口；真正需只读控制的是关联的textarea等编辑框，而非track本身。
track 标签本身不支持 readonly 属性，也没有“只读”语义——它不是用户可编辑的表单控件，而是用于定义外部字幕、章节或描述资源的元数据容器。
如果你看到类似「给 track 加 readonly」的需求，大概率是混淆了用途：字幕内容由 <track></track> 指向一个 WebVTT 文件（如 subtitles.vtt），其文本不可通过 HTML 属性控制编辑状态；真正需要锁定的是播放器界面上的字幕显示开关，或背后承载字幕文本的 <textarea></textarea> / <input> 编辑框。
为什么 track 不能加 readonly
track 是一个空元素，仅用于关联外部文本轨道，浏览器根本不解析它的内容，也不提供用户输入接口。所以：
-
readonly只对可编辑的表单控件生效（<input>、<textarea></textarea>），track不在支持列表中 - 加了
readonly属性，浏览器会忽略它，既不报错，也不改变行为 - 试图用 JS 设置
trackEl.readOnly = true会失败，因为该 DOM 元素根本没有readOnly属性
实际要锁的是字幕编辑框，不是 track
常见真实场景是：后台管理页提供字幕文本编辑区（比如一个 <textarea></textarea> 用于手动录入或修改 WebVTT 内容）。这时才需要只读控制：
- 正确写法：
<textarea readonly>WEBVTT\n\n00:00:01.000 --> 00:00:04.000\n欢迎观看</textarea> - JS 动态控制：
editorEl.readOnly = true（注意大小写） - 别写成
editorEl.setAttribute('readonly', 'true')，兼容性差且不可靠 - 记得补样式：
textarea[readonly] { background: #f9f9f9; cursor: not-allowed; }
想禁用字幕开关？那得操作 video 或播放器 API
如果目标是让用户无法切换字幕轨道（即禁用字幕开启/关闭按钮），这不是 track 的事，而是控制 <video></video> 元素或播放器实例：
立即学习“前端免费学习笔记（深入）”；
- 移除字幕菜单：CSS 隐藏原生控件
video::-webkit-media-text-track-display { display: none; }（不推荐，破坏可访问性） - 禁用轨道切换：JS 中调用
video.textTracks[i].mode = 'disabled'，并监听texttrackchange阻止恢复 - 自定义播放器时，直接不渲染字幕开关按钮，或设其
disabled属性
真正容易被忽略的点是：WebVTT 文件本身是静态资源，前端任何属性或 JS 都无法防止用户下载后手动编辑——只读控制永远只是 UI 层提示，关键字段必须在服务端校验和防护。
