Video image placeholder

[gerrykeys]

Hello,

i know the property "poster" used to set an image placeholder for the video.

In case i don't have an image, i would like it to be calculated automatically.

In the html standard, this can be done in this way:

<video src="myvideo.mp4#t=10>

Is it possible with your library?

[igordanchenko]

Just FYI, the #t=10 parameter actually adjusts video start time, so it doesn't do exactly what you expect it to.

But to answer your question, you can definitely append such parameters to the video source url.

[gerrykeys]

Yes i know the behaviour of #t=10 and i just tried it,
but when i show Lightbox, the video thumbnail below (inside the thumbnails section area) is black

[igordanchenko]

This is expected behavior. The Thumbnails plugin requires an image to display it as a thumbnail. For video slides it expects an image in the poster prop.

[gerrykeys]

Ok, thanks for the explanation

[igordanchenko]

@gerrykeys, I believe you can generate video posters at the application level.

https://codesandbox.io/p/sandbox/yet-another-react-lightbox-135-p8vlvq?file=%2Fsrc%2FApp.tsx

Please let me know if this approach works for you.

[gerrykeys]

Cool! Thanks for the example! It works!
It would be possible to implement this solution inside the library and just exposing a property for the slide like below?

slides:[
 {
    type: "video",
    generatePoster: true,
    ......  
 }
]

[igordanchenko]

A proper implementation of this feature inside the library would be pretty clunky. My recommendation here is to generate video thumbnails on the server side, and do it just one time per video file (that would be the most efficient solution). A less optimal solution but with straightforward implementation is to use the workaround I posted above.