如何在HTML网页中嵌入视频？

使用 HTML5 <video> 标签（推荐）

这是最直接且兼容现代浏览器的方式,无需依赖外部插件。

基础语法：

<video controls width="600">
  <source src="my-video.mp4" type="video/mp4">
  <source src="my-video.webm" type="video/webm">
  您的浏览器不支持 HTML5 视频标签。
</video>

关键属性说明：

• controls：显示播放控件（播放/暂停、音量、全屏等）。
• width 和 height：设置视频显示尺寸（单位：像素）。
• autoplay：自动播放（需谨慎使用，可能被浏览器阻止）。
• loop：循环播放。
• muted：默认静音（常与 autoplay 配合使用）。
• poster="image.jpg"：设置视频封面图。

多格式兼容性处理：

不同浏览器支持的视频格式不同（如 MP4、WebM、Ogg），通过嵌套多个 <source> 标签，浏览器会自动选择支持的格式：

<video controls>
  <source src="video.mp4" type="video/mp4">   <!-- 主流浏览器 -->
  <source src="video.webm" type="video/webm"> <!-- Chrome、Firefox -->
  <source src="video.ogg" type="video/ogg">   <!-- 旧版 Firefox、Opera -->
  您的浏览器不支持视频播放。
</video>

当浏览器不支持 <video> 标签时，会显示标签内的文字或备用内容（如 Flash 播放器链接）。

嵌入第三方平台视频（如 YouTube、Bilibili）

适用于减少服务器带宽压力,利用平台优化播放体验。

通用步骤：

1. 在视频平台（如 YouTube）点击视频下方的「分享」→「嵌入」。
2. 复制生成的 iframe 代码。

示例（YouTube）：

<iframe 
  width="560" 
  height="315" 
  src="https://www.youtube.com/embed/视频ID" 
  frameborder="0" 
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

优点：

• 自动适配移动端。
• 内置广告管理、字幕、画质切换等功能。
• 节省服务器资源。

关键注意事项

1. 视频优化：

   

   • 压缩视频：使用工具（如 HandBrake）减小文件体积，提升加载速度。
   • 响应式设计：通过 CSS 设置 max-width: 100%; height: auto; 适配移动端。

2. 无障碍访问：

   • 添加字幕：使用 <track> 标签加载 .vtt 字幕文件：

     <video controls>
       <source src="video.mp4" type="video/mp4">
       <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文">
     </video>

   • 提供文字描述：为听障用户补充视频内容摘要。

3. 版权与合法性：

   

   • 仅使用拥有版权的视频。
   • 避免自动播放声音（影响用户体验且可能违反平台政策）。

4. SEO 友好：

   • 在视频周围添加相关文字描述。
   • 使用结构化数据（Schema.org）标记视频内容。

• 自主托管视频：用 <video> + 多格式 <source>，适合对播放器有定制需求的场景。
• 第三方平台嵌入：推荐用于快速部署，兼顾性能和功能。
• 核心原则：优先考虑加载速度、跨设备兼容性和无障碍访问，确保内容合法合规。

引用说明：本文内容参考 MDN Web Docs – Video 标签 及 Google Web 开发者指南。