Remove The Play button & White Screen that shows on mobile Adobe Captivate 2017

Is there a certain spot where you've added

cp.movie.play();

into the index.html file?

I've tried in a couple of places, but the white screen with the play button is still appearing.

Thanks.

One way to remove it is add:

cp.movie.play()

to your index.html in the <script> portion.  I use it all the time to remove play button from iPAD mobile.

Edited - The post was awaiting approval on the blog. I figured as much there just wasn't any indication that was actually happening.

I tried to post this comment on the blog post that Lilybiri mentioned but for some reason, it didn't appear to be going through. No indication of a review period or anything.

Anyways, I think I have a solution that is a bit better in regards to implementation in order to keep you from having to edit the CPLibraryAll.css and CPM.js files every time they are generated during a publish. To start with I'll mention that I opted for having the Play button completely transparent as mentioned in the main post.  But I also made my Play button the same size as the Poster image I created.  Regardless, the implementation is the same no matter what appearance you go for.

First, create a custom CSS file that contains any custom settings you want to make to the size/position etc. of the Play button. Make sure to tag every setting you want to override with !important to ensure your settings are chosen above all others that may exist or be inherited from. Then place the file in C:\Program Files\Adobe\Adobe Captivate 2017 x64\HTML\assets\css to ensure it is included every time you publish your project. I'll post a copy of my CSS if anyone wants to see it.

*:focus{outline:0;}.autoPlayButton{width:1024px !important;height:768px !important;left:0 !important;top:0 !important;}

Next, edit the index.html file located 2 levels up in the HTML folder and add a <link> to your custom CSS near the top of the document just before the first <style> element with the text/css information. Again, this ensures that this modification is included every time you publish a project. (Be sure to make a backup copy of your index.html file if you haven't already in case you need to revert changes and forget what you did down the road.)

Finally, create a custom javascript file and insert the following code in the file.  Place the file in the assets\js folder that is up 1 level from the CSS folder and then add a <script> reference to the index.html file that was just edited to ensure that it too is included in your project publishes. The reference can go pretty much anywhere in the Head section, I put mine just before the closing tag.  Alternatively, you could opt to add some javascript directly to the index.html file that was edited earlier. However, with this method, you can expand upon any custom CSS that you want to create and maintain externally.

window.addEventListener("moduleReadyEvent", function (evt) {
 cp.autoplayImage.style.opacity = 1; //set poster image to 100% opacity
 }); 

With this configuration, it's a no-brainer. You just publish and move on.

Edited - It is also easily modified if you need to make adjustments for another project. The biggest benefit to this setup is that you only have to set it up once rather than after every project publish.

Hi Lilybiri ... do you have mor infos about 2disallowing autoplay by browsers"? what is it all about? What will happen if browser does not allow autoplay? Which browser does not allow it?

Currently all browsers playback our content that was created with captivate versions that did not have the "play" button at start. And all content works well.

So could you be more specific about autoplay, please - or where do we get further information and solutions? (to us, and to all of our customers the play button is/will not be acceptable).

Many thanks in advance.

Alex

Hi There,

This relates to the original post and the link to Poster Image - AutoPlay - Captivate blog

If anyone can help at all I'd be extremely grateful.  I'm trying to do the same and am having 2 problems:

1. I can't resize the poster image to fit the whole player screen.  As you can see from my screenshot it is a lot smaller.  Are there specific dimensions I should use do you know?  The one I have created is basically a cropped screenshot of a slide I have created in Captivate.

2. I have followed the instructions (to the absolute letter!) on how to switch the default play icon to a transparent icon (then add the poster image on top).  I cannot get rid of the nasty blue outline (please see screenshot) however hard I try.  Can anyone please help to identify what I am doing wrong?  I've been trying to fix this all day!

I can live with the 70% opacity issue for now.  That's not as pressing as the terrible blue box!

Many thanks, Heather

Maybe a simulated click can be used:

document.getElementById('thePlayBtn').click();

Can you hide it with the method provided in this thread?

A brute-force fix would be to replace the Play_icon.png file with an empty, transparent png file. Locate the Play_icon.PNG file within the respective Captivate folder, copy and paste to create a backup (to be safe), then open the Play_icon in a graphics program, delete the image, and save as a transparent .png. Every time you publish, it will use the transparent png and, hence, not display the Play button.

If it's sitting there expecting the user to click or tap something, then that may not be viable.

Really? Seems very odd. Did you check to see if it's the Start and End in the Preferences that have been set by default?

Looks like the Captivate April 2018 update has forced this play button at the start of all courses now, both desktop and mobile. Has anyone found out how to get rid of this permanently yet?

I think i might be rolling back my version of Captivate.

I have a question ... I've created a faux landing slide image (and hidden the original slide), and set this to appear at the start of the module.

However, when played (and I've only tested using the HTML5 in Browser preview option) the image is dulled like it hasn't loaded fully.

For comparison, the colours should look like this:

Any thoughts on what's causing this and/or whether there's a way to show the image properly?