live(直播)

Video.js中的直播实时用户界面和API

请注意,“旧的”实时用户界面当前是默认设置,有关设置的信息,请参见当前页面。


默认实时用户界面

当Video.js检测到正在播放的视频是直播(通过事件)时,默认用户界面控制栏上隐藏ProgressControl组件并显示该LiveDisplay组件durationchange

注意:它是通过向播放器添加vjs-live类来实现的,并且组件的显示/隐藏都是在css中处理的。

这使得播放器必须隐藏进度条和搜索栏,并显示文字表示播放器是实时的。如果切换到非直播视频,将再次显示进度条和搜索栏(通过另一个durationchange事件)。

请查看用户界面的示例:

  • 克隆存储库,然后移至该目录
  • 运行npm installnpm ci安装所有必需的软件包
  • 运行npm start以启动本地服务器
  • 在浏览器中打开http://localhost:9999/sandbox/live.html


新的用户界面

注意:这个用户界面不能在Android上工作,因为原生的live 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});
当Video.js检测到正在播放的视频是直播的(通过事件)时,新的用户界面会在ProgressControl控件栏上显示该组件,隐藏该LiveDisplay组件并显示新SeekToLive组件durationchange。除了ProgressControl更新,我们还更新了播放器上的所有时间工具提示,以指示当前实时时间为负数,而不是寻找特定时间。

注意:这是通过向播放器添加vjs-liveand vjs-liveui类来实现的,而组件的显示/隐藏都在css中处理。

新的用户直播界面显示进度/搜索栏,并允许用户在直播窗口中向后/向前搜索。接下来,它通过SeekToLive组件添加一个按钮,当用户处于直播状态后可以单击该组件,该组件将搜索当前实时时间。同一个按钮指示播放器的当前时间是否是实时的,当不在线时,通过一个灰色圆圈和一个红色圆圈显示。

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

  • 克隆存储库,然后移至该目录
  • 运行npm installnpm ci安装所有必需的软件包
  • 运行npm start以启动本地服务器
  • http://localhost:9999/sandbox/liveui.html在网络浏览器中打开


LiveTracker

注意:可以在初始化期间将liveTracker: false传递给播放器以关闭此组件。

与新的liveui一起,我们实现了一个API,无论使用哪个用户界面,都可以使用它。这个API是播放器的子级,,应该在播放器的player. livetracker上。LiveTracker提供了几个有用的辅助函数和事件来处理实时回放,所有这些都在内部使用和测试。在内部,该组件通过一个以30ms间隔运行的函数来跟踪当前活动时间。

seekableendchange事件

当播放器的seekableEnd发生变化时,live跟踪器将触发该事件。这在内部用于保持pastSeekEnd()函数的最新状态。

liveedgechange事件

顾名思义,当实时跟踪器检测到当前时间不在实时边缘时,它将触发此事件。

startTracking()和stopTracking()

可以调用这些函数来任意开始/停止跟踪实时播放。通常,当玩家触发durationchange持续时间为无穷大时,这些会自动处理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在可搜索端的任意位置,则将返回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是否足够接近直播时间,才可以视为直播时间。我们确保它足够接近而不是绝对存在,因为有太多因素无法确定何时真正存在。当currentTime在两个可搜索的增量和70ms(实时跟踪间隔的两个周期)之内时,我们认为它是实时的。可搜索增量是一个数字,该数字由可回放结束时随着回放继续而变化的数量决定。有关更多信息,请参见seekableendchange事件和pastSeekEnd()函数。

liveCurrentTime()

当前时间是我们当前当前时间的最佳近似值。在内部,它使用pastSeekEnd()功能并将其添加到seekableEnd()功能中。该函数可能会返回Infinity。

pastSeekEnd()

这是我们用来跟踪播放器是否活跃的主要值。我们每30ms将0.03加到这个值上,并将seekableendchange其重置为0,0.03会立即加到它上面。

isTracking()和isLive()

isTracking和isLive做同样的事情,它们会告诉你LiveTracker当前是否在跟踪直播回放,因为我们假设直播跟踪只会在直播期间进行,所以它们应该是一样的。

seekToLiveEdge()

这个函数将播放器currentTime设置为liveCurrentTime()函数的结果。如果播放当前暂停,它也会开始播放。它开始回放,因为它很容易落后于现场直播,如果播放器没有播放。


上一篇:layout(布局) 下一篇:middleware(中间件)