FP7 - DVR time

[popler]

There is a problem with time counter (on the left) during playing live stream with DVR. If time of record is litmited on the server (eg to 1 hour) and user is playing stream longer, he can rewind video before server record. Player is going back to live in this situation, but it is confusing for users. Time on the should be updated or stopped when max DVR record is reached. It will much easier for users when time to rewind will shown during mouseover event with timeline.

[phloxic]

@popler - at least the jump back was a problem with the hlsjs plugin, which I just fixed. The behaviour is still not entirely like with generic playback, one needs additional seeks when going to cached(?) positions, but it's not consistent with Flash HLS. However, in generic playback the timer updates usually too, so that part I'm not sure about.

[phloxic]

See also: https://flowplayer.org/forum/#!/setup:dvr-timeline

[popler]

Thank you, I will test new flowplayer-hlsjs. I think that one issue is still to resolve. User still have possibility to jump early than server side record (if it is set to limited time) or chunks in local browser cache.

[nnarhinen]

Example setup please. This all depends on the DVR streams etc..

[phloxic]

http://demos.flowplayer.org/basics/dvr.html (hlsjs can be turned on and off) - let it play for a while, then seek to 0 by hitting 0 on the keyboard. Happens with all streams I've seen so far, sometimes you just have to wait longer.

[phloxic]

Other stream (needs longer wait): http://flowplayer.blacktrash.org/fp7/dvr.html (with hlsjs) http://flowplayer.blacktrash.org/fp7/dvr.html?hlsjs=false (with flash hls) Compare with native playback in desktop Safari (iOS currently has #1104 with DVR)

[phloxic]

@nnarhinen - with a non incrementing DVR window you would have also a non incrementing time display on the left during playback like here: http://flowplayer.blacktrash.org/fp7/dash-live.html With an event DVR stream, it would be incremental, somewhat like here: http://demos.flowplayer.org/api/dash.html#dashdvr

[nnarhinen]

I'm very much confused about this issue. Can you give me simple reproduce steps.. (1. Load page X, 2. Hit something, 3. See what happens/should've happened..)

[popler]

When you have time limited DVR on server, and playing live time on the should not be bigger than server DVR record time. So if you set DVR limit on server to 10 minutes, stream on server starts more than 10 minutes ago, left time display should pause on 10 minutes during live playing. If it is bigger user can jump with controls before server DVR file.

[phloxic]

As far as I can see this is now only a problem with the hlsjs plugin. One of the problems is that videoTag.seekable.start(null) is always 0 with hlsjs. Here's a demo which gives kind of the desired functionality: https://flowplayer.blacktrash.org/fp7/dvr.html - but the time display and scrubber are of course all wonky.

[phloxic]

My implementation is more like the one for DASH: http://demos.flowplayer.org/api/dash.html#dvr See also: https://github.com/dailymotion/hls.js/issues/65 Current state can be inspected at https://flowplayer.blacktrash.org/fp7/dvr.html or now http://demos.flowplayer.org/basics/dvr.html

[phloxic]

@popler - this should work now with hlsjs, and also in the same way as with native or Flash hls. Please test by loading //releases.flowplayer.org/hlsjs/flowplayer.hlsjs.min.js as recommended.

[popler]

@blacktrash - I'm not sure it is working as it should. You can check live stream at http://www.popler.tv/embed/player7.php?user=poplerhd. I limitted DVR time on server to 10 minutes. The time on left starts from 10 minutes and going on, so after some time of watching you can rewind more than ten minutes. I can see only one different - when you jump back to live from DVR playing time on the left starts from 10 min again.

[phloxic]

Hm, with your example, I can see a problem with native HLS after while, when seeking to the beginning: the progress bar jumps forward to a later position, and large portions are unreachable - @nnarhinen? @popler, right now I'm fixated on hls.js, and you can verify here that it definitely does not try to go back before the beginning of the dvr window: https://flowplayer.blacktrash.org/fp7/dvr.html (seek to begining after a while).

I have to admit that I find the current time handling confusing, a "fixed" DVR window would be easier to grasp for me personally; but I try to emulate the core behaviour which updates the window somewhat magically.

[phloxic]

