Im using Captivate primarily to create a bunch of quick software demonstrations and publish them internally in HTML5. Our organisation uses chrome as its default browser which I understand doesn’t support autoplay. So when users open a file they are presented with a blank screen with just a play button in the centre and the player controls below. Id like to have some sort of title page that can have an image and some text to display that at least confirms to the user they are looking at the correct tutorial. Any suggestions? Thanks
Some links for reading on this.
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
https://sites.google.com/a/chromium.org/dev/audio-video/autoplay
Unfortunately, Captivate projects are the collateral damage in this whole “AutoPlay War”.
Believe me – I get it – I don’t like the annoying advertisements that magically play out of nowhere.
Is it fair to suggest that the majority of Captivate users are not creating annoying advertisements that magically play?
I think there is a big difference between reading an article on a website when you are suddenly interrupted by mysterious audio or a pop-up video – that sucks – and actually clicking on a link for which you are expecting a video only to be forced to click again or unmute or something – that sucks too.
That big ugly play button screen… that is Adobe’s contribution to this. That is not Google’s screen.
I mean good grief – if I publish a Captivate project to Captivate Prime – a learning management system with all kinds of text, audio, and video to be expected – every single project requires two clicks to get to what the designer intended…? I think that is dumb. These are not advertisements.
Just look at some of the projects I have posted. No audio or video but you still need to click that big dumb play button. Why should that be blocked by a browser? Remember the Periodic Table I posted? Single slide – no audio or video – just some user initiated animations and state changes. Why should that be autoplay blocked?
Well, it isn’t – that is Adobe’s big play button. That is why we can add a little snippet of code to the index.html file and ignore it because Google doesn’t care in that case. It doesn’t care because it is not part of any browser policy.
But the audio? That Google cares about. That is part of the policy. That is why the user’s project moves forward but the audio doesn’t play. Chrome requires user interaction with the media and will reject code calls to play it until they do. I spent several hours last night reading up on this and have a little better understanding of it now.
I think Adobe added the play button screen for situations like the poster, audiox, has – where audio autoplays when the project loads. That big play button forces interaction with the screen so that everything in the project can autoplay. I think it was well intentioned to avoid issues where things do not work as expected. The problem is that they have forced it upon every project – even ones that don’t need it. I would guess I am not the only one who creates projects with no audio or video. My projects often invite the user to interact anyway. I would suggest as a best practice to create title or introductory slides. I always made them and your workflow addresses that but I did not want to create a title slide for my title slide if you know what I mean.
I just want the ability with a checkbox in the GUI again to disable that play button slide. Until then, I will tweak my index file for as long as that works.
I will post some links in a separate post for some interesting reading a little later.
Nicely put Greg. This makes total sense. Thanks for your time and effort. Adam
Hi Greg, Definitely keen to look at modifying the html code to improve the user experience.
Thanks
Adam
OK – check out the pic.
If you have an editor that gives you line numbers it will help you find the right place.
Line 96 – Right in-between the cpInit(); and the initialized = true;
Add the three lines shown exactly as they are. Case sensitive. If you try to copy/paste it can sometimes do a funky slant to the quotation marks and then it doesn’t work – so be aware of that.
$(document).ready(function() {
$(“#playImage”).click();
});
This will basically simulate a click on that play button once the document is ready. This works really well for our internal items just being served up from a file server. Also works great for our website.
Sometimes when using an LMS if there is some other sort of “wrapper” that loads – you may need to place this in a setTimeout for like a half second.
Hope this works for you.
Attachment 
Thanks Greg. This gets the video to autoplay however it does it with no sound. If I pause and restart the video, the sound restarts from the beginning however the picture remains frozen until the sound catches up and then the video plays normally from there. any ideas?
The code I provided was only meant to launch the Captivate project and push through the big play button screen so the learner does not have to click twice.
Do you have like a video with separate player controls embedded on the first slide or do you just have audio underneath while the timeline plays and stuff happens on the screen?
A little more on this.
As I understand it, the audio not playing is a Chrome thing. Chrome forces you to interact with the screen in some way first. Would probably work fine in Firefox.
The big ugly play button screen is an Adobe thing.
Personally, I create intro slides anyway and always use custom navigation – so I always hated that a user had to click the big play button just to get to my intro slide. My intro slide provides context and asks a user to “Begin”. At that point, they have interacted with the content and all subsequent slides with auto play should function normally.
I don’t know of a way around the Google Chrome thing – those guys are too smart for me. I guess, prior to version 76 – there was a flag that each person could set on their browser to enable it but that is gone too.
Anyway – I would recommend making a good intro slide that has some sort of button for them to continue and use the code I gave you to bypass the ugly play button screen.
It will not only happen in Chrome, but also on mobile devices.
Just wnnted to tell that the workflow I use is not needing any post-publishing manipulations. I replace the HTML image for the play button (which is not Adobe but appears everywhere when AutoPlay is disabled) by an empty image. I only have to create a poster image which has an image of the play button in the center of the stage, and all is done. To take out the blue selection rectangle is no longer necessary, that needed post-publishing editing.
I personally very much dislike this “feature”.
If you don’t mind a little bit of – post-publish modification – you can get the project to play when they first launch it.
Like you, I create lots of things for internal use and many projects that simply go out on our website which have no audio or video in them. Supposedly, as I understand it, the autoplay disable thing was meant to prevent video/audio from playing when a user is unaware. Which, to that end, I agree. I always hated it when I was on a website and all of a sudden there was sound coming from somewhere and it took me a while to find it. However, I think it is different when a user clicks on a video or audio file (expecting sound) and don’t get it. It is ridiculous to me that our visitors should have to click twice to access the content.
It involves adding a little bit of code to the index.html file that is created when publishing is complete which might be a bit scary for some so if you’re interested in dabbling in that arena, let me know and I will expand a bit more for you.
Not being able to use AutoPlay for HTML5 output (contrary to some concurrent tools Captivate publishes to HTML5, doesn’t use a HTML player), is not only with Chrome. AutoPlay is disabled since a while for all HTML output in Captivate. To make the experience better for the learner, have a look at the tips in:
http://blog.lilybiri.com/poster-image-autoplay
You must be logged in to post a comment.
