Forum Discussion
Remove play button on html5 opening screen in Storyline 360
Is there a way of editing the code on one of the files to remove the big play button that appears on the opening screen of a mobile device accessing the html5 file? I've seen threads on how to do it on SL2, but not on SL 360. I can't seem to locate the player_compiled.js (or story_compiled.js) file to even edit it. I'm using SL 360 publish to Web with HTML5 only content option. When the published file gets uploaded to mobile iOS device, the opening screen is always the Play button (see image below). And yes, I know that editing published files is not supported by Articulate.
- MikeMaasCommunity Member
This worked for me:
search in app.min.js forMobileStartOverlay:function()
Right after the text that reads
var c=a("polyfills/detection");
type this:setTimeout(this.onStart, 1);
The final line should look something like this:
... MobileStartOverlay:function(){var c=a("polyfills/detection");setTimeout(this.onStart, 1);return b.createElement ...
- nicolaslacroix-Community Member
Tested and working better than sl2's solution for this so far.
Thanks alot!
- AnzeraAnzeraCommunity Member
Thanks Mike,
This worked for me but with a few changes.
My final line looks like this:
"MobileStartOverlay:function(){var i=e("polyfills/detection");setTimeout(this.onStart, 1);return t.createElement..."
- philipsiwinskiCommunity Member
Thanks Mike ! Sometimes the text to search is
var i=e("polyfills/detection");
- DocFoxCommunity Member
And I'm just going to keep saying this until someone at Articulate listens/understands:
A "play" button at the beginning of Storyline content is only necessary when there is content that might autoplay (e.g., audio or video) at the beginning. If Articulate can't figure out how to intelligently detect that, the author should be allowed to set whether or not a play button appears.
For example, if I have a drag-and-drop exercise that I create in Storyline, there is no reason at all for mobile users to first click a confusing "Play" button to begin dragging the objects. The dragging itself (or the selection of a multiple choice option or the clicking on a hotspot or...) IS the user interaction. You do not need to create a perfunctory or substitute user interaction (the play button) to indicate the user's willingness to begin the real user interaction.
H5P content is a great example of this. Most H5P content types work brilliantly across mobile devices and browsers without the need for a play button to launch or activate them.
And it's not just about styling that play button -- it's about displaying it only when it is absolutely necessary. For a great deal of content, it is not necessary (and is, in fact, confusing and cumbersome for the end user).
- OscarGagliardiCommunity Member
Well said Eric. On Desktop computers a module that doesn't have audio or video on the first slide doesn't display the awful screen with the play button. On mobile devices it appears regardless. I think we need Articulate to first address the inconsistency and then provide us with a way to customize this screen.
Oscar
- JHoogCommunity Member
Hi Aurélien,
There is a fix for this. We also have the same problem and we agree with you about the look. The Fix we use is for Storyline 360 Scorm. So i dont know if this is going to work for you.
Edit scorm output:
Storyline output\html5\lib\scripts\app.min.js
In app.min.js search for
MobileStartOverlay:function(){var i=e("polyfills/detection");
Edit this: setTimeout(this.onStart, 1);
MobileStartOverlay:function(){var i=e("polyfills/detection");setTimeout(this.onStart, 1);return t.createElement
Hope this can help you.
Greets, J
- BrianMcCannCommunity Member
I'm trying to make this modification, in a 360 SCORM ouput, but MobileStartOverlay:function(){var i=e("polyfills/detection"); does not appear anywhere in the app.min.js file when I search for it. Does anyone else have this problem?
- AurlienCoussemeCommunity Member
Do you plan to offer the possibility to edit this starting page?
I understand the necessity of creating a play button on mobile devices (which require user interaction) but the fact is that this display is the first contact with the learner, and this is not really attractive (in our user tests, many users were thinking it was a bug).
Intergated in Rise, it's even more awful...
Thank you
- OscarGagliardiCommunity Member
I understand the need for the play button at the beginning of a Storyline module, but on mobile devices why do we need it if the module doesn't have any audio or video on the first slide?
Why you don't give us at least the option to customize the black screen with the play button (that looks more like a mistake). It really looks out of place and not professional. Please make this a priority. Thank you. - JessieBernal-f8Community Member
- TacySalcidoCommunity Member
THANK YOU!
- JorgeCampos-369Community Member
That worked. Thank you for sharing this!
- WendyFarmerSuper Hero
Hi Mary
what was the code in the js file you are looking to edit. I've found a story.js file in the published output but not sure what you are editing
Hi Aurélien,
The play button you're seeing is by design for Storyline blocks in Rise when viewed on a mobile device. I haven't seen a community method to remove it yet, but if someone has done so I hope they're able to share here with you!
- FaizanMumtazCommunity Member
The ability to customize the play button would help immensely. I understand the need for it to exist. Thanks!
- PhilMayorSuper Hero
I think it only shows play in Rise if there is no media on the first slide, there is no play button if you have no media outside of Rise. But you will need either a next button or someway for the user to click to move slide.