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. 

53 Replies
Mary Grove

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

Ashley Terwilliger

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! 

Mary Grove

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!

Ashley Terwilliger

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! 

Mike Maas

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 ...

 

Ashley Terwilliger

Hi Jens,

This discussion is just a bit older. Are you using the code above to play audio? If so, I'll have to rely on the community for help! 

If you have audio inserted on your slides that isn't playing on your mobile devices, can you share a bit more about your course?

  • What version of Storyline are you using?
  • What iOS version or Android Version?
  • Where are you hosting/testing the published output?
Jens Scharf

Hi Ashley,

thanks for the feedback.

My Environment:

- Storyline 360 v3.15.15581.0
- iOS 11.3 with Safari and Android 7.1. with Chrome
- Server Apache
- client Firefox 59.0.3

When I call the application on the devices with the start button, it
plays the audio. If I call up the custom script page as described above,
there will be no sound.
If I call the adapted script with the Firefox from the server, the
soundtrack will also be played.
I also tried it with Firefox on the iPad, it's the same behavior.

Why?

Mit freundlichen Grüßen aus Lindau

Jens Scharf
Technische Dokumentation

Ashley Terwilliger

Hi Jens,

The custom script above to remove the play button isn't something I can help with.

But it's worth noting that browsers like Safari and Chrome have started to block the autoplay of media by default, so that play button has been even more instrumental in ensuring that the user is interacting with the content and would like the audio to play. 

I have to imagine the changes in autoplay are likely impacting the previously created script too. 

Jens Scharf

Hi Ashley,

okay, bad news.

It would be good if you could customize this start screen with the
button, so harmoniously fits into the presentation. So that I can define
my own wallpapers and click areas, etc., because that's how I end up on
the start button and then on my own start screen on which I have to
press start again.

Mit freundlichen Grüßen aus Lindau

Jens Scharf
Technische Dokumentation

Ashley Terwilliger

Hi Jens and J,

Thanks for that additional feedback. I also wanted to let you know that Chrome has rolled back (temporarily) some of the autoplay changes with audio only. You can read about that here, so it'll give you a bit of breathing room while you update your courses with audio on the first slide. 

Colleen Liley

With the new Modern Player, I don't get the HTML5 play button on the opening screen IF the course does not contain audio or video. However, if the course contains audio or video ANYWHERE in the course, the play button appears on the opening screen. We don't use any audio or video on our opening screens so we don't want the button... The Modern Player's javascript must be testing for media somewhere, any ideas where? I'd really like that button to go away!