videojs：操纵 SeekBar 的起始值（始终为 0），以支持 DVR/DVR-like 流

Question

我想使用 videojs 实现类似于 http://www.dash-player.com/demo/live-streaming-dvr/ 的东西。

我从 timeShiftBufferDepth 设置为 15 分钟的 wowza 流媒体引擎获得 manifest.mpd (type=dynamic)。我正在使用 videojs v4.12.15、dashjs v1.5.0 和 videojs-contrib-dash v1.1.1 来显示流。

如您所见，SeekHandle 位于位置 0。currentTime 位于 216:07:07（来自 manifest.mpd），持续时间为 4.99……非常大。（videojs seams 与 infinite 有一些问题，但这在这里并不重要）

视频进行时，SeekHandle停留在位置0，因为duration（巨大的数字）太大，无法到达。 videojs 接缝以持续时间的百分比推进 SeekHandle。当我将持续时间设置为当前时间时，

player.on("timeupdate", function () {
   this.duration(this.currentTime());
});

SeekHandle 出现在最后。

当我现在尝试在 SeekBar 中查找时，SeekBar 包含从 00:00:00 到持续时间值 (currentTime == 216:07:07) 的值。由于流的性质，我无法回到流的开头，但多亏了 dvr，我可以回到 15 分钟。

这意味着，我希望能够从 currentTime-15min (215:52:07) 查找到 currentTime (216:07:07)。为此，我必须更改 SeekBar 的起始值，而这正是我迷路的地方。我不知道如何将它从 00:00:00 更改为 currentTime-15min (215:52:07)

tl;dr 如何在 init 或更高版本上更改 videojs SeekBar 的起始值？

Answer 1

我的解决方案，如果有人有类似的问题：

您必须在原始videojs脚本中编辑或改编以下功能：

vjs.SeekBar.prototype.onMouseMove = function(event){
  var newTime = this.calculateDistance(event) * this.player_.duration();

  // Don't let video end while scrubbing.
  if (newTime == this.player_.duration()) { newTime = newTime - 0.1; }

  // Set new time (tell player to seek to new time)
  this.player_.currentTime(newTime);
};

this.calculateDistance(event) returns 一个介于 0 和 1 之间的值，它描述了您在 SeekBar 上单击的位置。因此，如果您恰好在 SeekBar 的中间单击，将返回 0.5。

比方说，您想要向后滑动 window 50 秒，那么您必须更改 newTime 的分配。

var newTime = (this.player_.currentTime() - 50) + (this.calculateDistance(event) * 50);

示例：你想在视频中倒退 25 秒。为此，您可以在它的中间恰好单击 SeekBar。事件被触发，并且 this.calculateDistance(event) 设置为 0.5 。 0.5 * 50 正好是 25 秒。 (this.player_.currentTime() - 50) 定义 SeekBar 的开始 (0%)。添加计算出的 25 秒将为您提供所需的时间。

你可以在这里看到我的插件：https://gist.github.com/bernhardreisenberger/da0ff4e9a30aa4b6696e 这只是一个原型，并没有完成的插件。 SeekHandle 保持在错误的位置，以及其他问题。

videojs：操纵 SeekBar 的起始值（始终为 0），以支持 DVR/DVR-like 流

videojs: manipulate start-value of SeekBar (always 0), to support DVR/DVR-like streaming

seekbar

video.js