1. HTML5 video标签的基础属性
常用属性一览
HTML5 video标签通过一组基础属性来控制展示和行为，例如 controls 开启浏览器自带的控制栏，autoplay 自动播放，muted 静音，loop 循环播放，preload 指定预加载行为，width 和 height 控制容器大小，poster 提供视频加载前的静态封面。
为了兼容性，playsinline 可以在移动设备上避免进入全屏，crossorigin 控制跨域请求，title 提供辅助信息。通过组合这些属性，可以实现无需额外插件的可访问视频体验。
多源媒体与格式兼容
在网页中使用 source 标签为同一视频提供多种格式，如 video.mp4（type=“video/mp4”）、video.webm（type=“video/webm”）或 video.ogv（type=“video/ogg”）。浏览器会自动选择首个被支持的格式，提升兼容性。
为了在不支持的浏览器上仍然提供回退内容，可以在 video 标签内放置文本，或承载一个提示框。以下示例演示了基本的多源结构：
<video controls preload="metadata" poster="poster.jpg" width="640" height="360"><source src="sample-video.mp4" type="video/mp4"><source src="sample-video.webm" type="video/webm"><source src="sample-video.ogv" type="video/ogg">您的浏览器不支持 HTML5 video 标签。
</video>2. 进阶功能与交互
字幕与轨道 track
HTML5 的 track 标签为视频添加字幕、描述和章节信息。通过 kind="subtitles"、srclang、label，以及可选的 default 属性，可以实现多语言字幕并默认选择某一条。字幕的文件通常为 .vtt。
使用 track 时，浏览器会在视频上方显示字幕轨道条，提供切换语言的能力。注意字体颜色、对比度以及字幕在不同设备的显示可访问性。
<video controls preload="metadata" width="640" height="360"><source src="movie.mp4" type="video/mp4"><track kind="subtitles" srclang="en" label="English" src="subtitles-en.vtt" default><track kind="subtitles" srclang="es" label="Español" src="subtitles-es.vtt">
</video>通过JavaScript控制视频
除了原生控件，开发者也可以使用 JavaScript 对视频进行编程控制，例如播放、暂停、跳转、调整音量，以及监听关键事件（如 play、pause、ended）。
使用 JavaScript 能实现自定义播放器界面，与屏幕阅读器和键盘无障碍充满兼容性；同时可以根据网络条件动态切换清晰度或切换字幕。
<button id="playBtn">播放</button>
<video id="vid" width="640" height="360" preload="metadata"><source src="sample.mp4" type="video/mp4">
</video><script>
const vid = document.getElementById('vid');
document.getElementById('playBtn').addEventListener('click', () => {if (vid.paused) {vid.play();} else {vid.pause();}
});
vid.addEventListener('ended', () => { console.log('视频播放结束'); });
</script>3. 实战案例：在网页中嵌入与优化
自适应加载与预加载策略
在不同网络环境下，预加载策略和 自动选择分辨率对播放体验至关重要。使用 preload="none"、"metadata"、"auto" 可以让浏览器自行决定何时请求数据，降低初始加载成本。
结合 宽高自适应容器，通过 CSS 使视频在不同设备上保持 16:9 的纵横比，并且不破坏布局。
<div class="video-container"><video controls preload="metadata" poster="poster.jpg" playsinline><source src="hd.mp4" type="video/mp4"></video>
</div><style>
.video-container{ position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */ }
.video-container video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>跨设备的响应式布局与体验
在移动端和桌面端都需要良好的观看体验，playsinline 与 muted 常被用于移动端遵循自动播放策略；poster 能在加载阶段提供美观占位图。
此外，确保无障碍体验，如为视频添加可访问的标题、字幕和描述轨道，以及可用键盘聚焦与参照的控件。
