HTML - 视频元素

HTML<video> 元素用于在网页中启用视频播放支持。

它的工作原理与<img> 元素非常相似，因为它也需要在src 属性 中添加视频的路径或 URL。HTML 仅支持 MP4、WebM 和 Ogg 视频格式。<video> 元素也支持音频，但是 <audio> 元素更适合此目的。我们将在下一章中介绍音频元素。

语法

<video width="450" height="250" controls>
   <source src="url/of/video" type="video/webm">
</video>

HTML 视频元素示例

以下是一些示例代码，说明了如何在网页中使用视频元素。

在 HTML 中嵌入视频

要在网页中嵌入视频，我们需要在 <video> 元素内设置src 属性，该属性指定视频的路径或 URL。网页向各种类型的浏览器中的各种用户提供内容。如前所述，每个浏览器都支持不同的视频格式（MP4、WebM 和 Ogg）。因此，我们可以通过在<video> 元素中包含多个 <source> 标签 来提供 HTML 支持的所有格式。我们让浏览器决定哪种格式更适合视频播放。

我们还可以使用 controls 属性为用户启用内置控件来控制音频和视频播放（如果需要）。它提供了一个界面，使用户能够管理视频播放功能，例如音量调整、视频导航（向前和向后）以及播放或暂停操作。

以下示例显示了如何在视频元素内插入视频的路径或 URL。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>

<body>
   <p>Playing video using video element</p>
   <p>
      The browser is responsible for determining 
      the appropriate format to use.
   </p>
   <video width="450" height="250" controls>
      <source src="/html/media/video/sampleTP.webm" 
              type="video/webm">
      <source src="/html/media/video/sampleTP.mp4" 
              type="video/mp4">
      <source src="/html/media/video/sampleTP.ogv" 
              type="video/ogg">
      <p>Sorry, video element is not supported!</p>
   </video>
</body>
</html>

设置视频显示区域的尺寸

要设置视频显示区域（也称为视口）的尺寸，我们可以使用<video> 元素的 height 和 width 属性。这些属性以像素为单位定义视频视口的高度和宽度。

请注意，视频将调整其纵横比（例如 4:3 和 16:9）以与指定的高度和宽度对齐。因此，建议匹配视口的尺寸以获得更好的用户体验。

让我们看下面的示例代码来更好地理解。

<!DOCTYPE html>
<html>
<head>
   <title>
      HTML Video Element
   </title>
</head>
<body>
   <p>Playing video using video element</p>
   <video width="450" height="250" controls>
      <source src="/html/media/video/sampleTP.mp4" 
              type="video/mp4">
   </video>
</body>
</html>

视频的自动播放和循环

我们可以使用 autoplay 和 loop 属性将视频配置为自动循环播放。请记住，一些浏览器（如Chrome 70.0）不支持自动播放功能，除非使用 muted 属性。因此，建议将 autoplay 和 muted 属性一起使用。

以下示例说明了视频的autoplay 和循环。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>
<body>
   <p>Playing video using video element</p>
   <video width="450" 
          height="250" 
          autoplay 
          muted 
          loop>
      <source src="/html/media/video/sampleTP.mp4" 
              type="video/mp4">
   </video>
</body>
</html>

为视频使用缩略图

我们可以在<video> 元素的 poster 属性中传递一个图像的 URL，该图像用作视频的缩略图。它将在视频开始播放之前显示指定的图像。

在以下示例中，我们说明了poster 属性的使用。

<!DOCTYPE html>
<html>
<head>
   <title>HTML Video Element</title>
</head>
<body>
   <p>Playing video using video element</p>
   <video width="450" 
          height="250" 
          controls 
          muted 
          poster ="html/images/logo.png" >
      <source src="/html/media/video/sampleTP.mp4" 
              type="video/mp4">
   </video>
</body>
</html>

不同浏览器对不同视频格式的支持

下表说明了不同浏览器支持的各种视频格式。

浏览器	OGG	WebM	MP4
Chrome	是	是	是
Edge	是	是	是
Safari	否	是	是
Firefox	是	是	是
Opera	是	是	是

打印页面