Skip to main content
Gray Susan
Inspiring
April 15, 2020
Answered

Beginning play arrow in center of screen before the project starts. CP2019

  • April 15, 2020
  • 2 replies
  • 998 views

Since we upgraded to Windows 10 on our machines when we publish a project a play arrow appears in the beginning on the screen before the project starts.  You have to click on this to get the project to play.  We've learned to live with this.  However, we have a new client that doesn't like it.  They want the first slide of the presentation to show immediately.  Is there a way to keep this arrow slide from showing up?  We use CP2019 and publish in HTML5.

TIA

 

This topic has been closed for replies.
Correct answer Lilybiri

You can have a look at this post as well:

http://blog.lilybiri.com/archive?query=AutoPlay

I just replace the play icon by an empty image and put a shape on the poster image. You can see several examples on my blog. Here is a direct link to one of them:

 

SWF to HTML

2 replies

Stagprime2687219
Legend
April 15, 2020
sabre123
Participating Frequently
April 15, 2020

Is there a way to keep this arrow slide from showing up?

 

No. 

 

Some major browsers have changed their policies and no longer support autoplay of media content. This means that  users need to interact with content before it will play. CP has adopted this change and the functionality is included as part of the HTML and Javascript when you publish your files.

 

You can customize CP's icon and/or add a background image to make it look like your customer's content, if desired. But there should be some indication that they need to perform some action in order to play the content.

Gray Susan
Inspiring
April 15, 2020

How would I customize the background?

Thanks for the info.

sabre123
Participating Frequently
April 15, 2020

There are a few ways to go about it, depending on your technical capabilities. Here are a couple:

 

You can modify the index.html generated at publish. Look for (your width and height will most likely be different): 

<div id='project' class='cp-movie' style='width:960px ;height:690px '>
 
and change to the following that includes the background-image: url(...). I include the !important just to make sure it overrides any CP css:
<div id='project' class='cp-movie' style='width:960px; height:690px; background-image: url(../images/BackgroundImage.jpg) !important;'>
 
Will put the play icon right in the middle of the background. BackgroundImage.jpg must be uploaded to server in the path specified in the background-image url . 
 
Alternatively, you can modify/replace the Play_icon.png file with your custom image. As long as it's named the same and the file is overwritten in the assets/htmlimages folder, it should display in the center. I haven't tried this, but that is the file that loads for my projects when I publish.
 
Just keep in mind, these workflows mean you're touching CP files which are always subject to change...and it's one more thing you have to remember to do. See if it's worth the effort.