For comparison, the dash engine via dash.js currently creates a "fixed" DVR window (when it's sliding, not incremental), best seen here: https://flowplayer.blacktrash.org/fp7/dash-live.html - all time display is completely static, unless one seeks. I don't know what is expected.

[popler]

@blacktrash I'm expecting the same with HLS as dash.js. Static time display when it is go to max time of DVR window. I was testing your example, but I had some problem with progress bar. I was watching more than 30 minutes (display on the left), Next I clicked on left end of progress bar, time on the left show someting about 20 min, but progress bar was all white and could not go beck to live.

[phloxic]

@popler - that problem should be fixed, you may have to reload (if you're talking about the hlsjs engine). As far as I understand core and Flash hls increment current time always, unless one seeks to a position before the beginning of the dvr window. The advantage of the approach is certainly that the controls are less boring to watch ;-)

@nnarhinen - I have no idea what the general consensus/expecation is regarding a DVR UI.

Clearly some, including @popler, expect a "static" window (for non-incremental DVR), and it's the dash.js approach, see my demo above or http://vm2.dashif.org/livesim/testpic_2s/Manifest.mpd in their player at http://dashif.org/reference/players/javascript/v2.4.0/samples/dash-if-reference-player/

[phloxic]

@popler - indeed I could reproduce the progress bar problem, kinda the reverse of what I observed in native playback.

We first should decide what approach should be implemented ;-)

[popler]

@blacktrash - my opinion you know:) Do you have any ETA for 7.0.1?

[popler]

@blacktrash - I can confirm that it does not try to go before of the dvr window, but ... when I rewind to start of the dvr window I can't go back to live because of progress bar error.

[phloxic]

@popler - fingers crossed I've finally groked the "dynamic" window, as in core; I had a "static" dvr window conceptual leftover in there. Please try again.

@nnarhinen - if we want to offer an optional "static" dvr window, it could probably be implemented with relative ease by subtracting seekable.start(null) from seekable.end(null) to obtain duration and end property of the dvrwindow event.

[phloxic]

@nnarhinen - I'm starting to like the "dynamic" window, but Flash hls behaves somewhat differently: if the start is out of bounds, seeking backwards resets the time counter so to speak, it basically starts at 0 again. Pretty clear when you have played longer than the window (a bit over 9m in our demo), and seek back to 0. Time should be 9m+, but it isn't. - http://demos.flowplayer.org/basics/dvr.html?hlsjs=false If you let it play for a very long time, seeking is not possible anymore because the buffer is "longer" than the progress bar.

[popler]

@blacktrash - maybe I'm doing something wrong, but I can not see "static" window with my player on http://www.popler.tv/embed/player7.php?user=poplerhd or on yours website https://flowplayer.blacktrash.org/fp7/dvr.html. I mean the left time display is going on, but I can click on progress bar and video is rewind to start of the dvr window. Going back to live by clicking on progress bar is also working.

[phloxic]

@popler - I wanted to implement the "dynamic" one first, which is the proposal by core. Sorry for the misunderstanding, but thanks for confirming. It doesn't work with Flash HLS yet, though.

[phloxic]

With the 7.0.0 implementation one can even click on "Live" and see the remaining time of the "static" DVR window. - Which is why I'm not sure whether using a click on "Live" to go to the Live position - https://github.com/flowplayer/flowplayer/commit/0e824482002fb0c0c407e983d8414e144f293d02 - is a better idea or more informative, as in: http://demos.1111f.flowplayer.me/basics/dvr.html After all one can do this by just scrubbing to the end of controls (provided the implementation works, as it does now for 7.0.0 with native hls and hlsjs) - @nnarhinen?

[popler]

@blacktrash going back to live by clicking is much easier and intuitive than using scrubber. People are used to doing it this way by a some video portals.

[phloxic]

My proposal is to do both:

{current time} / { (toggle) duration or remaining (of dvr window) } "Live"

i.e. Make "Live" a separate button serving as live indicator and jump to live position on click. The length of this conversation is the perfect argument to do so. At least I would have found out much quicker about:

• the advantages of the "dynamic" dvr window approach
• the fact that the "dynamic" approach worked only with native hls so far (now it works with native and hlsjs; todo: Flash HLS)

That way users would grasp it quicker as well.

It would look and work like VOD time display, only

• with the additional Live indicator/jump widget
• the time indicator will be larger than the "duration" (of the DVR window) once the playlist is refreshed

This would also take care automatically of EVENT type incremental only playlists. - For those it can be investigated if and whether we can detect when the increments halts and the "Live" widget be removed.

[popler]

@blacktrash - additional Live indicator is good idea, but option to hide right time indicator will be useful in such situation.

