How to get rid of the 'Big Black Play button' when publishing Storyline.

Mar 12, 2021

This question pops up over and over again, so i made a new post i can point to whenever someone asks about this.

For Storyline360, either in your published folder or in the Programme folder find the slides.min.js file.
(C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\scripts)

What i did was unminifying the file...so it becomes what more readable
Used this here... https://unminify.com/

I added several console.log("now this happens") to the slides.min.js to figure out where what happened exactly and thus soon found that there are several functions in it that cause the playbutton on mobiles.

onMobileStart
createMobileStartOverlay
showMobileStartOverlay
killMobileStartOverlay

All quite promising...so could i just call one of these functions ?

After several tests and retry's i found that just adding
this.onStart(); at the end of the onMobileStart function overrides the play button and mobile behaves as desired.

So this is onMobileStart inside slides.min.js

onMobileStart: function (t) {
var e,
n = this;
(this.rejectDeferred = t.rejectDeferred),
o.addClass(document.body, "resume-shown"),
(e = { visible: !0 }),
t.mobileStartAsPrompt && (e.isResumePrompt = !0),
this.setState(e, function () {
var t = null != n.refs.resume ? n.refs.resume : n.refs.playIcon;
c.env.is360 || t.focus(), l.trigger(u.startOverlay.READY);
});
this.onStart();
},

Adding my slides.min.js file for anyone to test it with. Make sure though to copy and save your original one somewhere, so in case of troubles you can go back. Also keep in mind that whenever Articulate updates Storyline this file will be updated too, and you need to do the procedure above again.

DO NOT copy and replace the slides.min.js file with this one after updates...because Articulate might have changed things...so not advised using an older file. Redo the steps and change your own slides.min.js file.

slides.min.js

59 Replies

over 1 year ago01/20/23 at 9:24 am (UTC)

Already mentioned this on page 2 of this discussion... And possible solutions for it.

Andy Laszlo

1 year ago03/21/23 at 12:24 pm (UTC)

Hello Math - thank you, this works a treat.

I was testing this out to check all variables. I've found out that the:

'On restart' = 'prompt to resume' within Storyline setting no longer works (which provides a different screen to the black play button at the start).

Is this expected behaviour to due to the hack?

1 year ago03/21/23 at 12:51 pm (UTC)

Resume behaviour should not influence this, as its in the storyline scripts themselves. I will test this soon...

AVT Connect

10 months ago06/22/23 at 4:38 pm (UTC)

I've just updated my post here, the slides.min.js was changed and the search/replace needed to be updated. Hopefully now slightly more robust (no minified variable name included in the search).

10 months ago06/22/23 at 4:45 pm (UTC)

If you're trying to autoplay video (with audio) as the very first slide, that is not possible due to restrictions by all major browsers. See this: https://developer.chrome.com/blog/autoplay/

You can autoplay a video without audio, but for video with audio, the user has to interact with the page first (click on something).

Thorsten H.

7 months ago09/14/23 at 8:37 pm (UTC)

Dear Math, or anybody whose of interest,

I am using Storyline 3 and I don't want to switch to 360 because of special reasons.

I want to get rid of the play button on mobile. On desktop its removed with a triggerslide before the actual first slide.

As I don't have any skills in developing, I kindly ask, could you deliver me the updated file for an adequate fee? Kind of freelancing.

If yes, please send me your message here under click on my profile and contact me.

Thank you so much,
Thorsten

Brandon Volkman

4 months ago12/27/23 at 3:43 am (UTC)

Hi all, long time follower, first-time poster. It appears that with the latest Storyline360 update (and release of the new 64bit beta environment) that this “trick” is no longer possible using the method shared in this thread. From what I can gather, the string of script to be manipulated isn’t even in the slides file anymore.

Math, you aren’t the hero we deserve but you’re the hero we need. Please, help!

Morten Sørensen

3 months ago01/11/24 at 2:22 pm (UTC)

Hi Math,

If it is a storyline block in Rise, it has to be published directly from Storyline to Review. Is there a workaround to get rid of the play button, if you can'y download the files?

Thanks.

Kind regards,

Morten

3 months ago01/13/24 at 4:46 pm (UTC)

You can upload files to Review. Bigger issue however is that due to changes in Storyline this doesnot work anymore. I tried to solve it, but without luck so far.

Rosaria Marraffino

2 months ago02/14/24 at 7:32 am (UTC)

Hello everyone,

I don't know about the SL block in Rise, but for standalone Storyline courses, the code has changed as some of you pointed out, and what was before

c.trigger(u.startOverlay.READY) seems now to be c.trigger(h.startOverlay.READY)

I tried using the "old" method with this "new" element and I replaced :

c.trigger(h.startOverlay.READY)

with

c.trigger(h.startOverlay.READY), this.onStart()

It does the trick, the black play button is gone on mobile ! However, I hope I am not messing up with the reste of the code though, as I am no developper !

I am sharing because this might help those who are looking for a solution.

On the other end, if someone actually understands the code (because I am not) : could you confirm (or disprove) this alternative ?

Thanks in advance for those who'll look into this !