Poster Image - AutoPlay

For CP2019 users:  the last hack to get rid of the rectangle surrounding the play icon is no longer necessary. It is removed in this version.


This short blog post is meant to help solving an issue that pops up in the forums once in a while: "How to get rid of the white screen and Play button on mobile devices?". When publishing to HTML the AutoPlay is automatically disabled,  Reason is that some devices and OS (iOS) do not allow Autoplay. For SWF output you had the choice: it was possible to change the default setting which was to have a movie playing automatically after loading. I often disabled that option when embedding SWF's on my blog (look at older articles), especially when audio was involved because it is not very polite to have audio being pushed to the reader automatically. 

Consequence of the AutoPlay being disabled without your control as developer, is the appearance of a big white screen with a small play button right in the middle. The button looks like this (but originally one is smaller, 96x96), black arrow in black circle with transparent background:

Such a button will not always blend well in the design of your project.

Poster image

To get rid of the white screen, you need to create a "poster image"? That is a static image, preferably with the same resolution as your project. For a non-responsive project, published with Rescalable turned on, the poster image will fill up the screen. All embedded HTML movies in my blog were using this type. 

Mostly I duplicate a slide from the project to create such a poster image, Duplicate because it may need some editing, especially if you also want to have a better looking Play arrow. I will take a screenshot of that slide while it is playing to save as a PNG (or other image format) and then hide the slide to avoid it to be included in output. 

When the image is ready, set up the Preferences, Project, Start and End: turn off AutoPlay and indicate the poster image.

Play Arrow

My personal hack to have a play arrow that is fitting with the design of each project is this workflow:

  • I created a copy of the original image  C:\Program Files\Adobe\Adobe Captivate 2017 x64\HTML\assets\htmlimages\PlayI_icon.png and edited to turn it into a full transparent image 
  • I renamed the original image and put the empty image in the same path.
  • On the poster image I created an arrow, mostly I use a triangular shape, rotated 90°, using colors from the project Theme Colors palette. You will have seen them in previous blog posts.
  • That Arrow has to be centered horizontally and vertically. 

Dimmed or not Dimmed?

The uploaded published HTML project will by default have a dimmed Poster image (Alpha = 70%). It was meant to have the original Play icon stand out from the background. But that black play icon is gone:

A helpful user on the forum posted the solution: Mark Sabrento  Thanks a lot, Mark (screenname sabre123). I tried it out and it works great. You find it in this  thread

Look for the file CPM.js, which you'll find in the published folder under \assets\js

Open his file in an editor (I use Brackets, but even simple Notepad is possible). Change 0.7 to 1 in this line to set the opacity(alpha)  to 100%


An expert posted a solution  in a thread to get rid of the focus rectangle surrounding the play icon. Sorry, but I forgot to bookmark the thread, which means I cannot pay credit to that expert by name, but found it worthwhile to complete this blog post with that solution:
  • Find the file CPLibraryAll.css in the published folder under assetscss.
  • Add these lines before the existing script:
       *:focus {
       outline: 0;
In that same file you could also change the width and height of the original Play icon which is set at 116x116px. 
10 responses
Hi Lieve, thank you so much for this manual about how to optimize the start screen. In my version, after I click the start-button on my new start screen there is a white screen shown for about a second before the module starts. I suppose there is no chance to get rid off this short white interruption?
I'm afraid not, because it is linked with the loading time and depends on a lot of factors like used device, bandwidth, size of the poster image etc....
Removing the focus indicator is counter to good accessible design. The keyboard user who is sighted needs to see where the focus is at all times.
You don't need to read my blog, please stop doing . It is meant for worldwide users, not only for those countries where you need to cripple elearning content for the majority of learners because of 'laws'. I am sorry, but we provide a course for the majority and a variant for the minority who has all the help they need. Even with your 'laws' it is impossible to provide an efficient course about Photoshop for blind people. I had a blind student in college, and did coach her for Audition (which was accessible) instead of crippling my Photoshop course. Claiming that this is bad design is a typical way to ignore the 'rest of the world' and IMO sounds very arrogant.
Hi Lieve. This is fantastic! Everything works like a charm, everything is so well explained, I have not had any problems. A little request, or advice if possible. Do you know if the settings in the CPM.js and CPLibraryAll.css can be changed somewhere in Captivate (even system files) thus I don’t have to change them every time I publish a file? All my files are and I always remove the rectangle of the play icon. I hope there is a way, this will save me so much time. Cheers!
You must have missed the first upgrade alinea. You don't need to take out the rectangle anymore in the most recent versions. I never dabble with those files anymore when i publish, just create a poster image with a mimicked play shape in the center. You will still have the dimmed version of the poster image, but I wonder if many learners are frustrated by that? Look at my most recent posts which have an embedded tutorials showing that approach.
4 visitors upvoted this post.