使用HTML5的video标签可标准嵌入视频，通过src或source标签指定视频路径并支持多格式兼容，添加controls等属性实现播放控制，配合poster、preload等优化体验，注意同源策略与自动播放限制，结合CSS可实现响应式布局。
在网页中嵌入视频，HTML5 的 video 标签是最常用且标准的方法。它无需依赖第三方插件（如 Flash），兼容主流浏览器，使用简单。下面详细介绍如何使用 video 标签在网页中插入并控制视频播放。
基本语法：使用 VIDEO 标签插入视频
最简单的用法是使用 标签，并通过 src 属性指定视频文件路径：
说明：
- src：指定视频文件的路径，支持 mp4、webm、ogg 等格式。
- controls：添加播放、暂停、音量、进度条等默认控件。
- 标签内的文字是备用内容，当浏览器不支持 video 时显示。
支持多格式以确保兼容性
不同浏览器对视频格式的支持不同，推荐提供多种格式以提高兼容性。使用
浏览器会按顺序尝试加载第一个能识别的格式。常用组合：
- MP4（H.264）：兼容性最好，适用于绝大多数设备。
- WebM：开源格式，Chrome、Firefox 支持良好。
- Ogg：较少使用，主要用于老版本 Firefox。
常用属性设置播放行为
通过添加属性可以自定义视频的行为：
立即学习“前端免费学习笔记（深入）”；
- autoplay：自动播放（部分浏览器限制静音自动播放）
- muted：静音，常与 autoplay 搭配绕过限制
- loop：循环播放
- preload：预加载方式，可选 "none"、"metadata"、"auto"
- width / height：设置播放器尺寸
- poster：指定封面图，在视频加载前显示
示例：
注意事项与最佳实践
为了让视频在各种环境下正常播放，注意以下几点：
- 视频文件尽量放在网站同域名下，避免跨域问题。
- 控制文件大小，大视频建议配合 preload="metadata" 减少初始加载压力。
- 自动播放需谨慎，多数移动设备禁止有声自动播放，加 muted 更可靠。
- 使用响应式设计时，可通过 CSS 设置 width: 100% 让视频自适应容器。
基本上就这些。掌握 video 标签的基本结构和常用属性，就能在网页中高效嵌入视频内容，无需复杂代码。
