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

Mar 12, 2021

Math Notermans
By Math Notermans

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.

54 Replies
Math Notermans
over 2 years ago03/27/21 at 2:25 pm (UTC)

As Articulate just updated Storyline360 i changed and updated my slides.min.js file and just tested it on Review and on TalentLMS. Worked fine there, no 'Big bad black button of Despair' .

Adding the latest file here so anyone wanted can test with this one. As i solely work with the Modern Player, its for the unified folder.

Sam G
over 2 years ago06/14/21 at 4:59 am (UTC)

Hi Math

Great work. Tried it and works fine!

Now the issue stopping me using SL blocks in rise is the layer issue and grey cross. Because it appears in a layer above the other rise content - which is a weird look. And would be OK except that:

a) if you have a text input field it sometimes zooms in and locks everything forcing you to refresh the page

b) if you change to landscape on your phone, the grey cross is off screen and forces you to refresh the page

Summary - rise courses are very buggy on mobile phones if you use SL blocks. Which I do all the time to get drag and drop interactions and input fields

I think for mobile users I am forced to change all our rise courses into SL only courses which means a lot of re-writing

Math Notermans
almost 2 years ago09/26/21 at 3:52 am (UTC)

Thx for the correction Chris. Might be a change in versions. Whenever Articulate updates Storyline things change. So if any of these fixes stop working, its probably some change of Articulate. Try the original workflow to find whats changed...and then you for sure can get it working.

Sign In to Reply