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.
I concur. They should fix this as I am otherwise going to have to move everything from rise to storyline only so it can work well on mobile.
Thank you Math. :) For me it seems that the code has changed with the new 360 SL Update. Do you have also a new version of your code?
Try this one. Just updated it. Best however to do it yourself...as it will be needed after any update.
and this is the same but then minified again...probably better..
Any updates if this still works as of 2022 and the 15 Release of the SL software? I could not get it to work?
Yes it should. Storyline now also has cover photos that fix it partly, and the code might have changed somewhat. Im gonna test it and let you know. Sharing a sample might be an idea to test it on a real setup you use.
Tested it and works as before..so either something special in your project or some error in your code. Here is the slides.min.js file i used for the unified ( Modern ) player.
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!
Hello Math!
What version of storyline 360 does this work on?
Would it work on 3.61.27106.0? Would this be able to work on desktop view?
Thank you
On any version, in any view, but if you best follow the process step by step for the version and your local slide.min.js file.
Kind regards,
MathHello I tried the steps but it didnt work on my end. Are you able to look at the files?
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, 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.
a quick look at your lines of code...you probably miss a ) at the end of c.startOverlay.READY...
u.trigger(c.startOverlay.READY)}));this.onStart();Going to test it.
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.
Does the code function as intended on other devices ? Desktop, tablet/iPad and Android mobiles ? If so, then there probably is some other spot in the code particularly for Apple phones that needs fixing. I donot have a Apple phone myself so cannot test that.
Player button has been removed by using the following code but audio not playing automatically. To play the audio I have to click on an interactive element. Any advice?
u.trigger(c.startOverlay.READY)})),this.onStart()
Do check your code... it misses a )
Try to understand the code instead of just copy and paste blindly.
Brackets ( all types ) are openend, some parameters are passed inside, then the brackets close.
So this if correct ( dummy ) code:bladibla, { param1, param2,param3,}
or...bladibla ( c.startOverlay.READY ) } ) ) ,this.onStart ( )the single
}you see inhere is opened in another part of the script.As are the 2
) )before ,this.onStart()So the complete function looks something like this...
( ( {bladibla ( c.startOverlay.READY ) } ) ) ,this.onStart ( )Any openeing bracket needs closing somewhere. Else you get errors.
