Search code examples
videovideo.jsvideo-playervideo-thumbnails

How to make thumb pictures in js video player like in youtube?

I found no one library in npm which is provides us video-seek-slider with thumb picture view. Accordingly I don't understand, what should I do to make it:

  1. How to make thumbs pictures available on frontend side?
  2. where to find any npm client side progress which is already implements showing of a thumb onMouseOver event?

enter image description here

Could any one to support me to solve this issue?

Solution

  • I struggled with this exact issue, about a year ago. Based on the thread here: How to generate video preview thumbnails for use in VideoJS? I finally concluded to go with offline generation of thumbnails, as it's much easier than trying to extract them on-the-fly.

    I did a technical discussion/explanation of that struggle here: http://weasel.firmfriends.us/GeeksHomePages/subj-video-and-audio.html#implementing-video-thumbnails

    My prototype example is here: https://weasel.firmfriends.us/Private3-BB/

    Also, I couldn't solve how to bind to the existing seek-bar in video-js, so I added my own dedicated slider to view the thumbnails. That decision was mostly based on the need to use 'hover'/'onMouseOver' if one wants to use video-js's seekbar, and those gestures don't translate well to touch-screens (mobile devices).

    Cheers. Hope this helps.

    EDIT: I've upgraded my earlier implementation (where I had added my own dedicated slider because I didn't understand how to get the behaviors from VideoJS's built-in seekbar.)

    I now have it working, using the builtin seekbar.
    The prototype implementation is (still) here: https://weasel.firmfriends.us/Private3-BB/