HTML视频

HTML <video> 标签用于在 HTML 页面中嵌入一个支持视频播放的媒体播放器。我们使用 HTML <video> 标签和 <source> 标签来显示视频。例如：

<video width="320" height="190" controls>
    <source src="video.mp4" type="video/mp4">
</video>

浏览器输出

在上面的代码中：

• video.mp4 - 我们要显示的视频路径
• video/mp4 - 我们要显示的资源类型
• controls - 允许用户控制视频

上面示例中的 video.mp4 文件与 HTML 文件位于同一目录中。

注意：建议为视频（类似于 HTML Image 标签）包含 height 和 width，以防止页面初始加载时出现闪烁。

带有多个 <source> 标签的 HTML <video>

我们可以使用 <source> 标签为视频提供多个源。例如：

<video width="320" height="190" controls>
    <source src="video.ogg" type="video/ogg">
    <source src="video.mp4" type="video/mp4">
</video>

在上面的示例中，浏览器会选择其资源受支持的第一个 <source> 标签。如果浏览器不支持 ogg 格式，它将移动到下一个 <source> 标签并播放 mp4 文件。这有助于视频在各种设备上播放。

HTML <video> 标签的属性

让我们来看看 HTML <video> 标签支持的属性。

• autoplay
• controls
• height 和 width
• loop
• muted
• src
• preload

我们将详细了解这些属性。

autoplay

autoplay 属性自动播放视频。例如：

<video width="320" height="190" controls autoplay>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

浏览器输出

在上面的程序中，我们使用了 autoplay 属性。视频将在准备就绪后立即开始播放，无需用户点击播放按钮。

注意：autoplay 属性通常被认为是一种糟糕的用户体验，因为它可能会让用户感到烦恼。有些浏览器不允许视频自动播放，除非它也被静音。

controls

control 属性允许用户控制视频。这些控件可能包括播放按钮、暂停按钮和音量控制等。这有助于用户控制视频的播放，而无需使用任何额外的软件或工具。例如：

<video width="320" height="190" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

浏览器输出

在这里，我们可以看到浏览器提供的控件。

高度和宽度

<video> 元素中的 height 和 width 属性以像素为单位指定视频播放器的大小。例如：

<video width="600" height="350" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

浏览器输出

在上面的示例中，视频播放器的 width 和 height 分别设置为 600 和 350 像素。

我们还可以通过在样式表中使用 width 或 height 属性，或者使用 style 属性，通过 CSS 设置视频的宽度或高度。例如：

<video style="height: 350px; width: 600px;" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

浏览器输出

height 和 width 属性让浏览器知道为视频分配多少空间。否则，当视频加载时，周围的内容会移动。

loop

loop 属性指定视频播放结束后自动从头开始播放。例如：

<video width="320" height="190" loop controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

浏览器输出

muted

muted 属性将视频音量设置为 0。例如：

<video width="320" height="190" muted controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

浏览器输出

poster

poster 属性指定一个链接，指向在视频未播放或仍在下载时显示的图像。

它更像是视频的缩略图。它显示在视频播放器将显示的位置，在用户决定播放视频之前，向他们提供视频内容的视觉指示。例如：

<video width="300" height="220" controls poster="poster.png">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
</video>

浏览器输出

如果您未指定海报帧，则视频的第一帧将用作海报帧。

src

src 属性指定视频播放器中应播放的视频文件的位置。例如：

<video src="/videos/sample.mp4">

这里，<video> 元素的 src 属性用于指定在视频播放器中应播放的单个视频文件的位置。这是在 HTML 页面上包含视频的最简单方法。

注意：HTML 视频至少需要一个 src 属性或 <source> 标签。

preload

preload 属性指定页面加载后视频文件应如何加载，以获得更好的用户体验。它可能具有以下值之一：

1. none: 表示不应预加载视频。例如：

<video preload="none" src="/videos/sample.mp4"></video>

2. metadata: 表示只获取视频元数据。例如：

<video preload="metadata" src="/videos/sample.mp4"></video>

3. auto: 表示在页面加载时将加载整个视频文件。例如：

<video preload="auto" src="/videos/sample.mp4"></video>