HTML5 ＜video＞标签属性、API 方法、事件、自定义样式详解与实用示例

在这里插入图片描述

HTML5 <video> 标签为网页内嵌视频提供了强大且便捷的功能。以下是对 <video> 标签的主要属性、API 方法、事件、自定义样式及其使用示例的详细介绍：

一、属性

1. src

定义：指定视频文件的 URL。
示例：
```
<video src="my_video.mp4"></video>
```

2. controls

定义：当设置此属性时，浏览器会显示内置的播放控制（如播放/暂停按钮、音量控制、全屏切换等）。

示例：

<video src="my_video.mp4" controls></video>

3. width 和 height

定义：设置视频播放器的宽高（以像素为单位）。

示例：

<video src="my_video.mp4" width="640" height="360"></video>

4. poster

定义：指定视频加载时显示的封面图片 URL。

示例：

<video src="my_video.mp4" poster="video_cover.jpg"></video>

5. autoplay

定义：如果设置，视频将在页面加载后自动开始播放。

示例：

<video src="my_video.mp4" autoplay></video>

6. loop

定义：当设置时，视频会在播放结束后自动重头开始。

示例：

<video src="my_video.mp4" loop></video>

7. muted

定义：设置视频初始为静音状态。

示例：

<video src="my_video.mp4" muted></video>

8. preload

定义：指示浏览器如何预先加载视频数据。可选值有：
- none：不预加载视频数据。
- metadata：仅预加载视频元数据（如时长、尺寸）。
- auto：尽可能多地预加载视频内容。

示例：

<video src="my_video.mp4" preload="metadata"></video>

9. crossorigin

定义：指定视频是否应该以 CORS 方式加载。这对于需要访问视频帧数据的跨域视频至关重要。可选值有：
- anonymous：请求不包含凭据。
- use-credentials：请求包含凭据（如 cookie、HTTP 认证等）。

示例：

<video src="https://other-domain.com/my_video.mp4" crossorigin="anonymous"></video>

10. `controlslist`

HTML5 的 <video> 标签提供了丰富的媒体播放功能，其中 controlslist 属性允许开发者精细控制浏览器提供的默认视频控件中显示或隐藏的特定组件，以适应不同的用户体验需求或设计要求。以下是关于 controlslist 属性的详细说明：

controlslist 属性可以直接应用于 <video> 元素。要启用它，只需在 HTML 代码中的 <video> 标签中添加 controlslist 属性，并设置其值为一个空格分隔的控件列表。例如：

<video src="my_video.mp4" controls controlslist="nodownload noplaybackrate">

10.1. 可用值

controlslist 支持以下值，这些值可单独使用或组合使用：

nodownload：阻止显示下载按钮，防止用户直接下载视频文件。这有助于保护视频内容的版权或限制离线访问。
nofullscreen：禁止全屏模式按钮的显示，防止用户将视频切换到全屏观看。
noremoteplayback（或 disableremoteplayback）：禁用远程播放选项，如在连接到同一网络的其他设备（如智能电视）上投射或播放视频。
noplaybackrate：移除播放速度控制器，用户将不能调整视频的播放速率（如快进、慢放或倒带）。
nokeyboard（实验性，非标准）：在某些浏览器中，可能用于隐藏键盘快捷键提示或禁止通过键盘操作视频控件。

请注意，不是所有浏览器都完全支持所有的 controlslist 值，尤其是在 nokeyboard 这种较新或实验性的特性上。对于广泛支持的值（如 nodownload、nofullscreen、noremoteplayback 和 noplaybackrate），现代浏览器通常会遵循这些指示。

10.2. 默认行为与覆盖

默认情况下，如果仅使用 controls 属性而未指定 controlslist，浏览器将显示一组完整的标准控件，包括播放/暂停按钮、进度条、音量控制、全屏按钮、下载按钮（如果支持），以及可能的播放速度控制器。

当指定了 controlslist 并包含否定属性（如 nodownload），浏览器会相应地隐藏或禁用指定的控件。例如，如果希望仅显示基本的播放/暂停、进度条和音量控制，同时禁止下载、全屏和播放速度调整，可以这样设置：

<video src="my_video.mp4" controls controlslist="nodownload nofullscreen noplaybackrate">

10.3. 浏览器兼容性

