Display poster image on Embedded player (Play.html) instead of text message "Stream will start playing automatically when it is live"

[yashtandon113]

How can we have the embedded player display a poster image instead of a text slate when the stream is not playing?

[Mohit-3196]

You can add an image or logo to ant media server embedded web player (play.html) as

Here are the steps:

1. Add logo.png file to the images directory.

images directory is under usr/local/antmedia/webapps/WebRTCAppEE/images

2. Edit play.html file as suggested in the PR

The text message "Stream will start playing automatically when it is live" can be edited or removed completely by editing play.html page as well.

Thank you

[yashtandon113]

In v2.5.3 and earlier, you had to modify the text or put the logo on three separate portions of the code, as recommended in the PR on the above response, depending on the playOrder type. Now, in v2.6.0 and higher, you may quickly alter the text or insert a logo by making a little update to the play.html file.

1. To change the text "Your live stream will play automatically as soon as it's available.
Get ready to be part of the action!"

Edit play.html under /usr/local/antmedia/webapps/App-Name/ folder and change the text as required.

2. To put the logo in place of text or along with text.

1. Open your terminal and navigate to the directory where Ant Media Server is installed:
   cd /usr/local/antmedia/{APP_NAME}
2. Use your favorite text editor to open the play.html file:
   sudo nano play.html
3. In the play.html file, search for the "logo" section in the text. It should look like this:
   

     <div>
       <img id="logo" src="images/logo.png" />
     </div>

4. Remove the commented-out parts (<!-- and -->)
   
5. This will display a logo on the player side

To change the default logo image:

6. Navigate to the directory where the logo image file is located:
   cd /usr/local/antmedia/{APP_NAME}/images/
7. In this directory, you will find a file called logo.png. Replace this file with your logo image and also change the name in html file if the name is other then logo.png