HTML video标签

HTML中的 video 标签用于嵌入视频到网页中。它使得视频的播放变得简单并且无需使用第三方插件。

语法

下面是 video 标签的语法：

<video width="width" height="height" controls>
  <source src="video.mp4" type="video/ogg">
  Your browser does not support the video tag.
</video>

video 标签需要一个 src 属性来指定要播放的视频文件，以及 width 和 height 属性来指定视频的宽度和高度。 controls 属性用于添加播放控件，允许用户控制媒体播放的进度、音量等属性。

支持的文件格式

HTML5允许浏览器播放多种视频格式，包括：

• MP4
• WebM
• Ogg

在多种浏览器中兼容性

HTML video 标签是跨浏览器兼容的，但是不同浏览器支持的视频格式有所不同。

• Chrome、Firefox、Opera、Safari都支持 WebM 和 MP4格式；
• Internet Explorer 和 Safari 只支持 MP4 格式；
• Firefox 和 Opera （在Windows下）支持 OGG 格式。

为了确保视频在不同浏览器中都能播放，我们可以使用多种格式的视频资源，如下所示：

<video width="width" height="height" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

上面的代码中包含三个 <source> 元素，每个元素提供了不同的视频资源，这样可以确保在各种浏览器中都能播放视频。如果某个浏览器不支持任何一种格式，则会显示备用文本信息。

其他属性

除了上述提到的属性之外，还有其他一些属性可以用于 video 标签，如下所示：

• autoplay - 指定视频开始时自动播放
• loop - 指定视频循环播放
• muted - 指定视频静音播放

示例

下面是一个简单的 video 元素示例，它演示了如何在HTML中嵌入视频文件：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

这个例子使用 controls 属性来添加播放控件，并提供了两种不同格式的视频资源，以确保在各种浏览器上都可以播放视频。 如果浏览器无法播放此视频，则显示带有“您的浏览器不支持视频标记”的备用消息。