合法但需谨慎处理加载时机：details内嵌video语法有效，但折叠时默认预加载会导致无效请求；应监听toggle事件，按open状态动态设置src、load和play，并注意safari兼容性问题。
details 标签里直接放 <video></video> 是合法的，但默认行为会出问题
HTML5 允许在 <details></details> 内嵌套 <video></video>，语法上完全 valid。但问题在于：多数浏览器会在 <details></details> 初始折叠（open 属性未设置）时，仍尝试加载视频的元数据甚至首帧——导致无意义的网络请求、CPU 占用，甚至触发自动播放策略拦截。
实操建议：
- 始终给
<video></video>添加preload="metadata"或更保守的preload="none"，避免折叠状态下预加载 - 不要依赖
autoplay—— 折叠时即使写了也会被忽略或静音拦截；展开后再手动调用play()更可靠 - 用
display: none配合 JS 控制显隐，比纯靠<details></details>的原生折叠更可控（但会失去语义和默认 UI）
监听 toggle 事件来控制视频加载和播放
<details></details> 元素在用户点击时触发 toggle 事件（注意不是 click），这是介入的最佳时机。此时可判断 details.open 状态，决定是否初始化视频。
常见错误现象：视频元素已写死在 HTML 中，JS 在页面加载时就对所有 <video></video> 调用 load() 或 play()，结果折叠区域里的视频白忙活一场。
正确做法示例：
const details = document.querySelector('details');
const video = details.querySelector('video');
details.addEventListener('toggle', () => {
if (details.open && !video.src) {
// 第一次展开才设 src，避免重复加载
video.src = '/path/to/video.mp4';
video.load();
}
if (details.open) {
video.play().catch(e => console.warn('play() failed:', e));
} else {
video.pause();
}
});
移动端 Safari 对 <details></details> + <video></video> 的兼容性陷阱
iOS 15.4+ 支持 <details></details>，但 Safari 存在两个隐蔽问题：
- 折叠状态下，若
<video></video>已设src，即使preload="none"，Safari 仍可能发起 OPTIONS 请求（尤其跨域视频），导致控制台报 CORS 预检失败 - 展开后调用
play()若未绑定用户手势（比如在toggle事件中是 OK 的），仍可能被拒绝 —— 必须确保该调用发生在用户交互的同步上下文中 - 某些旧版 iOS WebKit 不支持
toggle事件，需降级监听click并手动检测open变化
替代方案：用 aria-expanded + 自定义展开逻辑更稳妥
如果项目需要强控制力或兼容老浏览器，放弃原生 <details></details> 是合理选择。用 <div role="region"> 模拟，配合 <code>aria-expanded 和 CSS 过渡，能彻底掌控视频生命周期。
关键点：
- 初始状态不渲染
<video></video>元素，只留占位符或按钮；展开时用innerHTML或appendChild()动态插入 - 视频
src延迟到插入 DOM 后再赋值，确保加载时机精准 - 播放前检查
video.readyState >= 2，避免play()报DOMException: The element has no supported sources
复杂点不在语法，而在加载时机与用户意图的严格对齐——浏览器不会替你判断“用户点开详情，是不是真想立刻看视频”。
