视频标签为什么使用video不用iframe-初见-

1. 标准化的 HTML5 支持

<video> 是 HTML5 原生支持的视频标签，专为媒体播放设计。
它具有内置的播放器功能，如 播放/暂停按钮、音量控制、进度条 等，用户无需额外加载播放器或依赖外部插件。
浏览器对 <video> 的支持范围更广，兼容性更好。

2. 减少嵌套层级，降低复杂性

使用 <iframe> 嵌入视频，意味着页面中会引入另一个 HTML 文档，增加了 DOM 的嵌套深度。
<video> 直接在当前页面中渲染视频，减少了加载开销，同时更易于样式控制。

3. 更高的性能

<iframe> 嵌入会额外加载整个 HTML 页面，这包括 CSS、JavaScript 等资源。对于嵌入视频来说，这是不必要的开销。
<video> 仅加载视频文件，减少了额外的网络请求，提高了页面加载性能。

4. 更细粒度的控制

<video> 提供丰富的属性和 API，开发者可以轻松实现自定义功能：
- 自动播放：autoplay
- 循环播放：loop
- 静音：muted
- 分辨率或画质切换
- 通过 JavaScript 控制视频行为，例如动态改变播放速度、获取视频播放进度等：
- ```
const video = document.querySelector('video');
video.addEventListener('timeupdate', () => {
    console.log(`Current time: ${video.currentTime}`);
});
```

5. 支持断点续传（分段加载）

<video> 标签支持 HTTP 的 Range 请求，能够根据用户的观看进度加载视频的特定部分，减少带宽浪费。
当 Nginx 配置了 Accept-Ranges bytes 时，视频文件会按需分段加载，而 <iframe> 嵌入可能会导致重复加载，增加带宽消耗。

6. 样式和布局的灵活性

<video> 标签可以直接通过 CSS 进行自定义样式设计。

示例

video {
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    max-width: 100%;
}

7. 更好的 SEO 和可访问性

<video> 标签对搜索引擎更友好，可以帮助索引视频文件。
通过 track 元素添加字幕文件，还可以增强视频的可访问性：

<video controls>
    <source src="/1121.mp4" type="video/mp4">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    Your browser does not support the video tag.
</video>

8. 更低的安全风险

<iframe> 的安全性取决于嵌入内容。如果嵌入的视频页面存在漏洞，可能会带来 XSS 等安全风险。
<video> 直接嵌入文件，没有额外的 HTML 文档或 JavaScript，减少了攻击面。

综合比较

特性	`<video>` 标签	`<iframe>` 嵌入
原生播放器支持	✅ 有	❌ 无
加载性能	✅ 更快	❌ 依赖额外 HTML 页面
样式和布局灵活性	✅ 高	❌ 受限
安全性	✅ 更高	❌ 存在潜在安全风险
开发控制能力	✅ 丰富 API	❌ 依赖外部播放器
带宽和流量消耗	✅ 支持断点续传	❌ 可能重复加载资源
可访问性（字幕等）	✅ 支持	❌ 需要额外实现