使用video标签可嵌入本地视频并支持多格式兼容，通过controls、autoplay等属性控制播放；iframe则用于嵌入YouTube等第三方平台视频，需设置src为视频ID并配置allow权限，两者均可通过poster、JavaScript或URL参数实现封面、播放控制与功能优化。
在网页中嵌入视频，常用的方法有两种：使用 HTML5 的 video 标签播放本地或托管的视频文件，或者通过 iframe 嵌入第三方平台（如 YouTube、腾讯视频）的视频。下面详细介绍这两种方法的使用与控制方式。
使用 video 标签嵌入本地视频
HTML5 提供了 video 元素，可以直接在页面中播放视频文件，无需依赖插件。
基本语法如下：
<video width="640" height="360" controls><source src="movie.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
说明：
立即学习“前端免费学习笔记（深入）”；
- controls：显示播放、暂停、音量等控制条
- width / height：设置视频尺寸
- src：指定视频地址（也可用 source 标签多格式兼容）
- autoplay：自动播放（部分浏览器限制需静音）
- muted：静音播放（常配合 autoplay 使用）
- loop：循环播放
- preload：预加载策略（"none", "metadata", "auto"）
支持的常见视频格式包括 MP4（H.264）、WebM 和 Ogg，建议提供多种格式以兼容不同浏览器：
<video width="640" height="360" controls><source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
您的浏览器不支持 video 标签。
</video>
使用 iframe 嵌入第三方视频
如果视频托管在 YouTube、Bilibili、腾讯视频等平台，推荐使用 iframe 嵌入，简单且功能完整。
以 YouTube 为例：
<iframe width="640" height="360"src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
关键参数说明：
- src：将 VIDEO_ID 替换为实际视频 ID（如 https://youtu.be/abc123 中的 abc123）
- embed/：YouTube 嵌入专用路径
- allow 属性：启用自动播放、全屏等功能权限
- allowfullscreen：允许全屏播放
其他平台（如 Bilibili）也提供“分享 → 嵌入代码”功能，复制后可直接粘贴到 HTML 中。
常见控制技巧
无论是 video 还是 iframe，都可以通过属性或 JavaScript 实现更精细的控制。
- 自动播放静音视频：
<video autoplay muted controls> - 封面图设置：
<video poster="cover.jpg">指定封面图片 - JavaScript 控制播放：
const vid = document.querySelector('video');
vid.play();
vid.pause();
vid.volume = 0.5; // 音量 50% - iFrame 视频禁止推荐视频：
YouTube 链接添加参数&rel=0，如：https://www.youtube.com/embed/VIDEO_ID?rel=0
基本上就这些。根据需求选择合适的方式：自主托管用 video，省事方便用 iframe。注意移动端兼容性和自动播放策略即可。
