HTML5视频需设controls、width/height、preload="metadata"，用多个<source>实现格式兼容（MP4/WebM），添加poster封面和< track >字幕，并遵守移动端autoplay+muted限制。

HTML5 的 <video> 标签本身简洁，但要真正“开箱即用”，得配对关键属性、处理常见兼容问题，而不是只写一个 <video src="xxx.mp4"> 就完事。

必设基础属性：controls、width/height、preload

仅靠 src 无法保证可操作性和加载体验：

• controls：必须显式添加，否则视频无播放控件（尤其 Safari 和 Firefox 默认不显示）；<video controls> 是用户交互的前提
• width / height：建议设置固定尺寸（如 width="640" height="360"），避免页面加载时因尺寸未定导致布局抖动；也可用 CSS 控制，但需确保 height 有值（否则部分浏览器渲染异常）
• preload：控制初始加载策略：metadata（默认，只加载元信息）、auto（预加载全部，慎用，尤其移动端）、none（完全不预加载）。多数场景推荐 preload="metadata"

多格式兼容：用 <source> 替代单一 src

不同浏览器支持的编码格式不同（如 Safari 对 H.264 支持好，Firefox 更倾向 WebM），单靠 MP4 文件无法全平台覆盖：

• 在 <video> 内按优先级顺序写多个 <source>，浏览器会从上到下选择第一个支持的格式
• 推荐组合：.mp4 (H.264 + AAC)（兼容性最广）、.webm (VP9 + Opus)（开源高效，Chrome/Firefox 优先选）、可选 .ogg (Theora + Vorbis)（老旧 Firefox 备用）
• 示例： <video controls preload="metadata">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
  </video>

兜底与可访问性：poster 与 text track

提升首屏体验和无障碍支持：

立即学习“前端免费学习笔记（深入）”；

• poster：指定封面图（如 poster="cover.jpg"），在视频加载完成前显示，解决白屏或黑屏问题；图片尺寸建议与视频一致，避免拉伸
• <track>：添加字幕或描述（如 <track kind="subtitles" srclang="zh" label="中文" src="sub.vtt">），不仅利于听障用户，也提升 SEO 和移动端观看体验；格式推荐 WebVTT（.vtt）
• 注意：<track> 必须放在所有 <source> 之后、</video> 之前，否则无效

移动端与自动播放限制应对

iOS 和 Android 对自动播放（autoplay）有严格限制：

• 必须同时满足：autoplay + muted（静音），才可能自动播放；单独 autoplay 在多数移动浏览器中会被忽略
• 若需有声自动播放，只能由用户手势（如点击）触发，此时需 JS 控制：video.play().catch(e => console.log("自动播放被阻止"))
• 避免依赖 autoplay 做关键功能（如广告首帧），改用显式按钮或交互动效引导用户开始