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.
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
Yeah both issues are no fun. Articulate should fix those, because without SL blocks...well Rise is quite limited.
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.
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...
and this is the same but then minified again...probably better..
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.
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,
Math
