ol中直接放video会导致编号错位、视频变形或计数异常，因video是行内替换元素，与li的块级对齐逻辑冲突；应将video置于独立li内并设display:block，加controls、固定width，避免line-height干扰，并注意移动端autoplay需muted+playsinline。
ol 里直接放 <video></video> 标签会出什么问题
浏览器允许在 <ol></ol> 内部直接写 <video></video>，语法上不报错，但实际渲染时视频可能被“挤”变形、编号错位，甚至部分浏览器（如旧版 Safari）会忽略 <li> 的计数逻辑——比如编号突然从 1 跳到 3，或视频下方空白一大块。根本原因是 <video></video> 默认是行内替换元素（inline replaced），而 <ol></ol> 的 <li> 期望包裹块级内容来对齐编号基准线。
正确嵌入方式：用 <li> 包裹并设为 display: block
必须确保每个视频都在独立的 <li> 中，并显式声明样式，否则编号和视频内容容易脱节：
<ol>
<li style="display: block;">
<video controls width="400">
<source src="demo1.mp4" type="video/mp4">
</video>
</li>
<li style="display: block;">
<video controls width="400">
<source src="demo2.webm" type="video/webm">
</video>
</li>
</ol>
- 不要省略
controls属性，否则用户无法播放/暂停 -
width建议设具体值（如400），避免在窄屏下溢出容器 - 如果用 CSS 外部样式，确保选择器权重足够覆盖浏览器默认
li样式，例如：ol li { display: block; }
遇到编号不垂直居中？检查 vertical-align 和 line-height
即使设了 display: block，若父级 <ol></ol> 或全局有重置样式（比如 line-height: 1），仍可能导致编号与视频顶部不对齐。常见表现是数字“悬”在视频上方一截：
- 给
<li>加vertical-align: top无效（因为已是块级） - 真正起作用的是给
<video></video>设vertical-align: middle或top（仅当它意外变成 inline 时才需要） - 更稳妥的做法：统一用
margin-top: 0.2em微调，比依赖行高更可控 - 避免在
<ol></ol>上设置过小的line-height，尤其搭配字体缩放时
移动端适配和自动播放限制
在 iOS Safari 和 Android Chrome 上，<video></video> 的 autoplay 默认被禁用，且 muted 是强制前提。如果想让列表里的视频“静音自动播”，必须同时满足：
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 加
autoplay muted属性 - 加
playsinline（否则 iOS 会全屏弹出） - 确保服务器支持 HTTP Range 请求（否则 Safari 可能加载失败）
- 别指望
loop在所有设备上稳定工作，部分安卓机型会卡在第一帧
另外，<ol></ol> 本身不提供滚动锚点或懒加载能力，视频多时建议配合 IntersectionObserver 手动控制播放/暂停，否则页面一开就触发一堆视频请求。
最常被忽略的是：编号样式（如 list-style-type: lower-roman）和视频宽度冲突时，编号可能被裁剪——务必在真实设备上测缩放和横屏场景。