[phloxic]

Really easy to do with CSS in Flowplayer 7 (no extra adjustments needed):

.flowplayer .fp-duration {
  display: none;
}

[nnarhinen]

Remaining DVR window time is most likely something end users are not interested in. They can see from the timeline they are not in the end of the live position.

[nnarhinen]

I will make them separate buttons if much asked for (by implementors)

[phloxic]

ok - arguably most users are, ermh, used to a "static" DVR window, e.g. https://support.jwplayer.com/customer/portal/articles/1430265-dvr-live-streaming - so I thought it would clarify our approach.

[nnarhinen]

Please explain "static" vs "dynamic". In the jwplayer example you linked the scrubber jumps back a few pixels every now and then - is the DVR window then static or dynamic?

[popler]

@nnarhinen this is static DVR window on @blacktrash example. The time on the left side is static as you can see, so DVR windows is limit to almost 10 minutes on server. There is one more useful option on this example - bubble with time above scrubber.

[phloxic]

"static" refers to display (hence the quotes), and with dash you can actually get a completely static display: https://flowplayer.blacktrash.org/fp7/dash-live.html - with HLS this is not possibly in an entirely clean fashion because there's no actual standard for it, so the DVR window duration changes slightly at each playlist refresh; its duration oscillates inside an interval of one segment duration. "static" display here is meant to say that the displayed current time does not increment - unless you seek forward inside the DVR window.

[phloxic]

What I call "dynamic" is when the time counter increments with "viewing time per session" so to speak. It increments while viewing as opposed to static, where it never changes its value (or only within HLS segment duration), only when seeking to a different position inside the DVR window (the dash example above).

[popler]

