Change play.html to show image instead of "Stream will start" text

[Philip Campbell]

Is it possible to change LiveApp play.html to show a logo I've created instead of the text "Stream will start automatically when it is live"?  I have the image in JPG and PNG formats saved in the images folder.  When I've tried replacing text with the HTML <img src="images/logo.png"> command it just shows a box with an x for a moment then is over written by the JavaScript innerHTML code  with the text again.  When I've  the JavaScript I still only get the box as if it cannot find the image.  Is there another way to do this?  I'm not great at HTML and no little to nothing about JavaScript.

Thanks for any help

Philip Campbell 

[Mahmut As1m Onat]

Hi Philip,

You have to delete to cut the connection of the div that is enclosing that text for after hearing that the stream has not started the javascript adds it to that div. Deleting or changing div solves it but rather than that, I encourage you to modify js. All you have to do is modify this line

document.getElementById("video_info").innerHTML="Stream will start playing automatically<br/>when it is live";

To something like this:

document.getElementById("video_info").innerHTML="<img src=\"https://antmedia.io/wp-content/uploads/2020/01/Ant-Media__web-1.png\" alt=\"Ant Media\">";

to include your picture instead. You can check document methods of javascript, modifying an HTML div is not a hard task but feel free to ask for help. By the way, do not forget to escape the quotes in src

Best,
Asim

[Philip Campbell]

Asim,

That seems to partially work.  I've referenced the image, but since the image was designed to use the entire space used by the play.html when it is imbedded into my site it offsets the image.  I tired modifying the player.css file to remove the centering and spacing, but that did not help.  Any way I can get it to not offset the image?

Thanks

Philip  

[Philip Campbell]

Ok, I think I figured it out.  I had to remove the following from player.css under #video_info:

position:relative;

top:30%;

height:100%

After clearing my cache it seems to work and fill the entire box now.  I also changed the body background color to match my site/image background as well.

Thanks for all of your help.

Philip