How to display a thumbnail instead of the play icon for play.html when not using auto play?

[Mohit-3196]

I'm using the Ant Media Sever play.html and have disabled auto-play for our application.

When I open the play URL
https://server-url:5443/WebRTCAppEE/play.html?id=streamId_stcjQzEgR&playOrder=webrtc&autoplay=false
https://server-url:5443/WebRTCAppEE/play.html?id=streams/090722741856287865873045.mp4&playOrder=vod&autoplay=false

The player has a play icon in the middle of the screen

How can I show a thumbnail or preview instead of the icon?

Thank you.

[lastpeony]

The embedded player in Ant Media Server relies on videojs as its foundation. Within videojs, there exists a poster property, allowing for the display of an image prior to playback initiation. You can refer to this feature in the documentation provided here: https://docs.videojs.com/docs/guides/options.html.

Currently, the embedded player is configured to retrieve the poster from the "previews" folder located within your local website, using the name of the stream. For instance, within the directory where your embedded player resides on your website, you would place a PNG image named after your stream, such as "teststream.png". The embedded player will then automatically showcase this image as a preview. You can find the relevant implementation in the source code here:
https://github.com/ant-media/Web-Player/blob/main/src/web_player.js#L564

The web player is entirely open source. While it presently displays previews only when Adaptive Bitrate (ABR) is enabled and the images are located in the previews folder, you have the flexibility to assign any image to it by modifying the poster attribute.

For guidance on generating previews with Ant Media Server, please consult the documentation available at: https://antmedia.io/docs/guides/adaptive-bitrate/generating-thumbnails/