Forum Discussion
How to get rid of the 'Big Black Play button' when publishing Storyline.
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.
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.
Yes. At any update you have to follow the procedure as described above. I didnot yet update it. Its best if you follow the procedure above and do it yourself, mainly because its needed anytime Articulate updates. Would want the development team to adopt this in the code...but alas...
A trick from PJ Palomaki to fix this without having to unminify code.
Note, you don't need to unminify the .js, you can do search and replace on the unmodified slides.min.js:Search:
u.trigger(c.startOverlay.READY)}))
Replace:u.trigger(c.startOverlay.READY)})),this.onStart()Hi, the above 'Replace' didn't work for me. The below did;
u.trigger(c.startOverlay.READY)});this.onStart()
cheers (big thanks for the original fix though!)
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.
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\scriptsDear 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).
Thank you, Math, for another great little javascript hack! I've used a few of yours over the past few months.
This procedure still works in the latest Storyline360 version although the code in slides.min.js has changed somewhat.
This is the correct spot now.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/reviewThat 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.
Update - Storyline 360 version June 22, 2023 (Build 3.77.30587.0)
The search & replace still works, for the minified (unmodified) version of
slides.min.js:Search for:
startOverlay.READY)}))Replace with:
startOverlay.READY)}));this.onStart()Take extra care when copying/pasting above, to search & replace the exact string. And just to reiterate, this only works with the unmodified
slides.min.js.I've also attached a modified version of
slides.min.jsfor easy replacement. Replace the file at[your publish folder]\html5\lib\scripts\
Please note: if you're NOT using Storyline build 3.77.30587.0, do not use the attached file.I've just updated my post here, the
slides.min.jswas changed and the search/replace needed to be updated. Hopefully now slightly more robust (no minified variable name included in the search).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 !
If it works, it is fine probably.
