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.
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/reviewThanks 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...
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.Most helpful Math. thanks. can you tell me in my folder i have slides.min.js. Do I just download your ds.slides.min.js and rename it to slides.min.js to work? I am on storline 360 version 3.48.24159.0 . I have a drag and drop block with no video or audio and i get this bloody play button. Thanks in advance.
Articulate renamed the ds-slides.min.js file to slides.min.js at an update. So basically that is the file to work with.
Ds stands for a reference to ds-bootstrap an external javascript library Articulate uses in Storyline.
@Gary Overgaard... i donot think its wise to just use the ds-slides.min.js file and rename it. Its lucky all works normally. After any update from Articulate i personally copy the new slides.min.js file and rework that as described before. You never know what Articulate changed in an update and by copying and replacing you risk that some of the Articulate updates wont work. However as you mention...little risk in doing that on published output...Has anybody got a fix for the play button to disappear yet? Its been quite a while people above have been talking about this. When can we expect a customised holding page for mobile or expect to get rid of the play button all together. I have a drag and drop storyline line block (no audio or video involved) that i put into rise for a course and get this annoying play button on all tablets and mobiles. The devlopement team should have sorted this by now. This page is 4 years old.
Hi Wendy -
Thanks so much for responding. See below for more details.
In SL2, if you selected Web Publication and checked HTML5 only, the published output had a mobile folder. Within that folder, there was a player_complied.js file. Within the body of that file, it was possible to locate and change the setting of populateIOSLaunch to remove the need for the user to have to click a Play button to initiate the start of an interaction on an iOS device ( avoiding multiple clicks to just get the mobile user started). This solution only works if the first slide is NOT a video, so we adjusted our SL2 content accordingly.
However, in SL 360, that player_compiled.js file no longer exists. Instead, according to Articulate Support, the automatic display of the white screen and play button for iOS is controlled by the app.min.js file, which is referenced as a link source in the last lines of the story_html5.html . I've been able to open the app.min.js file, but the setting of populateIOSLaunch is no longer used. Because the file in minified, our developers are having difficulty determining what part of the code is actually controlling the Play button for iOS.
I thought about using the new responsive player, but my understanding is that it doesn't support JS - which we use extensively to both pass variables between SL interactions and the underlying database, and to notify the event listener on triggers associated with the user completing / cancelling out of the interaction.
Unfortunately, for now, the user experience for an iOS mobile user using Articulate 360 file isn't on par yet with our SL content. If you or anyone else has a workaround or solution now that we've moved to SL 360, I'd welcome it.
Mary
Hi Mary,
Although I can't help with the code modification I did want to make one distinction that the new responsive player within Storyline 360 is different than the Articulate Mobile player. The latter is what doesn't support Javascript as detailed here. The responsive player is what you're seeing when you view the HTML5 output on a tablet or mobile device.
Storyline 360’s HTML5 output and new responsive player give learners the best viewing experience on tablets and smartphones, making Articulate Mobile Player (AMP) output unnecessary, unless learners need to download content for offline viewing or your course includes FLV videos with alpha-channel transparency, both of which are supported in AMP.
Hope that helps clarify that piece and that someone else in the community can help with those code adjustments!
Hi Ashley -
Thanks for replying. Great news about Storyline 360 output supporting Javascript.
I'm trying to confirm my understanding of the new Storyline 360 published output, and maybe you can help. In SL2, we used the Publish to Web output option. We uploaded the story_html5.html file to our web server (or app server) and then created a link on the website page (or app screen) that launched the story file for the user to view from their laptop, tablet or smartphone.
If we select Storyline 360 as the published output type, the file is then published to Articulate 360. From the published message dialogue, I'm provided with a 'View Project Link', which - when clicked - launches the Articulate 360 review page. While Review is helpful, I'm looking for the file that I would upload to our server so learners can view the SL360 content from our website (or mobile app) on their tablet or smartphone.
Based on information on how to publish Articulate 360 for mobile devices, I think web output is still the publication option we should select, and we should still link to the uploaded .html file (we don't want users to download and don't need Flash). If that's the case, I guess I'm still waiting for some indication of where in the app.min.js file the play button can be suppressed for iOS devices.
Let me know if I'm on the right track!
Hey Mary - you are correct and you should still publish to the web as you mentioned.
Hopefully someone in the community will be able to assist you with that modification, as we do not support the modification of published output.
Hi Mary,
You'll want to choose the option below Articulate 360 which is the Web option, and once you do that you can also choose to publish with HTML5 only. The tutorials here should walk you through it. As for the suppression of that play button, I'll leave that up to the community to offer some advice and assistance on!
Just want to see if there is an update for this post.
Found a solution for the play btn?
Hello Nicolas - modification of the published output is not something we can offer assistance with.
As Ashley mentioned above, hopefully the community will be able to assist. Perhaps one of the users above even figured out a way and can chime back in.
After a lot of trial and error I found a workaround with a mousedown event. However its quite complicated.
I will do a post tomorrow to explain it.
Its been a long time, but what did you do to fix the issue with mousedown?
Thanks Nicolas. Looking forward to it.
