直播支持

请注意，"旧" 实时用户界面是当前的默认设置，有关设置的信息，请参阅新用户界面部分。

默认的实时用户界面

默认用户界面会隐藏控制栏上的 ProgressControl 组件，并在 Video.js 检测到正在播放的视频是实时的（通过 durationchange 事件）时显示 LiveDisplay 组件。

注意：它是通过在播放器中添加 vjs-live 类来实现这一点的，而且组件的显示/隐藏都是通过 css 来处理的。

这样，播放器就必须隐藏进度条、寻路条，并显示文本，说明播放器正在直播。如果切换到非实时视频（通过另一个 durationchange 事件），所有这些都将再次显示。

要查看该用户界面的示例，请：

• 克隆软件源，并移入该目录

• 运行 npm install 或 npm ci 安装所有必要的软件包

• 运行 npm start 启动本地服务器

• 在网页浏览器中打开 http://localhost:9999/sandbox/live.html

新的用户界面

注意：由于本机的直播 HLS 实现不支持直播流中的可搜索范围，因此该用户界面无法在安卓系统上运行。我们建议使用 @videojs/http-streaming 覆盖本机 hls 实现；这将使新的 liveui 正常工作。

新的用户界面目前是选择性的，以防止破坏向后兼容性。我们认为新的用户界面要好得多，而且很可能在下一个主要版本中成为新的默认用户界面。如果您想使用新的用户界面，就必须在设置播放器时通过 {liveui:true}。有两种方法：

使用 data-setup

<video-js data-setup='{"liveui": true}'></video-js>

使用 videojs 函数

var player = videojs('some-player-id', {liveui: true});

新的用户界面在控制栏上显示 ProgressControl 组件，隐藏 LiveDisplay 组件，并在 Video.js 检测到正在播放的视频是实时的（通过持续时间变化事件）时显示新的 SeekToLive 组件。在更新 ProgressControl 的同时，我们还更新了播放器上的所有时间工具提示，以显示当前实时时间的负数，而不是搜索到特定时间。

公共广告位-前端

注：它是通过在播放器中添加 vjs-live 和 vjs-liveui 类来实现这一点的，组件的显示/隐藏全部由 css 处理。

新的实时用户界面显示进度/搜索栏，并允许用户在实时窗口内向前/向后搜索。接下来，它通过 SeekToLive 组件添加了一个按钮，当用户在实时时间后方时点击该按钮，就能搜索到当前的实时时间。同样的按钮在非实时时会显示一个灰色圆圈，在实时时会显示一个红色圆圈，以此显示播放器的当前时间是否为实时时间。

要查看该用户界面的示例：

• 克隆软件源，并移入该目录

• 运行 npm install 或 npm ci 安装所有必要的软件包

• 运行 npm start 启动本地服务器

• 在网页浏览器中打开 http://localhost:9999/sandbox/liveui.html

LiveTracker

注意：在初始化过程中，可通过向播放器传递 liveTracker: false 关闭该组件。

除了新的 liveui，我们还实现了一个 API，无论使用哪个用户界面都可以使用。该应用程序接口是播放器的子程序，应位于播放器的 player.liveTracker 中。LiveTracker 提供了几个有用的辅助函数和事件来处理实时回放，所有这些函数和事件都在内部使用和测试。在内部，该组件通过一个以 30ms 为间隔运行的函数来跟踪实时当前时间。

seekableendchange 事件

每次播放器的 seekableEnd 发生变化时，实时跟踪器都会触发该事件。这在内部用于更新我们的 pastSeekEnd() 函数。

liveedgechange 事件

顾名思义，实时跟踪器会在检测到当前时间不再处于实时边缘时触发该事件。

startTracking() 和 stopTracking()

调用这些函数可任意开始/停止跟踪实时播放。通常情况下，当播放器触发持续时间为 Infinity 的持续时间变化时，这些函数会自动处理。除非你在做一些相当特殊的事情，否则你不会想调用它们。

seekableEnd()

seekableEnd 获取最远可搜索终点的时间（以秒为单位）。例如，如果我们有一个可寻址 TimeRanges 数组，数组中的第一个元素是 start() 秒，最后一个元素是 end() 秒：

// seekable index 0: 0 is start, 1 is end
// seekable index 1: 2 is the start, 3 is the end
const seekableExample = [[0, 1], [2, 3]];

seekableEnd 将返回 3，因为这是当前媒体的最远可搜索点。

注意：如果 Infinity 在 seekable end 中的任何位置，则会返回 Infinity

seekableStart()

seekableStart 获取最早的可搜索开始时间（以秒为单位）。例如，如果我们有一个可寻址 TimeRanges 数组，数组中的第一个元素是 start() 秒，最后一个元素是 end() 秒：

// seekable index 0: 0 is start, 1 is end
// seekable index 1: 2 is the start, 3 is the end
const seekableExample = [[0, 1], [2, 3]];

seekableStart 将返回 0，因为这是当前媒体的第一个可搜索点。

注意：如果在可寻点起点的任何位置有 Infinity，则会返回 Infinity

liveWindow()

该函数用于获取 seekableStart() 和 liveCurrentTime() 之间的时间间隔。我们在内部使用它来更新进度条/搜索条等条形图的总长度。

atLiveEdge() 和 behindLiveEdge()

确定播放器的当前时间是否足够接近实时时间，从而被视为实时时间。我们要确保它足够接近实时，而不是绝对实时，因为有太多因素无法确定何时是真正的实时。当 currentTime 在两个可寻址增量和 70 毫秒（实时跟踪间隔的两个刻度）范围内时，我们就认为它是实时的。可寻址增量是一个数字，由可寻址终点在播放过程中的变化量决定。更多信息，请参阅 seekableendchange 事件和 pastSeekEnd() 函数。

liveCurrentTime()

直播时间是我们对直播时间的最佳近似值。它在内部使用 pastSeekEnd() 函数，并将其添加到 seekableEnd() 函数中。该函数有可能返回无穷大。

pastSeekEnd()

这是我们用来跟踪播放器是否直播运行的主要值。每隔 30 毫秒，我们会在该值上添加 0.03 秒，而每一次寻址变化都会将该值重置为 0，并立即添加 0.03 秒。

isTracking() 和 isLive()

isTracking 和 isLive 的作用是一样的，它们会告诉你 LiveTracker 当前是否正在跟踪实时回放，由于我们假设实时跟踪只在直播时进行，所以它们应该是一样的。

seekToLiveEdge()

此函数将播放器的 currentTime 设置为 liveCurrentTime() 函数的结果。