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

[yulig60947541]

I would like to Remove The Play button & White Screen that shows on mobile devices with Adobe Captivate 2017. In desktop it's ok, because works autoplay, but on mobile not.

[R_H__]

All content will currently work from older published Captivates because Chrome backtracked on their autoplay update and temporarily removed it. We have until Chrome 70 in October, then with older publishes, audio wont work on the first pages also.

Autoplay - The Chromium Projects

Wait, didn’t you launch the autoplay policy for Web Audio API in M66? Yes, briefly, but we reverted the change about a week later. We’re always working to improve things for users and developers, but in this case we did not do an effective job of communicating the change to developers using the Web Audio API. We are moving the launch to October 2018 to give those developers more time to prepare. If you develop web games, WebRTC applications, or other web experiences with sound please see the developer recommendations.

Interestingly, Storyline are making a tool to mass address the issue so you don't have to go back and republish 100s of courses. Would be nice if Captivate could do similar.

Storyline and Studio: HTML5 Audio Might Not Play in Google Chrome 66 - Articulate Support

Sorry that wasn't a solution, just more info.

[STEAGalex]

Thanks for all your inputs and the Storyline/Chrome links. It shows, other softwares have to battle the same. But still it does not solve the issue and the disrupted user experience. Hmmm... is there any way to solve this problem in a "hard-core" technical way? Does Adobe have tips/solutions ... what would you do if you were me (and behind a couple unhappy corporate customers)?

[Erik Lord]

This is a long thread and I can't say I carefully read through all of it.

I'm not quite sure why this is such a big issue... I agree, it's not ideal... but so the user has to click to start a piece. Surely not that significant an issue?

for a recent project, we just created a simple background image -  a nice, colorful collage with the title of the piece, a couple screenshots, and a brief text summary of the piece. Took about 15 minutes to create.

Insert that as the AutoPlay background and...done.

Unfortunately I do not know of a deeper, technical method for bypassing Captivate's 'click to play' default.

But we do have an unpatched version of CP on one of the developer machine's - so if we really needed to not have that functionality, we would just publish with that unpatched version of v2017.

[STEAGalex]

Well, thanks to all ... it seems there is no known solution; and it seems a lot of users are submitting themselves uncritically to the "play-button-feature". In many cases this may not be a critical issue and I respect the solutions brought forward; but for our customers and for us this is a critical issue. We are creating courses consisting of MANY SHORT (even just 2-3 pages) Captivate modules. That's becaus our LMS offers a comfotable way of structuring these modules. In this case it is a pain having to force the user to click twice, and having to designe so many start pages for just one e-Learning. ... by the way, is Adobe watching this? Is there any way to get help from adobe?

[Lilybiri]

It is a user forum, not sure that Adobe is watching it but I suspect they cannot override decisions by browsers....If you are able to guarantee that the learners never will use more recent versions of browsers, and you roll back to the first version of CP2017 you'll be safe for a while. Oh, and they should also prevent the use of other devices than desktop/laptop.

[RodWard]

This whole thread is beginning to sound a lot like that story about the king that wanted to stop the tide from coming in.  From memory, he ended up sorely embarrassed about the affair.

Sometimes you just have to admit things are outside your control and there's very little you can do about it except move your throne back above the high tide mark and hope global warming ends up being less serious than predicted.

[MisterJT3]

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.

[thisguy4xapi]

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.

[Lilybiri]

Ok, will definitely check this out.

[MisterJT3]

I had just mentioned the cp.movie.play(); bit like 4 to 5 comments ago after my initial post.

[KeelyM]

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.

[MisterJT3]

From my experience you have to wait until the module is ready before you can trigger the cp.movie.play() function to skip the Play button.

Try adding this to your index.html file. I typically add my script stuff just before the closing </head> tag.

<script>

  window.addEventListener("moduleReadyEvent", function () {

       cp.movie.play();

  });

</script>

[KeelyM]

Thanks, that did the trick!

[keithk8820241]

ok I added the script above to the index file just above the closing head tag. and it played in the Dreamveaver preview, but when I tested it in a browser the show started, but the background music failed to play, and the video on the second slide didn't show either. Any suggestions>?

Upon further trials, I realized that I does function in EDGE, but not in Chrome, well not until if hit the rewinding the program two or three times....

[Lilybiri]

Chrome doesn't allow AutoPlay anymore. Trying to override that is not so easy. I learned to live with this, by using a dedicated Play button and a poster image.

[MisterJT3]

Lilybiri The method I mentioned works with the latest version of Chrome and skips the Poster image and Play button just as it should.  It utilizes JavaScript to force the Captivate lesson to skip that entirely so it doesn't matter if a browser disables autoplay or not.

keithk8820241 Said his audio isn't auto-playing and his video isn't auto-playing which has absolutely nothing to do with the method to skip the Poster image and Play button. His problem definitely could be the browser autoplay being disabled but these are 2 separate issues. Having said that though I am not sure how or why his audio wouldn't be playing automatically if it is simply inserted into the timeline. I just tested a lesson in Chrome and it seems to play my audio just fine. Videos, on the other hand, I am pretty sure can't be auto-played but I didn't test that part.

[TLCMediaDesign]

I've had many issues with audio not playing when trying to bypass the play button, so I don't do it. And it is definitely linked to not actually clicking and registering the event. The movie plays, but no audio. As soon as I remove the code to bypass the play button, everything works normally.

[MisterJT3]

TLCMediaDesign Are you bypassing the Play button with JavaScript or some other method?

The JavaScript method I mentioned absolutely does not affect the audio in the way you are saying. All this method does is run the exact same code that runs when clicking the Play button so that you don't have to click anything. The only thing the Play button does is run this JavaScript cp.movie.play(); in the background. My method removes the necessity to click the button to trigger that line of JavaScript and instead runs that line of code upon loading which skips the button and poster image entirely.

So I am sorry you are having issues with your audio but claiming that skipping the Play button is the culprit is just plain wrong. I have tested this in every browser and with both Captivate 2017/2019. The Play button is always skipped and the audio always plays, without fail.

[TLCMediaDesign]

With script, the same as has been mentioned numerous times in the thread.

I think the issue is that the click event never fires and that's what causes the issue.

I just replace the button with an image that is the same size as the interface with custom text to tell the user to click to start the course.

[MisterJT3]

Again, clicking on the Play button does nothing but run cp.movie.play(); The click even does not need to fire for this to work properly.

Removing the necessity to click the button and instead just running the same code that clicking the button runs is not the problem.

If you are unable to get that to work for you that is unfortunate, but the method is sound and works without fail when used properly. I'd be more than happy to help troubleshoot that situation for you when I have time, unfortunately, it's about quitting time and I won't be back on here until next week.

[TLCMediaDesign]

I think I know how to implement it properly and I can tell you that on iPads and some Android tablets, it causes all kinds of issues. Even buttons didn't display. As soon as the code was removed, everything worked fine.

So there is only one difference. Bypassing the button with script, not working, clicking the button, works.

Not worth the hack.

[Jeremy Shimmerman]

Just adding to the conversation that I fully agree with TLCMediaDesign and that this has been my experience.

Plus with the future changes browsers are making to eliminate autoplay - it's just not worth it for me to try and bypass with script. 

[Lilybiri]

Thanks Jeremy and David for that 'realistic' attitude. Why spent so much energy on something we can just have to accept.

[keithk8820241]

Ok, I've been finishing up the project and still can't get the program to run in Chrome.

The audio is background music and the video is on the first slide. (34Mb)

works in Edge...no problem