feat: Better UI for live playback via an option by brandonocasey · Pull Request #5511 · videojs/video.js

brandonocasey · 2018-10-17T21:10:11Z

Changes

All of the following is behind a new option called liveui that defaults to false:

LiveDisplay

Shown when vjs-live is set on the player but hidden when vjs-live and vjs-liveui are both on the player

SeekToLive

A new component that will show when vjs-live and vjs-liveui classes are on the player
Used to show when the player is at the live edge, and to indicate that the player is live
Can be clicked to seek to the live edge when behind.

LiveTracker

Handles tracking of the "live edge" and fires events when the live edge and currentTime are not in sync.
Handles tracking of seekable end changes so that we can keep up to date with what the live current time should be

Seek/Progress Bar

Show during live playback
Make all time tooltips show negative numbers indicating the time from live.
Seek within the live window
Keep updating all the time when live streaming, since if you pause you will fall behind the live stream.
Hide and show various components via live css

brandonocasey · 2018-10-17T21:18:38Z

This fixes an issue where it would not show up as live for the first few seconds.

brandonocasey · 2018-10-17T21:19:06Z

This makes it so that there are a few seconds before the "live" point as in a normal live stream

brandonocasey · 2018-10-17T21:20:33Z

we show this now

brandonocasey · 2018-10-17T21:21:03Z

I am not sure if we want to hide this or fix it, basically this can make it so that the progress bar goes past the player.

brandonocasey · 2018-10-17T21:21:23Z

We may not know if the player is live until it is ready.

mister-ben · 2018-10-18T17:35:19Z

The button width might have to be flexible to account for longer localised strings. Catalan 'EN DIRECTE' is the longest we currently have in the translations.

gkatsev · 2018-10-18T20:29:34Z

Is there a reason this isn't implemented as a middleware?
I think this should be enabled by default but with the ability to turn it off but there's still time to discuss.

misteroneill · 2018-10-19T15:42:02Z

@gkatsev We discussed that a bit in our grooming call, but @brandonocasey had some uncertainty. We can discuss further on Monday when you're back. 👍

brandonocasey · 2018-10-22T16:44:25Z

Internally we originally though that this could be implemented as middleware, but I found several issues with that in the initial implementation. Here are the issues

We would have to change currentTime internally to 0 at the live edge and negative seconds before that. This caused a bunch of issues across the board, since the UI did not know how to deal with currentTime not changing, or going negative. It would also be inconsistent with the video element API.
In order to keep the progress bar within the seekable range of the video element we would have to change the duration from Infinity. Which would hide that it was a livestream. furthermore we would have to update the duration every time seekable changed which for short segment live streams could be every 2s.
Even if we were to do the two things above, there would still be UI specific code for live streams, and it would probably be very similar to what we have now. For instance we would have to add support for negative time tool tips and the play progress would still have to update during pause when live streaming (so that the seek bar can decrease)

After talking about it we think that the issues do warrant this being a UI only change. As having live streams now have a finite duration and negative current times would be too far from what a video element does.

gkatsev · 2018-11-02T20:02:56Z

I haven't done in depth testing but a there's documentation missing.
Also, testing with a stream with a window of 5 segments of 10 seconds each, I'd have expected the progress bar to be let us seek back the full 20 seconds, at least after playing back a segment. Is this something we should talk with the playback team about?

brandonocasey · 2018-11-02T20:06:34Z

Yeah I think we would need to talk to them about that. We can only seek back as far as seekable start, as far as I know.

gkatsev · 2018-11-02T20:21:35Z

Looks like the stream I was testing with had a target duration much larger than the segment size which cut into the seekable.

misteroneill

One thought. @gkatsev thoughts on this?