有序列表（）不能直接嵌入视频，必须将标签放入中；无媒体属性，强行添加无效；正确做法是每个内独立配置，注意路径、MIME类型、playsinline、autoplay/muted等兼容性要点。
有序列表（<ol></ol>）本身不能“嵌入”视频播放器——它只是语义化地表示带编号的项目序列，和媒体内容无关。想在列表项里放视频，得把 <video></video> 标签写进 <li> 里，而不是试图让 <ol></ol> 自己支持视频。
为什么不能直接在 里塞 video 属性
<ol></ol> 是纯结构标签，没有 src、controls 这类媒体属性；浏览器不会解析它内部的视频逻辑。强行加 src 到 <ol></ol> 上完全无效，也不会报错，只是被忽略。
常见错误现象：代码看着像嵌入了，但页面只显示编号，视频不出现；或者控制台报 DOMException: play() failed because user interaction is required —— 其实是视频根本没加载，问题出在结构上，不是播放逻辑。
正确做法：把
每个列表项可以独立承载任意合法 HTML 内容，包括 <video></video>。只要确保路径、格式、MIME 类型都对，就能正常播放。
立即学习“前端免费学习笔记（深入）”；
- 用
<li>包裹完整的<video></video>结构，不要省略<source></source>或controls - 每个
<video></video>应有独立的poster和尺寸控制，避免因父容器限制导致控件裁剪 - 若需自动播放（比如教程步骤演示），必须同时加
autoplay和muted，否则现代浏览器会拦截 - iOS Safari 还要额外加
playsinline，否则点开就全屏，破坏列表上下文
示例：
<ol>
<li>
<video controls width="100%" height="240" poster="step1.jpg" playsinline muted autoplay>
<source src="step1.mp4" type="video/mp4">
<source src="step1.webm" type="video/webm">
您的浏览器不支持此视频。
</video>
</li>
<li>
<video controls width="100%" height="240" poster="step2.jpg" playsinline>
<source src="step2.mp4" type="video/mp4">
您的浏览器不支持此视频。
</video>
</li>
</ol>
移动端和微信内嵌浏览器的坑
在 <ol></ol> 里放多个 <video></video> 后，最容易被忽略的是资源竞争和交互触发时机：
- 微信 X5 内核对
playsinline支持不稳定，建议补上私有属性x5-video-player-type="h5-page" - 列表滚动时，iOS Safari 可能暂停非可视区视频，但不会自动
pause()，需监听intersectionObserver手动控制 - 所有
src必须是相对路径或 HTTPS URL；file://协议下本地测试会失败，必须起 HTTP 服务（如python3 -m http.server） - 服务器未配置
.mp4 → video/mp4MIME 类型时，Safari 直接不加载，Network 面板看到 200 但视频空白——这是最隐蔽的兼容性故障点
真正难的不是怎么写标签，而是每个 <video></video> 在列表上下文中是否能独立可靠地加载、播放、响应用户操作。路径、MIME、移动端属性、自动播放策略，漏掉任一环，都会在某个设备上静默失效。
