使用 HTML5 <video> 标签（最推荐）
这是目前最标准、最灵活、兼容性也最好的方法，HTML5 专门为视频播放引入了 <video> 标签，它允许你直接在页面中嵌入视频播放器。
（图片来源网络，侵删）
基本语法
<video src="path/to/your/video.mp4" controls> 您的浏览器不支持 HTML5 视频标签。 </video>
属性解释：
src: 视频文件的路径（可以是相对路径或绝对URL）。controls: 非常重要！ 添加这个属性后，浏览器会显示一个默认的播放控件（播放/暂停、进度条、音量、全屏等），如果省略，视频会静音并自动播放（前提是满足浏览器自动播放策略），但用户无法控制播放。<video>标签内的文本：作为后备内容，如果浏览器不支持<video>标签，这段文字就会显示出来。
使用 <video> 标签的进阶功能
为了提供更好的用户体验,你通常会使用更多的属性。
多源视频（为了兼容性）
不同的浏览器支持不同的视频编码格式,最常见的是 MP4 (H.264) 和 WebM，为了确保所有用户都能看到视频，你可以提供多个源，浏览器会自己选择它能播放的第一个。
<video controls width="600" height="400"> <source src="my-video.mp4" type="video/mp4"> <source src="my-video.webm" type="video/webm"> 您的浏览器不支持 HTML5 视频，请下载 <a href="my-video.mp4">MP4版本</a> 或 <a href="my-video.webm">WebM版本</a>。 </video>
工作原理： 浏览器从上到下检查 <source> 标签，如果它支持 mp4，就会播放第一个；如果不支持，就尝试下一个 webm，如果都不支持，就显示 <video> 标签内的文本和链接。
（图片来源网络，侵删）
自动播放 和 循环
autoplay: 视频在页面加载后自动开始播放。注意： 现代浏览器（如 Chrome, Safari, Firefox）通常不允许带声音的媒体自动播放，以避免打扰用户，通常需要配合muted属性。muted: 视音静音，这对于实现自动播放或背景视频至关重要。loop: 视频播放到末尾后，会自动重新开始。
示例：自动播放的静音背景视频
<video autoplay muted loop playsinline> <source src="background-video.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 视频。 </video>
playsinline 是一个iOS特有的属性，用于让视频在Safari浏览器内小窗口播放，而不是全屏。
预加载
preload="auto": 浏览器应该尽快下载整个视频（如果可能）。preload="metadata": 浏览器只下载视频的元数据（如时长、尺寸），而不下载视频内容，这是默认值，适用于用户不一定会播放的视频。preload="none": 浏览器不应下载任何视频内容。
<video controls preload="metadata"> <source src="my-video.mp4" type="video/mp4"> </video>
使用第三方视频平台（如 YouTube, Vimeo）
如果你的视频已经上传到了 YouTube 或 Vimeo 等平台，最简单的方法是使用它们提供的嵌入式代码。
优点：
- 无需托管流量： 视频由 YouTube/Vimeo 的服务器播放，节省你的网站带宽。
- 响应式设计： 他们的嵌入式代码通常会自动适应不同屏幕尺寸。
- 跨设备兼容性： 它们的播放器在所有设备上都能很好地工作。
- 附加功能： 自动提供字幕、分享功能、播放列表等。
如何操作：
-
在 YouTube 上：
（图片来源网络，侵删）- 打开你的视频,点击“分享”按钮，然后点击“嵌入”。
- 你会得到
<iframe>代码，通常你会选择“响应式”或“增强型隐私模式”。
<!-- 响应式 YouTube 视频 --> <div style="position: relative; width: 100%; height: 0; padding-bottom: 56.25%;"> <iframe src="https://www.youtube.com/embed/YOUR_VIDEO_ID" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"> </iframe> </div>注意：
YOUR_VIDEO_ID需要替换成你视频的实际ID。 -
在 Vimeo 上：
- 打开你的视频,点击“分享”按钮，然后选择“嵌入”。
- 复制
<iframe>代码。
<!-- Vimeo 视频 --> <iframe src="https://player.vimeo.com/video/YOUR_VIDEO_ID" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen> </iframe>
同样，替换
YOUR_VIDEO_ID。
总结与最佳实践
| 方法 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
HTML5 <video> |
控制力强、无第三方依赖、可定制样式、SEO友好（搜索引擎可以索引视频） | 需要自己托管视频（消耗服务器带宽和流量）、需要处理不同格式的兼容性 | 网站自有内容、品牌视频、需要完全控制播放体验的页面。 |
| 第三方平台 | 极其简单、节省带宽、响应式、跨设备兼容、自带附加功能 | 控制力弱、有第三方品牌标识、依赖外部服务、视频加载速度可能受平台影响 | 博客、教程、营销视频、任何希望快速嵌入视频的场景。 |
推荐流程：
- 首选第三方平台：如果视频内容适合公开分享（如教程、演示、营销片），并且你不想操心技术细节，直接使用 YouTube 或 Vimeo 的嵌入式代码。
- 选择自托管：如果视频是私有的、品牌相关的、或者你希望100%控制播放体验和外观，使用 HTML5
<video>，记得：- 将视频转换为 MP4 和 WebM 两种格式。
- 使用
<source>标签提供多源文件。 - 始终添加
controls属性，除非你有特殊需求（如背景视频）。 - 为不同设备设置合适的
width和height，或使用 CSS 使其响应式。
希望这个详细的指南能帮助你轻松地在网页中添加视频！
