请注意，“旧版”直播用户界面目前是默认设置，请参阅有关新的用户界面的部分以获取设置信息。

默认直播用户界面

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

注意：它通过向播放器添加vjs-live类来实现这一点，组件的显示/隐藏都由 CSS 处理。

这使得播放器必须隐藏进度条、定位条，并显示指示播放器处于直播状态的文本。如果切换到非直播视频（通过另一个durationchange事件），所有这些都将再次显示。

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

1. 克隆存储库，并进入该目录
2. 运行 npm install 或 npm ci 以安装所有必要的包
3. 运行 npm start 以启动本地服务器
4. 在网络浏览器中打开 https://:9999/sandbox/live.html

新的用户界面

注意：由于原生直播 HLS 实现不支持直播流中的可定位范围，此用户界面在 Android 上将无法工作。我们建议使用 @videojs/http-streaming 覆盖原生 HLS 实现；这将使新的直播 UI 生效。

新的用户界面目前是可选加入的，以防止破坏向后兼容性。我们认为新的用户界面更好，并很可能在下一个主要版本中成为新的默认设置。如果您想使用新的用户界面，则需要在播放器设置期间传入{liveui: true}。这可以通过两种方式完成：

使用 data-setup

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

使用 videojs 函数

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

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

注意：它通过向播放器添加vjs-live和vjs-liveui类来实现这一点，组件的显示/隐藏都由 CSS 处理。

新的直播用户界面会显示进度/定位条，并允许用户在直播窗口内向后/向前定位。接着，它通过SeekToLive组件添加了一个按钮，当用户落后于直播时可以点击该按钮以定位到直播当前时间。当播放器未处于直播状态时，同一个按钮会通过灰色圆圈指示播放器的currentTime是否处于直播状态；处于直播状态时则显示红色圆圈。

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

1. 克隆存储库，并进入该目录
2. 运行 npm install 或 npm ci 以安装所有必要的包
3. 运行 npm start 以启动本地服务器
4. 在网络浏览器中打开 https://:9999/sandbox/liveui.html

LiveTracker

注意：通过在初始化播放器时传入liveTracker: false，可以关闭此组件。

除了新的直播 UI，我们还实现了一个 API，无论使用哪种用户界面，该 API 都可以使用。此 API 是播放器的子级，应位于播放器的 player.liveTracker 处。LiveTracker 提供了几个有用的辅助函数和事件，用于处理直播播放，所有这些都在内部使用和测试。在内部，此组件通过一个每 30 毫秒运行一次的函数来跟踪直播当前时间。

seekableendchange 事件

直播跟踪器将在播放器的seekableEnd每次更改时触发此事件。这在内部用于保持我们的pastSeekEnd()函数最新。

liveedgechange 事件

顾名思义，当直播跟踪器检测到当前时间不再处于直播前沿时，它将触发此事件。

startTracking() 和 stopTracking()

这些函数可以被调用来随意启动/停止直播播放跟踪。通常，当播放器触发持续时间为Infinity的durationchange事件时，这些函数会自动处理。除非您正在执行非常特定的操作，否则您不会想要调用它们。

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，因为这是当前媒体的最远可定位点。

注意：如果 seekable end 中的任何位置是 Infinity，则此函数将返回 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，因为这是当前媒体的第一个可定位点。

注意：如果 seekable start 中的任何位置是 Infinity，则此函数将返回 Infinity

liveWindow()

此函数获取seekableStart()和liveCurrentTime()之间的时间量。我们在内部使用此功能来更新条形图（如进度/定位条）的总长度。

atLiveEdge() 和 behindLiveEdge()

判断播放器的 currentTime 是否足够接近直播，以被视为直播。我们确保它足够接近，而不是绝对处于直播状态，因为有太多因素会影响确定何时真正处于直播状态。当 currentTime 在两个可定位增量和 70 毫秒（直播跟踪间隔的两个滴答）内时，我们认为其处于直播状态。可定位增量是一个数字，由 seekable end 随播放进行而变化的量决定。有关更多信息，请参阅seekableendchange事件和pastSeekEnd()函数。

liveCurrentTime()

直播当前时间是我们对直播当前时间的最佳近似值。在内部，它使用pastSeekEnd()函数并将其添加到seekableEnd()函数。此函数可能返回Infinity。

pastSeekEnd()

这是我们用于跟踪播放器是否处于直播状态的主要值。每隔30ms，我们向此值添加0.03秒，并且每次seekableendchange时，它都会被重置为 0，并立即添加0.03。

isTracking() 和 isLive()

isTracking 和 isLive 做同样的事情，它们告诉您LiveTracker是否正在跟踪直播播放，并且由于我们假定直播跟踪只在直播期间进行，所以它们应该是一样的。

seekToLiveEdge()

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