跳到主要内容

HTML 视频

提示
  1. HTML <video> 标签的基本用法：使用 <video> 标签和 <source> 标签嵌入视频播放器到 HTML 页面，包括指定视频文件路径和类型。
  2. 多源视频播放：通过提供多个 <source> 标签，可以为视频设置多个来源，从而确保视频在不同浏览器上的兼容性。
  3. <video> 标签的重要属性：包括 autoplay 自动播放视频、controls 显示控件、loop 循环播放、muted 静音、poster 设置视频封面、preload 预加载设置等，以增强视频播放的功能和用户体验。

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 文件相同的目录中。

注意：建议为视频指定 height 和 width，类似于 HTML 图像标签，以防止初始页面加载时出现闪烁。

带有多个 <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）​

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

<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>

浏览器输出

HTML 视频高度和宽度示例

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

我们也可以通过在样式表中或使用 style 属性对 <video> 元素应用 width 或 height 属性来设置视频的宽度或高度。例如，

<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）​

静音属性将视频的音量设置为 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>

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

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

标签。

预加载（preload）​

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

  1. none：表示不应预加载视频。例如，
<video preload="none" src="/videos/sample.mp4"></video>
  1. metadata：表示只获取视频元数据。例如，
<video preload="metadata" src="/videos/sample.mp4"></video>
  1. auto：表示页面加载时将加载整个视频文件。例如，
<video preload="auto" src="/videos/sample.mp4"></video>
最后于 更新