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

问题

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

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.

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)

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());
});

the SeekHandle appears at the end.

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.

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 How can I change the start-value of the videojs SeekBar on init or later?

回答1:

My solution, if anyone has a similar Problem:

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) 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.

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);

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.

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.

来源：https://stackoverflow.com/questions/32744004/videojs-manipulate-start-value-of-seekbar-always-0-to-support-dvr-dvr-like-s