videojs:操纵SeekBar的起始值(始终为0)，以支持类似DVR/DVR的流媒体 [英] videojs: manipulate start-value of SeekBar (always 0), to support DVR/DVR-like streaming

问题描述

我想实现类似 http://www.dash的类似内容-player.com/demo/live-streaming-dvr/，使用videojs.

I want to realize something similar like http://www.dash-player.com/demo/live-streaming-dvr/, using videojs.

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

I get a manifest.mpd (type=dynamic) from the wowza streaming engine with timeShiftBufferDepth set to 15 minutes. I am using videojs v4.12.15, dashjs v1.5.0 and videojs-contrib-dash v1.1.1 to display the stream.

如您所见，SeekHandle在位置0.currentTime在216:07:07(来自manifest.mpd)，持续时间为4.99…巨大. (videojs可能存在无限问题，但这在这里并不重要)

As you can see, the SeekHandle is at position 0. The currentTime is at 216:07:07 (from the manifest.mpd), and the duration is 4.99… enormous. (videojs seams to have some problem with infinite, but that is not important here)

当视频继续播放时，SeekHandle停留在位置0，因为持续时间(数量过多)太长，无法到达. videojs接缝以按持续时间的百分比提高SeekHandle的进度.当我将持续时间设置为currentTime时，

When the video proceeds, the SeekHandle stays at position 0, because the duration (the enormous number) is too high, and cannot be reached. videojs seams to progress the SeekHandle in percentage of the duration. When I set the duration to the currentTime,

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

SeekHandle出现在末尾.

the SeekHandle appears at the end.

当我现在尝试在SeekBar中搜索时，SeekBar包含从00:00:00到工期值(currentTime == 216:07:07)的值.由于流的性质，我无法返回到流的开头，但是由于dvr，我可以返回15分钟.

When I now try to seek in the SeekBar, the SeekBar contains the values from 00:00:00 to the duration-value (currentTime == 216:07:07). As of the nature of a stream, I can not seek back to the beginning of the stream, but thanks to dvr i can go back 15 minutes.

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

This means, I want to be able to seek from currentTime-15min (215:52:07) to currentTime (216:07:07). To achieve that, I would have to alter the start-value of the SeekBar, and that is exactly where I am lost. i do not know how to alter it from 00:00:00 to currentTime-15min (215:52:07)

tl; dr如何在init或以后更改videojs SeekBar的起始值?

推荐答案

我的解决方案，如果有人遇到类似的问题:

My solution, if anyone has a similar Problem:

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

You have to edit or adapt the following function in the original videojs script:

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)返回一个介于0和1之间的值，该值描述了您在SeekBar上单击的位置.因此，如果您恰好在SeekBar的中间单击，将返回0.5.

this.calculateDistance(event) returns a value between 0 and 1, which describes the position of your click on the SeekBar. So If you exactly clicked in the middle of the SeekBar, 0.5 will be returned.

让我们说，您想向后滑动窗口50秒，然后您必须更改newTime的分配.

Lets say, you want to have a sliding window of 50 seconds back, then you have to alter the assignment of 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秒将为您找到所需的时间.

Example: You want to go back 25 seconds in the video. To do that, you click the SeekBar exactly at the middle of the it. The event gets fired, and this.calculateDistance(event) is set to 0.5 . 0.5 * 50 is exactly 25 seconds. (this.player_.currentTime() - 50) defines the start (0%) of the SeekBar. Adding the calculated 25 seconds will get you the time you seeked for.

您可以在此处看到我的插件: https://gist.github.com/bernhardreisenberger/da0ff4e9a30aa4b6696e 这只是一个原型，还没有完成的插件. SeekHandle仍然处于错误的位置，以及其他问题.

You can see my Plugin here: https://gist.github.com/bernhardreisenberger/da0ff4e9a30aa4b6696e This is just a prototype, and no finished Plugin. The SeekHandle remains on the wrong position, and other issues.

这篇关于videojs:操纵SeekBar的起始值(始终为0)，以支持类似DVR/DVR的流媒体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！