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.
Wondering if there has been any update on this? I too share the concern and frustration of others on this thread. I am creating a learning object that has not video or audio to play on the first screen and therefore no play button is required. It will be confusing to users. I am going to have to add text above the object explaining that in order to access the learning object, they will need to tap the play button. It's a bit of an embarrassment frankly, which will likely lead to my needing to go with another content creation tool.
Thanks for checking in on an update for this. There isn't an option to disable that play button, as that fix was put in play to help with the autoplay issues folks were seeing in browsers such as Chrome, Safari, etc. Even if there is no audio/video on the first slide, having the button ensures there is a learn interaction to allow any other media to autoplay and ensure a seamless flow throughout the course.
We'll certainly let folks here know if anything changes on this setup!
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.
Thanks - I have used the solution ever since I saw your post, but now SL has changed the file structure of the published output, and app.min.js doesn't exist anymore, and I couldn't find the text you described above in any of the new js files.
Is there any chance you have discovered the work around for the latest SL360 published output?
Thanks!
edit: adding the text of the post I was replying to.
Mike Maas, almost 3 years ago This worked for me:
search in app.min.js for MobileStartOverlay:function()
Right after the text that reads var c=a("polyfills/detection"); type this: setTimeout(this.onStart, 1);
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.
The play button is standard on mobile devices since it requires user interaction. To add more color to the 'why':
What you're describing is the intended behavior for Storyline content on a phone. It's the same approach for how iOS handles videos, for instance. Videos get a play button on the phone and then go full-screen when clicked. This is done due to the limited real estate on the phone. The same approach is taken for Storyline content. - Adam
Let me know if that helps. I'll also surface the need to customize how that play button looks with our team!
Thank you for your quick reply. Yes, I understand why the need of the play button at the start of a Storyline module, specially on mobile devices. As a user I will like to have an option to make some minor custom modifications to this page. For example, changing the color of the background and play button, maybe adding some additional text or increasing and centering the title of the program.
I have been able to customize the start screen using css, but of course it will be nice if the customization options reside within the Articulate Storyline Authoring tool.
Thank you to Articulate for producing this great authoring tool and for all the features it keeps adding. It really show the dedication Articulate has to the industry and its customers.
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).
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.
At last found how to overcome the playbutton on Mobile... thx to Mike and Rachel for pointing me in the right direction..
Indeed in SL360 it is in the ds-slides.min.js.. 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 ds-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.
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 ds-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(); },
Will make some tests with audio, video and more in it. Actually will test a Storyline block in Rise too, cause the default SL behaviour on mobile especially hindered me with SL blocks...
No default Storyline play button. I tried to trigger audio automatically but that doesnot work. To play audio on mobiles a button and userinteraction as shown here is still needed. But for me thats fine. I want control and not a fixed setting in the Storyline player.
Next test will be video, expecting the same result...and then into Rise.
@Articulate. DO implement it this way in ds-slides.min.js too...
When done testing video and in Rise i will add my unminified ds-slides file so the developers can check upon that...
And the Rise test works also as expected. Thats great... no autoplay however, but i donot mind. I tested only on my Samsung Galaxy J7..
The ds-slides.min.js and the unminified version i attach. Do rename your original when working with this and do keep a copy of it outside the default Articulate folder ("C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\scripts") because when they update Storyline all here will be overwritten.
I exchanged the original ds file for my edited one, so all i publish will be without the 'Big-Black-Mobile-Play-Button'.
ds-slides.edits.js is the unminified file with my edits in it. ds-slides.min.js is the same file, but now minified again and thus ready for use...
Is there an update on this known bug as I am still dealing with this and it looks very bad for the user to have to press the arrow each time they start a module.
If you ask Articulate employees, its by design and no bug ;-)
As Storyline uses the sIides.min.js files from your local Program Files folder, i added 'this.onStart()' to the slides.min.js file by default. So now every publish i do has that automagically correct in it and i never have to bother about it.
In fact i did something extra. I use 'Symbolic Links' to point that file ( and some others ) to a local folder on my harddrive. That way i can edit those files whenever i want and need. Program Files folder doesnot allow editing. This way i added some code for me unmissable to the files.
Just wanted to say thank you for coming up with and sharing this workaround. It works wonderfully! This recently became an urgent need for me as well, and feel very fortunate and grateful to have found your posts. Nice work!
95 Replies
Thanks Ashley, your clarification was helpful and yes this would be a good feature for mobile users specifically.
Wondering if there has been any update on this? I too share the concern and frustration of others on this thread. I am creating a learning object that has not video or audio to play on the first screen and therefore no play button is required. It will be confusing to users. I am going to have to add text above the object explaining that in order to access the learning object, they will need to tap the play button. It's a bit of an embarrassment frankly, which will likely lead to my needing to go with another content creation tool.
Hi Eric,
Thanks for checking in on an update for this. There isn't an option to disable that play button, as that fix was put in play to help with the autoplay issues folks were seeing in browsers such as Chrome, Safari, etc. Even if there is no audio/video on the first slide, having the button ensures there is a learn interaction to allow any other media to autoplay and ensure a seamless flow throughout the course.
We'll certainly let folks here know if anything changes on this setup!
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.
Hi Mike,
Thanks - I have used the solution ever since I saw your post, but now SL has changed the file structure of the published output, and app.min.js doesn't exist anymore, and I couldn't find the text you described above in any of the new js files.
Is there any chance you have discovered the work around for the latest SL360 published output?
Thanks!
edit: adding the text of the post I was replying to.
Mike Maas, almost 3 years ago
This worked for me:
search in app.min.js for MobileStartOverlay: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 ...
This worked for me in the latest version of SL (March 3, 2020 3.37.21614.0):
MobileStartOverlay:function().MobileStartOverlay:function(){var e=this,t=DS.stringTabler,n=DS.vendorOverrides.feDropShadow ...return c.createElement.setTimeout(this.onStart, 1);just before this so it looks like:Hope this helps!
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.
Hi there, Oscar!
Play Button on Mobile
The play button is standard on mobile devices since it requires user interaction. To add more color to the 'why':
Let me know if that helps. I'll also surface the need to customize how that play button looks with our team!
This post was removed by the author
Hi Katie,
Thank you for your quick reply. Yes, I understand why the need of the play button at the start of a Storyline module, specially on mobile devices. As a user I will like to have an option to make some minor custom modifications to this page. For example, changing the color of the background and play button, maybe adding some additional text or increasing and centering the title of the program.
I have been able to customize the start screen using css, but of course it will be nice if the customization options reside within the Articulate Storyline Authoring tool.
Thank you to Articulate for producing this great authoring tool and for all the features it keeps adding. It really show the dedication Articulate has to the industry and its customers.
Oscar
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).
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
Hi Everyone,
I found this solution (from Sebastjan F.) in another forum post:
Replace the </script> </html> tags at the bottom of the index.html (or story_html5.html) file with this code:
<!-- This removes the play button overlaý: -->
document.addEventListener("DOMNodeInserted", function(event) {
if($(event.target)[0].className=="launch_interstitial"){
player.revealPostInterstitial();
}
});
</script>
</html>
It works for me in SL2, so I hope it works for SL360 too.
Cheers,
Anne
Here was my solution. A blank slide that transitions to the main slide when timeline reaches 0.
You are a life saver. Thanks so much for sharing your solution, Rachel!
At last found how to overcome the playbutton on Mobile... thx to Mike and Rachel for pointing me in the right direction..
Indeed in SL360 it is in the ds-slides.min.js..
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 ds-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 ds-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();},
Do test it with this one...https://360.articulate.com/review/content/70c26959-da56-4891-9d58-06277ed61d32/review
Thanks for this Math. How does slide behave with audio or video on does it auto play?
Sent from my iPhone
Will make some tests with audio, video and more in it. Actually will test a Storyline block in Rise too, cause the default SL behaviour on mobile especially hindered me with SL blocks...
A test with audio on mobile is here...
https://360.articulate.com/review/content/26772712-a9cc-43f2-abc0-0071ef7759c2/review
No default Storyline play button. I tried to trigger audio automatically but that doesnot work. To play audio on mobiles a button and userinteraction as shown here is still needed. But for me thats fine. I want control and not a fixed setting in the Storyline player.
Next test will be video, expecting the same result...and then into Rise.
@Articulate. DO implement it this way in ds-slides.min.js too...
When done testing video and in Rise i will add my unminified ds-slides file so the developers can check upon that...
The video works too. No 'Big-Black-Play-Button-Of-Despair', Storyline opens without it and you can play video by clicking on it.
https://360.articulate.com/review/content/974b35bf-5287-4512-8ab8-b03bde41809c/review
Next one, testing in Rise...
And the Rise test works also as expected. Thats great... no autoplay however, but i donot mind.
I tested only on my Samsung Galaxy J7..
The ds-slides.min.js and the unminified version i attach. Do rename your original when working with this and do keep a copy of it outside the default Articulate folder ("C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\scripts") because when they update Storyline all here will be overwritten.
I exchanged the original ds file for my edited one, so all i publish will be without the 'Big-Black-Mobile-Play-Button'.
ds-slides.edits.js is the unminified file with my edits in it.
ds-slides.min.js is the same file, but now minified again and thus ready for use...
Kind regards,
Math
Is there an update on this known bug as I am still dealing with this and it looks very bad for the user to have to press the arrow each time they start a module.
If you ask Articulate employees, its by design and no bug ;-)
As Storyline uses the sIides.min.js files from your local Program Files folder, i added 'this.onStart()' to the slides.min.js file by default. So now every publish i do has that automagically correct in it and i never have to bother about it.
In fact i did something extra. I use 'Symbolic Links' to point that file ( and some others ) to a local folder on my harddrive. That way i can edit those files whenever i want and need. Program Files folder doesnot allow editing. This way i added some code for me unmissable to the files.
Math,
Just wanted to say thank you for coming up with and sharing this workaround. It works wonderfully! This recently became an urgent need for me as well, and feel very fortunate and grateful to have found your posts. Nice work!
Best regards
Gary
Love to help.. with pleasure Gary.