I too have a concern about the 508 compliance of the auto-pause screen that adobe has implemented. To circumvent this I opened the original HTML > index.html file in the Adobe Captivate 2019 folder. Do a search for, or scroll and locate — function CPINIT()

navigate to just before the final closing bracket } and add the following command:

cp.movie.play();

Here is a screenshot of the code. 

This will autoplay the movie and start the first slide of your Captivate movie. It’s a simple javascript command to start playing the captivate file. I have tested this on Apple devices, the chrome browser, and it works just fine.

Sorry to be a dunce, but I am still missing how I can disable Autoplay upon start in Captivate 2019. I have looked elsewhere, but I am new to Adobe, so maybe I am missing something.

To get to preferences, I have to go to Edit>Preferences (or shift+ F8) …but nothing under there about autoplay.

I have been searching non-stop for a way to disable this. Great article!

This is a great way to create a nice ‘start’ page but I too will need a 508 compliant one. Has anyone found a solution for anastasiam55465973

Help, does anyone know how to make the opacity of the image 100% in Captivate 2019 Published files? I can’t find the “cp.autoplayImage.style.opacity=0.7” in the CPM.js file that 2019 creates. What are they calling it now or where do you edit it?

This is a good solution.  From a 508 compliancy perspective I still am a bit worried, at the moment I am working on a project that requires 508.  So being, unlike many following this topic, I actually want the focus rectangle.

By default, the white screen with the play button will respond to the space bar being pressed as an alternative to clicking. There is no indication to the user that the space bar is what they should press, as opposed to the enter key or any other key.  Maybe someone who uses a assistive technology would know to try that anyway, but I don’t want to assume.

Putting a poster image that somewhere says something like ‘click or press the space bar to continue’ and modifying the play button to transparent is a step in the right direction… but the instruction is embedded in the image.  I do not know of any place to add alt or descriptive text to it to say ‘press the space bar’.  Hopefully Adobe thought of it already and it is included as a description for that play button when you Enable Accessibility in the preferences.  If anyone has any perspective on this, I’d love to hear about it.

Hi, great tutorial this was very helpful. I hope I can ask a few questions:

I created a 1024×768 (project size) loading screen which has a “button” on the image just for display purposes, created a transparent .png of the same size to replace Play_icon.png – this is the size of the screen meant so that the user can click anywhere to start, and when i resize the button in the css file, the loading screen gets bumped up. Also when i re-zip the contents after editing the code, my LMS isn’t allowing it saying it’s missing  imsmanifest.xml. Any help?

Hello if it can help people and to complete the Lieve’s post, I had made a video and a blog page about this problematic. It is better to see the video first.

Video: https://elearning.adobe.com/preview/15711/

Blog page: https://elearning.adobe.com/preview/17121/

Around the 12th minute in the video you can see a solution about the way we can remove the rectangle surrounding the play icon or the poster image inserted.

I have perfected this poster image, play button, remove the dimmer, remove the box…for Chrome.  However, IE will not display the poster image!  I don’t write javascript, help!  Is there a workaround like with the css file that does not involve getting into javascript? I need a solution for both audiences, Chrome and IE!

I keep trying to add a comment with my setup but for some reason it doesn’t seem to be going through.

I think I have a solution that is a bit better in regards to implementation in order to keep you from having to edit files all the time. 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 mine 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 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 file to ensure that it too is included in your project publishes.  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
});

Where do you find the image files???

I have bookmarked this review. It is nice to have best practice work-around when it comes to sound. Thank you for sharing.