ol中直接放video会导致编号错位、视频变形或计数异常，因video是行内替换元素，与li的块级对齐逻辑冲突；应将video置于独立li内并设display:block，加controls、固定width，避免line-height干扰，并注意移动端autoplay需muted+playsinline。

ol 里直接放 标签会出什么问题

浏览器允许在

内部直接写 ，语法上不报错，但实际渲染时视频可能被“挤”变形、编号错位，甚至部分浏览器（如旧版 Safari）会忽略

的计数逻辑——比如编号突然从 1 跳到 3，或视频下方空白一大块。根本原因是 默认是行内替换元素（inline replaced），而

的

期望包裹块级内容来对齐编号基准线。

正确嵌入方式：用

包裹并设为 display: block

必须确保每个视频都在独立的

中，并显式声明样式，否则编号和视频内容容易脱节：

<ol>
<li style="display: block;">
    <video controls width="400"><source src="demo1.mp4" type="video/mp4"></source></video>
</li>
  <li style="display: block;">
    <video controls width="400"><source src="demo2.webm" type="video/webm"></source></video>
</li>
</ol>

• 不要省略 controls 属性，否则用户无法播放/暂停
• width 建议设具体值（如 400），避免在窄屏下溢出容器
• 如果用 CSS 外部样式，确保选择器权重足够覆盖浏览器默认 li 样式，例如：ol li { display: block; }

遇到编号不垂直居中？检查 vertical-align 和 line-height

即使设了 display: block，若父级

或全局有重置样式（比如 line-height: 1），仍可能导致编号与视频顶部不对齐。常见表现是数字“悬”在视频上方一截：

• 给
• 加 vertical-align: top 无效（因为已是块级）
• 真正起作用的是给 设 vertical-align: middle 或 top（仅当它意外变成 inline 时才需要）
• 更稳妥的做法：统一用 margin-top: 0.2em 微调，比依赖行高更可控
• 避免在
  上设置过小的 line-height，尤其搭配字体缩放时

移动端适配和自动播放限制

在 iOS Safari 和 Android Chrome 上， 的 autoplay 默认被禁用，且 muted 是强制前提。如果想让列表里的视频“静音自动播”，必须同时满足：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 加 autoplay muted 属性
• 加 playsinline（否则 iOS 会全屏弹出）
• 确保服务器支持 HTTP Range 请求（否则 Safari 可能加载失败）
• 别指望 loop 在所有设备上稳定工作，部分安卓机型会卡在第一帧

另外，

本身不提供滚动锚点或懒加载能力，视频多时建议配合 IntersectionObserver 手动控制播放/暂停，否则页面一开就触发一堆视频请求。

最常被忽略的是：编号样式（如 list-style-type: lower-roman）和视频宽度冲突时，编号可能被裁剪——务必在真实设备上测缩放和横屏场景。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！