HTML 中插入视频的方法

在网页设计中，插入视频能够极大地丰富页面内容，提升用户体验。以下为您详细介绍 HTML 中插入视频的几种常见方法。

使用 <video> 标签

<video> 标签是 HTML5 新增的元素，用于在网页中嵌入视频。其基本语法如下：

<video src="视频文件路径" controls></video>

其中，src 属性指定视频文件的路径，可以是相对路径或绝对路径。controls 属性添加视频播放器的控制条，让用户能够进行播放、暂停、音量调节等操作。

例如，要在网页中插入名为 example.mp4 的视频，代码可以这样写：

<video src="videos/example.mp4" controls></video>

除了基本属性，<video> 标签还有许多其他实用属性。width 和 height 属性可以设置视频播放器的宽度和高度；autoplay 属性使视频在页面加载完成后自动播放；loop 属性让视频循环播放。示例如下：

<video src="videos/example.mp4" controls width="640" height="480" autoplay loop></video>

支持多种视频格式

不同浏览器对视频格式的支持有所差异，为确保视频在各种浏览器中都能正常播放，可使用 <source> 标签指定多种视频格式。语法如下：

<video controls>
  <source src="视频文件1.mp4" type="video/mp4">
  <source src="视频文件2.webm" type="video/webm">
  您的浏览器不支持视频播放。
</video>

浏览器会按顺序尝试加载 <source> 标签指定的视频文件，直到找到支持的格式。如果所有格式都不支持，就会显示标签内的提示文本。

使用第三方视频平台嵌入代码

如果不想在自己的服务器上存储视频文件，可借助第三方视频平台，如 YouTube、B 站等。以 YouTube 为例，操作步骤如下：

1. 打开 YouTube 视频页面，点击“分享”按钮，选择“嵌入”。
2. 复制弹出窗口中的嵌入代码。
3. 将代码粘贴到 HTML 文件的合适位置。

例如，从 YouTube 复制的嵌入代码类似如下：

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

掌握这些 HTML 中插入视频的方法，能帮助您轻松打造出富有吸引力的网页，满足不同的设计需求。