HTML Video——如何用 HTML 5 Video 标签嵌入视频播放器

原文：HTML Video – How to Embed a Video Player with the HTML 5 Video Tag，作者：Kolade Chris

在 HTML 5 出现之前，Web 开发者必须用 Adobe flash player 等插件在网页上嵌入视频。

今天，你可以通过 <video> 标签轻松地将视频嵌入到 HTML 文档中。

在这篇文章中，我们将看到 <video> 标签在 HTML 中是如何工作的。

基本语法

就像 <img> 标签一样，<video> 具有 src 属性，在这里你需要注明视频来源。

<video src="weekend.mp4"></video>

默认情况下，它在浏览器中显示为图像：

这个 CSS 将网页中的所有内容居中，并改变背景颜色。

 body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #d3d3d3;
    }

此外，你可以用 <source> 标签为 <video> 指定多个视频源。这个 <source> 标签也必须带有自己的 src 属性。

你可以使用多个 <source> 标签，使同一视频的不同格式可用。浏览器就会播放它所支持的格式。

<video controls>
   <source src="weekend.mp4" />
   <source src="weekend.ogg" />
   <source src="weekend .webm" />
</video>

`<video>` 标签的属性

<video> 标签支持全局属性，例如：id、class、style 等等。

如果你想知道什么是全局属性，它们是所有 HTML 标签都支持的属性。

<video> 标签支持的具体属性包括 src、poster、controls、loop、autoplay、width、height、muted、preload 等等。

`src` 属性

src 属性用于指定视频的来源。它可以是你本地机器上的视频的相对路径，也可以是互联网上的实时视频链接。

<video src="weekend.mp4"></video>

它是可选的，因为你可以用 <source> 标签来代替它。

`poster` 属性

有了 poster 属性，你可以在视频开始播放前或在视频下载时显示一张图片。

<video src="weekend.mp4" poster="benefits-of-coding.jpg"></video>

浏览器将显示这个图像，而不是视频的第一个场景的图像：

`controls` 属性

当你使用 controls 时，它让浏览器显示播放控制器，如播放和暂停、音量、搜索等。

<video
      controls
      src="weekend.mp4"
      poster="benefits-of-coding.jpg"
></video>

`loop` 属性

使用 loop 属性，你可以使视频自动重复。也就是说，让它在每次停止播放时重新开始播放。

<video
      controls
      loop
      src="weekend.mp4"
      poster="benefits-of-coding.jpg"
></video>

`autoplay` 属性

autoplay 属性让你在页面加载后立即自动开始播放视频。

<video
      controls
      loop
      autoplay
      src="weekend.mp4"
      poster="benefits-of-coding.jpg"
></video>

`width` 和 `height` 属性

你可以使用 width 和 height 属性来指定视频的宽度和高度，单位为像素。它只接受绝对值，例如 xx 像素。

<video
      controls
      loop
      autoplay
      src="weekend.mp4"
      width="350px"
      height="250px"
      poster="benefits-of-coding.jpg"
></video>

`muted` 属性

你可以使用 muted 属性告诉浏览器在开始播放时不播放与视频相关的任何声音。

<video
      controls
      loop
      autoplay
      muted
      src="weekend.mp4"
      width="350px"
      height="250px"
      poster="benefits-of-coding.jpg"
></video>

如果有 controls 属性，用户可以单击音量按钮取消静音。

`preload` 属性

通过 preload 属性，你可以向浏览器提供一个提示，说明在页面加载时是否要下载视频。

这个属性对用户体验至关重要。

你可以在 preload 属性中使用 3 个值：

none：指定视频在用户按下播放键之前不会加载
auto：指定视频应该被下载，即使用户没有按下播放键
metadata：指定浏览器应收集元数据，如长度、大小、持续时间等

<video
      controls
      loop
      autoplay
      muted="true"
      preload="metadata"
      src="weekend.mp4"
      width="350px"
      height="250px"
      poster="benefits-of-coding.jpg"
></video>

总结

在这篇文章中，你了解了 HTML5 的 <video> 标签及其属性，所以你可以在你的项目中以正确的方式使用它。

由于音频是一个完整视频的重要组成部分，你也可以使用 <video> 标签把音频文件放在网页上。但在大多数情况下，你应该使用 <audio> 标签来实现这一目的，保证良好的用户体验。

如果你觉得这篇文章有帮助，请与你的朋友和家人分享它，以便让更多可能需要它的人看到。

目录

基本语法

<video> 标签的属性

src 属性

poster 属性

controls 属性

loop 属性

autoplay 属性

width 和 height 属性

muted 属性

preload 属性

总结