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.

47 Replies
Kevin Scott

Math... that works!  Thank you so much. I had tried the code insert manually but I must have missed something in the code. But your file works perfectly. Now I'm just scared when an update comes how then it will kill this... as it works well and exactly like I want with pages and mobile devices. Again thank you so much!

Math Notermans

Did download and check your zip. In the active slides.min.js file inthere instead of this.onStart i find setTimeout(this.onStart, 0.1);

Basically the timeout/delay like that should work...but why you add it in the first place?

Aint it working when running it as described? 

Changed it in the code and uploaded it to my LMS and indeed the Black Button of Despair still shows. How did you publish ? Classic Player ? Then you have to ensure you edit the correct slides.min.js file. I suspect your edit is in the wrong one.

If you share your Storyline file ( you can send it privately to me at m.notermans@tilburguniversity.edu ) i will test and doublecheck it.

Kind regards,
Math

Math Notermans

The above mentioned procedure works as is only for the Modern Player. In the Classic Player the name of the function where you need to add the code is somewhat different.

For the Classic Player the function is called 'onMobileStart'. Procedure to get it done is exactly the same. Add 'this.onStart();' at the end of that function and your Black Button of Despair is gone and your Storyline will start directly on mobile devices.

Make sure to fix this in your slides.min.js at
C:\Program Files (x86)\Articulate\360\Storyline\player\classic\html5\lib\scripts

mobilestart



Jill Freeman
Math Notermans

The above mentioned procedure works as is only for the Modern Player. In the Classic Player the name of the function where you need to add the code is somewhat different.

For the Classic Player the function is called 'onMobileStart'. Procedure to get it done is exactly the same. Add 'this.onStart();' at the end of that function and your Black Button of Despair is gone and your Storyline will start directly on mobile devices.

Make sure to fix this in your slides.min.js at
C:\Program Files (x86)\Articulate\360\Storyline\player\classic\html5\lib\scripts

mobilestart



Dear Math: Would you be so kind and helpful as to post a working js file for each player style? I tried but did something wrong (attached).

David Kelly

Math, thank you for the suggested fix to the Black Play Button on Mobile devices, but I just tried this solution with the latest version Storyline 360 (as of 6/7/2022) and it is causing the player to get stuck.  The player shows that it is loading and it never shows the actual slide. 

I am going into the "slides.min.js" javascript file that comes with the storyline install and am doing the following find & replace:

FIND

u.trigger(c.startOverlay.READY)}))

REPLACE with

u.trigger(c.startOverlay.READY)});this.onStart()

Any suggestions from anyone on how to fix this, or are there any new solutions for removing the Big Black Play Button on Mobile Devices?

Thanks so much,

David K.

Peter Ward

Hi Math. This solution works for me, but with one big problem. I have audio in my Storyline file which should begin at the same time as the animation in the Storyline Block. However, after adjusting the JS as advised above, the narration only begins if I click on the Storyline Block or one of the controls, and by that point, the audio and animation aren't in sync. Any advice?

Here's a video showing what I'm experiencing: https://360.articulate.com/review/content/76cecc95-df5d-4c46-a8da-f389761758c8/review

Math Notermans

That is basically why Articulate in the first place added the Big Black Button of Despair...,
Modern browsers forbid direct play of audio and video and a user interactivity is needed.

Option to fix this...
- Be aware of the browser behaviour and add a button on your first screen to start everything in sync...or an empty screen that immediately jumps to the first screen before your start...might work too... the thing to ensure is, there is some activity before anything happens... so the browser can start the audio/video.

JHH MLT

Hello. I've tried both u.trigger(c.startOverlay.READY)})),this.onStart() and u.trigger(c.startOverlay.READY)});this.onStart() by replacing each in my slides.min.js file, and upon republish I still see play button on my apple phone. Any other thoughts on how to remove the play button? I know it seems like a small/quick click to start the course, but when we have employee's accessing 25 modules, the one clicks add to the learners frustration level.

PJ Palomaki

Update - Storyline 360 version November 7, 2022 (Build 3.69.28997.0)

The search & replace still works, for the minified (unmodified) version of slides.min.js:

Search for:
u.trigger(c.startOverlay.READY)}))

Replace with:
u.trigger(c.startOverlay.READY)})),this.onStart()

Take extra care when copying/pasting above, to search & replace the exact strings. And just to reiterate, this only works with the unmodified slides.min.js.

I've also attached a modified version of slides.min.js for easy replacement. Replace the file at [your publish folder]\html5\lib\scripts\

Please note: if you're NOT using Storyline build 3.69.28997.0, do not use the attached file.