Added support for multiple image chunks & grid configurations

[mbehm]

Quick modification to support multiple image chunks and different grid configurations.

[phloxic]

Hi @mbehm - thanks for your contribution. I don't have time to look at this right now, but it breaks existing behavior. You can verify this locally at http://0.0.0.0:9999/ after running npm run start, even after setting interval explicitly here: https://github.com/blacktrash/videojs-sprite-thumbnails/blob/master/index.html#L26 Also in the current form of that page imho the plugin should not be initialized because of insufficient configuration. The resolution option is not documented. Do you have a sample page with your use case? - I don't really understand it ;-) Plus, as per https://github.com/blacktrash/videojs-sprite-thumbnails#features I'd like to keep configuration really simple.

[mbehm]

Yea this was a really quick modification I made to test multiple chunks so still needs some work, I thought I checked the default use case but apparently not, I'll get it fixed ASAP.

The grid and resolution options were just another way to provide tile width and height and chunk rows and columns as [x,y] arrays but yea they're maybe a bit confusing so I'll remove them.

Generating enough good quality tiles for a long video results in quite a large image file to be loaded, I'd like to chunk it up to reduce the amount of data loaded (since the user isn't likely to view the whole timeline). The reason for having configurable rows and columns instead of width and height is that you don't have to change the parameters if you're always using a predefined grid, no matter what the actual tile sizes are due to aspect ratio etc..

I'm also planning to add detail chunks so you can have poor quality chunks for fast overview and then more detailed chunks when the user "pauses" over a certain position so that'll need a support for multiple chunks too.

[alexanderstephan]

Hi @phloxic Any updates on this? I have a very similar use case for very long videos and this would help me a lot.

[phloxic]

@alexanderstephan - I still do not really understand the use case, or rather, only in theory. Which is why I asked @mbehm for real world example.

Therefore my very short answer at the moment would be: Put all efforts into optimizing the sprite image for fast download.

Longer answer:

In the vast majority of cases the problem arises in low bandwidth scenarios (combined with a long video duration). Hence the wish for lazy download of smaller images.

In my view splitting the sprite image in several tiles or chunks makes only sense when you know beforehand in which part of the video/which chunk the user will seek, and there would still be a delay, if a different (the first?) chunk is already loading.

The opposite approach to sprite single image would be single small thumbnail images which are loaded on seek/demand, which, in low bandwidth scenarios, leads to images only being ready/visible when the position is seeked another time. On the other hand, preloading the images re-introduces more or less the scenario with a sprite image, just with a lot more requests.

The deeper problem is that while the image (or images) are not ready, fetching them will always compete with video playback. I argue that the scenario where seeking with thumbnail previews has priority over video playback quality is a corner case. Therefore I lean towards an approach where thumbnail display in low bandwidth situations is turned off. This feature is by now available and configurable via the downlink option in browsers which support NetworkInformation.

[phloxic]

The other duration/image size related tweak is obviously intervall: The longer the video the less fine-grained is the controlbar, so short intervals become overkill.

Of course fullscreen on a large monitor yields a very long controlbar, but then connection speed has even higher priority to obtain at least a decent video viewing experience.

[phpb-com]

One use case is playing videos encoded by the Bunny CDN Stream service. I am sure there are other services that do that.

[phloxic]

@mbehm - without a real world example this doesn't answer my questions.

From a quick glance at Bunny CDN's docs there is one thumbnail URL: https://docs.bunny.net/docs/stream-video-storage-structure#thumbnail-url – how it resolves (chunks?) I can't tell.

Obviously one could use their image optimizer and then configure the thumbnail URL with query parameters depending on the current scenario (note that the plugin does not load/show thumbnails anyway when the mouse time display tooltip is not present.

[phpb-com]

One example is video on their blog (e.g., https://vz-63dcc9a5-af6.b-cdn.net/eb1c4f77-0cda-46be-b47d-1118ad7c2ffe/seek/_0.jpg ) which is from https://bunny.net/blog/introducing-bunny-stream-better-way-to-deliver-video/ . When you have a longer video (10-20 min) it will split it into multiple files like /seek/_0.jpg, /seek/_1.jpg, /seek/_2.jpg, etc. Their vended player uses it (I think it is plyr.io under the hood).

[phloxic]

Hardly a convincing example, especially when you watch the player appear with a throttled, e.g., to Regular 3G, connection ;-) Also, as you say it's too short, and the issue was opened with long videos in mind. From my experience with single image thumbnails chunking up just defers the problem, depending on which position you search, you just see the empty empty thumbnail canvas. That even happens on that page.

I still think the only way to optimize this for real is to optimize the image size as much as possible via image optimizers, size, resolution, interval tweaks.

As any thumbnail plugin will have certain restrictions regarding the (sprite) image(s), this one expects 1 splash image. It also expects the width x height to be optimal, contrary to https://vz-63dcc9a5-af6.b-cdn.net/eb1c4f77-0cda-46be-b47d-1118ad7c2ffe/seek/_0.jpg in the example.

Closing for now.