虽然 controlslist 是 HTML5 规范的一部分，但实际支持情况可能因浏览器版本不同而有所差异。一些较新的或实验性的功能（如 nokeyboard）可能只有在特定浏览器或特定版本中才能使用。在实际应用时，建议查阅最新的浏览器兼容性数据，确保所使用的 controlslist 值在目标用户群体的主流浏览器中得到良好支持。

10.4. 替代方案

对于不被所有浏览器广泛支持的 controlslist 值，或者为了实现更定制化的视频播放器外观与功能，开发者可以选择使用第三方 JavaScript 库或自定义 CSS/JavaScript 来创建完全自定义的视频控件界面。这种情况下，可以移除 controls 属性并自行编写交互逻辑，从而实现对视频播放器的完全控制。

总结来说，HTML5 <video> 标签的 controlslist 属性提供了一种简便的方法来定制浏览器默认视频控件的显示内容，允许开发者根据项目需求隐藏特定功能以增强内容保护或优化用户界面。在使用时应注意浏览器兼容性，并在必要时结合自定义代码实现更复杂的播放器定制。

二、API 方法

1. play()

定义：开始或恢复视频播放。

示例（JavaScript）：

const videoElement = document.querySelector('video');
videoElement.play();

2. pause()

定义：暂停视频播放。

示例（JavaScript）：

const videoElement = document.querySelector('video');
videoElement.pause();

3. load()

定义：重新加载视频源。通常在更改 src 属性或需要刷新视频状态时调用。

示例（JavaScript）：

const videoElement = document.querySelector('video');
videoElement.src = 'new_video.mp4';
videoElement.load();

4. currentTime

定义：获取或设置当前视频播放的时间位置（以秒为单位）。

示例（JavaScript）：

const videoElement = document.querySelector('video');

// 获取当前播放时间
let currentTime = videoElement.currentTime;

// 跳转到指定时间
videoElement.currentTime = 30;  // 秒

5. duration

定义：获取视频的总时长（以秒为单位）。

示例（JavaScript）：

const videoElement = document.querySelector('video');
let totalDuration = videoElement.duration;

6. volume

定义：获取或设置视频的音量。取值范围为 0.0（静音）至 1.0（最大音量）。

示例（JavaScript）：

const videoElement = document.querySelector('video');

// 获取当前音量
let currentVolume = videoElement.volume;

// 设置音量
videoElement.volume = 0.5;  // 一半音量

7. playbackRate

定义：获取或设置视频的播放速率。大于 1.0 表示加速播放，小于 1.0 表示慢速播放，1.0 为正常速度。

示例（JavaScript）：

const videoElement = document.querySelector('video');

// 获取当前播放速率
let playbackRate = videoElement.playbackRate;

// 设置播放速率
videoElement.playbackRate = 1.5;  // 1.5 倍速播放

三、事件

1. play

定义：当视频开始或恢复播放时触发。

示例（JavaScript）：

const videoElement = document.querySelector('video');
videoElement.addEventListener('play', function () {
  console.log('Video is now playing.');
});

2. pause

定义：当视频暂停时触发。

示例（JavaScript）：

const videoElement = document.querySelector('video');
videoElement.addEventListener('pause', function () {
  console.log('Video has been paused.');
});

3. ended

定义：当视频播放到达结尾时触发。

示例（JavaScript）：

const videoElement = document.querySelector('video');
videoElement.addEventListener('ended', function () {
  console.log('Video has finished playing.');
});

4. timeupdate

定义：当当前播放时间发生变化时频繁触发。

示例（JavaScript）：

const videoElement = document.querySelector('video');
videoElement.addEventListener('timeupdate', function () {
  console.log('Current time:', videoElement.currentTime);
});

5. error

定义：当视频加载或播放过程中发生错误时触发。

示例（JavaScript）：

const videoElement = document.querySelector('video');
videoElement.addEventListener('error', function (event) {
  console.error('An error occurred:', event);
});

四、多源支持

为了兼容不同的浏览器对视频编码格式的支持，可以使用 <source> 标签提供多个视频源。浏览器会自动选择第一个能成功加载和播放的源：

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

五、自定义 video controlslist 的布局与样式

在使用 video 原生 controlslist 情况下，自定义 video controlslist 的布局与样式，实际上就是通过原生 JavaScript 以及 Css 对video controlslist 标签 DOM 结构进行自定义修改。当然，也可以隐藏原生的controlslist，通过调用 video 相关 API 创建新的自定义controlslist 的布局与样式。