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

HTML5 的

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

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

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

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

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

• 在
• 推荐组合：.mp4 (H.264 + AAC)（兼容性最广）、.webm (VP9 + Opus)（开源高效，Chrome/Firefox 优先选）、可选 .ogg (Theora + Vorbis)（老旧 Firefox 备用）
• 示例：

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

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

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

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

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

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

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