video标签嵌入表格易撑破布局，需设width:100%;height:auto;、object-fit及controls；移动端须加muted和playsinline；多视频应preload="none"；打印时用poster替代并隐藏video。
video 标签直接嵌入 会撑破表格布局
默认情况下，<video></video> 是内联替换元素，但自带默认宽高（通常 320×240），且不继承 <td> 的尺寸约束。如果表格列宽固定或设了 <code>table-layout: fixed，未显式限制的 <video></video> 很可能溢出、拉伸整行，甚至触发横向滚动。
解决核心是：**让 video 尺寸受控于父 <td>，同时保持可播放能力**。关键操作包括：
<ul><li>给 <code><video></video> 设置 width: 100%; height: auto;（或具体像素值），并确保其父 <td> 有明确宽度（如 <code>width: 200px 或 min-width）
添加 object-fit: contain; 防止视频拉伸变形；若需填满单元格且允许裁剪，改用 object-fit: cover;
务必加 controls 属性，否则用户无法操作——很多初学者只写 <video src="..."></video> 忘了这个
移动端点击播放失败：缺少 playsinline 和 muted
iOS Safari 和部分 Android 浏览器强制要求：在非全屏模式下自动播放或用户手势触发的播放，必须同时满足 muted + playsinline。否则点击后静音、黑屏、或直接跳转全屏。
实操时要这样写：
<video controls muted playsinline width="100%" height="auto"><source src="demo.mp4" type="video/mp4"></source></video>
注意：playsinline 是布尔属性，不能写成 playsinline="true"；muted 也一样。如果视频本身不含音频，仍建议保留 muted——某些浏览器会校验该属性是否存在，而非是否真有声音。
多视频共存时卡顿或加载慢
表格里放多个 <video></video>（尤其超过 3 个），默认会预加载元数据（preload="metadata"），导致并发请求多、内存占用高、首屏卡顿。
优化建议：
- 显式设置
preload="none"，让用户点播放按钮时才开始加载
- 对非首屏视频（如表格翻页后才显示的），用 Intersection Observer 延迟初始化
src，避免提前请求
- 服务端确保视频启用了 HTTP Range 请求（支持分段加载），否则拖拽进度条会失败
- 优先提供 MP4（H.264+AAC），兼容性最好；WebM 可作为 fallback，但别主用
表格导出 PDF 或打印时 video 消失
所有主流浏览器在打印或调用 window.print() 时，<video></video> 元素默认不渲染——它不是静态内容。导出为 PDF（如通过 Puppeteer 或浏览器“另存为 PDF”）同样如此。
没有通用方案能“打印出正在播放的画面”，但可缓解问题：
- 为每个
<video></video> 添加 poster 属性，指向首帧截图（如 poster="demo-poster.jpg"）。打印时 poster 图片会显示，比纯空白好
- 在 CSS @media print 中，用
video { display: none; } 隐藏 video，并用 ::after 伪元素插入文字提示（如 “见 demo.mp4 视频”）
- 若业务强依赖导出带视频的文档，说明场景已超出 HTML 表格能力边界，应改用 PDF 生成服务嵌入视频链接或缩略图
video 在表格里的本质是「交互媒介」，不是「文档内容」。把它当可点播的图标用，比当报表数据更靠谱。
默认情况下，<video></video> 是内联替换元素，但自带默认宽高（通常 320×240），且不继承 <td> 的尺寸约束。如果表格列宽固定或设了 <code>table-layout: fixed，未显式限制的 <video></video> 很可能溢出、拉伸整行，甚至触发横向滚动。
解决核心是：**让 video 尺寸受控于父 <td>，同时保持可播放能力**。关键操作包括：
<ul><li>给 <code><video></video> 设置 width: 100%; height: auto;（或具体像素值），并确保其父 <td> 有明确宽度（如 <code>width: 200px 或 min-width）
object-fit: contain; 防止视频拉伸变形；若需填满单元格且允许裁剪，改用 object-fit: cover;
controls 属性，否则用户无法操作——很多初学者只写 <video src="..."></video> 忘了这个移动端点击播放失败：缺少 playsinline 和 muted
iOS Safari 和部分 Android 浏览器强制要求：在非全屏模式下自动播放或用户手势触发的播放，必须同时满足 muted + playsinline。否则点击后静音、黑屏、或直接跳转全屏。
实操时要这样写：
<video controls muted playsinline width="100%" height="auto"><source src="demo.mp4" type="video/mp4"></source></video>
注意：playsinline 是布尔属性，不能写成 playsinline="true"；muted 也一样。如果视频本身不含音频，仍建议保留 muted——某些浏览器会校验该属性是否存在，而非是否真有声音。
多视频共存时卡顿或加载慢
表格里放多个 <video></video>（尤其超过 3 个），默认会预加载元数据（preload="metadata"），导致并发请求多、内存占用高、首屏卡顿。
优化建议：
- 显式设置
preload="none"，让用户点播放按钮时才开始加载 - 对非首屏视频（如表格翻页后才显示的），用 Intersection Observer 延迟初始化
src，避免提前请求 - 服务端确保视频启用了 HTTP Range 请求（支持分段加载），否则拖拽进度条会失败
- 优先提供 MP4（H.264+AAC），兼容性最好；WebM 可作为 fallback，但别主用
表格导出 PDF 或打印时 video 消失
所有主流浏览器在打印或调用 window.print() 时，<video></video> 元素默认不渲染——它不是静态内容。导出为 PDF（如通过 Puppeteer 或浏览器“另存为 PDF”）同样如此。
没有通用方案能“打印出正在播放的画面”，但可缓解问题：
- 为每个
<video></video>添加poster属性，指向首帧截图（如poster="demo-poster.jpg"）。打印时 poster 图片会显示，比纯空白好 - 在 CSS @media print 中，用
video { display: none; }隐藏 video，并用::after伪元素插入文字提示（如 “见 demo.mp4 视频”） - 若业务强依赖导出带视频的文档，说明场景已超出 HTML 表格能力边界，应改用 PDF 生成服务嵌入视频链接或缩略图
video 在表格里的本质是「交互媒介」，不是「文档内容」。把它当可点播的图标用，比当报表数据更靠谱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
