Thumbnail not appear on Control Bar

[Dimitargabres]

Hi team

I can't sure that this is issue or not, but i need help, so that raise this ticket.

Currently i am using videojs on react and i want to use sprite-thumbnail. What i have done is

const player = (playerRef.current = videojs(
  videoElement,
  options,
  () => {
    player.spriteThumbnails({
      interval: 2,
      url: `/assets/preview_01.jpg`,
      width: 160,
      height: 90,
    })
  },
))

But on timeline, thumbnail is not showing, just time is displayed.

When i check player on console, player.spriteThumbnails is a function not object.

Did i something wrong?

Kindly update me.

Regard.

[phloxic]

Indeed player.spriteThumbnails is used when the player is already set up, as in most of the examples in the README.

However, you can configure the plugin directly

• as a property of the plugins object on the player level or
• as a property of the media sources

The playlist example shows both of the above.

In your case:

const player = (playerRef.current = videojs(videoElement, {
  // various config options
  plugins: { // configure plugins
    spriteThumbnails: {
      interval: 2,
      url: '/assets/preview_01.jpg',
      width: 160,
      height: 90
    }
  }
));

I will try to clarify this a bit more in the docs when I find time.

[Dimitargabres]

Hello

Thanks for your post.

Actually, i tried it as well, but it is also not working.

[phloxic]

@Dimitargabres - works for me[tm]

[Dimitargabres]

Hello Thank you.

But even from the link, i can't see thumb

[phloxic]

In which browser and on what platform is this happening?

[Dimitargabres]

I test with google chrome, Microsoft Edge

[phloxic]

I don't have a windows machine to test right now, sorry. Definitely works in Chrome, Firefox, Safari etc. for me.

Do you get any errors? Is the thumbnail file loaded?

[Dimitargabres]

What i can see from console log is only this.

Can you show me screenshot of how thumbnail shows on your side please?

[Dimitargabres]

PS: Also for me, i am seeing VIDEOJS: player: spritehumbnails: WARN: connection.downlink < 2

Is that one can be reason?

[phloxic]

Yes, your connection seems rather slow, see the downlink option.

Set it to 0, at least for testing.

[phloxic]

[Dimitargabres]

Wow, working, when i set downlink: 0

Thank you very much.

I love this package!!!

[cedricve]

Works

  downlink: 0,