@blacktrash - I would like to make FP with DVR looking like livestream player (https://livestream.com/watch). I mean scrubber with rewind bubble, LIVE/DVR icon on the top and LIVE button. In your opinion, is it possible after 7.0.1 will be ready?

[nnarhinen]

@blacktrash I need more debuggin information.

1. Open http://demos.1127f.flowplayer.me/basics/dvr.html?hlsjs=false
2. Open javascript console
3. localStorage.flowplayerDebug = true;
4. refresh page
5. Do your magic to make the player misbehave after seek
6. Look for the "seek requested" log entries and paste here

[phloxic]

Forgot to refresh page, but this already shows how the duration increases:

INFO:HLSNetStream:close
(unknown) INFO:HLSNetStream:seek(0)
(unknown) INFO:HLSNetStream:play(-1)
(unknown) INFO:HLSNetStream:seek(-1)
(unknown) INFO:HLSNetStream:pause
localStorage.flowplayerDebug = true;
true
VM285:1 INFO:HLSNetStream:resume
flowplayer(0).video.duration
641.2640000000005
flowplayer(0).video.duration
645.6680000000005
flowplayer(0).video.duration
1074.4860000000003
VM2002:1 INFO:HLSNetStream:seek(1040.338542416298)
VM2016:1 INFO:HLSNetStream:seek(911.0668558706399)
VM2026:1 INFO:HLSNetStream:seek(548.0185059937157)
VM2036:1 INFO:HLSNetStream:seek(1027.1421200744467)

Once the duration exceeds the one available on ready seeking doesn't work as expected. Just by doing nothing you can see how the live position (the rightmost point of the progress bar) moves to the left over time.

[phloxic]

just making sure I'm using not any cached swf ...

[phloxic]

Seems to work better, but seeking to 0 may still fail, sometimes works on 2nd attempt; the first and last seeks in the log excerpt went wrong:

-- debug: seek(680.411999999999) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (680, 680, 596)
VM22961:1 INFO:HLSNetStream:seek(680.411999999999)
flowplayer.min.js:6 -- seek 680.411999999999
flowplayer.min.js:6 -- debug: seek(697.4809999999993) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (697, 697, 596)
VM23020:1 INFO:HLSNetStream:seek(697.4809999999993)
flowplayer.min.js:6 -- seek 697.4809999999993
flowplayer.min.js:6 -- debug: seek(1281.864642198163) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (1281, 697, 596)
VM23038:1 INFO:HLSNetStream:seek(1281.864642198163)
flowplayer.min.js:6 -- seek 1281.864642198163
flowplayer.min.js:6 -- debug: seek(1291.6706858852488) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (1291, 702, 596)
VM23058:1 INFO:HLSNetStream:seek(1291.6706858852488)
flowplayer.min.js:6 -- seek 1291.6706858852488
flowplayer.min.js:6 -- debug: seek(710.732898837278) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (710, 706, 596)
VM23079:1 INFO:HLSNetStream:seek(710.732898837278)
flowplayer.min.js:6 -- seek 710.732898837278

[phloxic]

But overall it looks improved. Display-wise the progress peak slowly wanders to the left, but functionality-wise it usually works at least at the 2nd attempt.

[phloxic]

Display-wise also the current time resets itself to the live-window duration after a final successful seek attempt. Here is some more logging:

INFO:HLSNetStream:seek(710.732898837278)
flowplayer.min.js:6 -- seek 710.732898837278
flowplayer.min.js:6 -- debug: seek(819.9999999999976) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (819, 819, 596)
VM23501:1 INFO:HLSNetStream:seek(819.9999999999976)
flowplayer.min.js:6 -- seek 819.9999999999976
flowplayer.min.js:6 -- debug: seek(1413.8534721327205) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (1413, 820, 596)
VM23515:1 INFO:HLSNetStream:seek(1413.8534721327205)
flowplayer.min.js:6 -- seek 1413.8534721327205
flowplayer.min.js:6 -- debug: seek(827.518593848183) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (827, 824, 596)
VM23831:1 INFO:HLSNetStream:seek(827.518593848183)
flowplayer.min.js:6 -- seek 827.518593848183
flowplayer.min.js:6 -- debug: seek(910.2460513318227) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (910, 905, 596)
VM23841:1 INFO:HLSNetStream:seek(910.2460513318227)
flowplayer.min.js:6 -- seek 910.2460513318227
flowplayer.min.js:6 -- debug: seek(4.44089883727912) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (4, 0, 596)
VM23851:1 INFO:HLSNetStream:seek(4.44089883727912)
flowplayer.min.js:6 -- seek 4.44089883727912
flowplayer.min.js:6 -- debug: seek(602.8582521763504) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (602, 15, 596)
VM23890:1 INFO:HLSNetStream:seek(602.8582521763504)
flowplayer.min.js:6 -- seek 602.8582521763504
flowplayer.min.js:6 -- debug: seek(4.0267463427325225) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (4, 0, 596)
VM23904:1 INFO:HLSNetStream:seek(4.0267463427325225)
flowplayer.min.js:6 -- seek 4.0267463427325225
flowplayer.min.js:6 -- debug: seek(620.2426204246644) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (620, 26, 596)
VM24003:1 INFO:HLSNetStream:seek(620.2426204246644)
flowplayer.min.js:6 -- seek 620.2426204246644

[phloxic]

This is a 2-attempt log, first jumps forward, 2nd succeeds:

-- debug: seek(155.25744135363988) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (155, 153, 596)
VM25696:1 INFO:HLSNetStream:seek(155.25744135363988)
flowplayer.min.js:6 -- seek 155.25744135363988
flowplayer.min.js:6 -- debug: seek(16.74374634273248) undefined
flowplayer.min.js:6 -- debug: seek requested (seconds, seekOffset, duration) - (16, 13, 596)
VM25726:1 INFO:HLSNetStream:seek(16.74374634273248)
flowplayer.min.js:6 -- seek 16.74374634273248

[phloxic]

@nnarhinen - you can observe this yourself when the current time doesn't increment properly, it should never go to 0 after a seek to 0 becuase of the "dynamic/incremental" window implementaion, but it does.

[phloxic]

i.e., with our implementation the displayed seek offset should always increment over time, never go back to zero (with this stream which features a sliding window, would be different with an incremental-only EVENT playlist). - Maybe that is not possible with Flash, but that is the behavior you implemented for native and I for hlsjs.

[phloxic]

This is what you see when you just let the stream run for a while at live position:

The progress peak has moved to the left. This does not happen in native or with hlsjs, where the progress bar stays more or less full (minus required live-sync pre-buffering).

[phloxic]

The displayed DVR window is increasing, "Live" is not highlighted anymore, the player looks like it has strayed away from the live postion. But of course the actual window is not increasing, and the player has not strayed away.

[phloxic]

And when you seek in the above state, the current time display is reset, and:

• to beginning: fails at first attempt, works usually at 2n
• to Live: works - but current time is decremented (reset)

[phloxic]

With native or hlsjs flowplayer().video.buffer stays at the same value, with Flash HLS it increments.