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. 

60 Replies
Alyssa Gomez

Ah, that definitely makes a difference, Colleen!

The "Play" button you see when opening Storyline content on an iOS device is standard behavior for all versions of Storyline. It's a part of how the course needs to launch the HTML5 output in mobile Safari. 

This discussion addresses removing that Play button, so it's worth a shot with your Storyline 360 output.  We can't support modifying the published output, so reaching out in that discussion or to those community members would be your best bet for troubleshooting those ideas!

Alyssa Gomez

Hi Colleen!

I tested two types of Storyline 360 files with Modern Player on an iPad, and here's what I saw:

Would you mind testing both of those links on your iPad, and let me know if you see the Play button with both links? Thanks in advance!

Ashley Terwilliger

Hi Geordie,

Are you also using the modern player? In the example Alyssa shared, the content didn't have to contain any media but the play button remains. It's standard behavior for launching the content on a mobile device.

If you're seeing something different or still feel that the course is not working as described above, we'd love to take a look. Can you share a link to the course here with us and let me know what Android/Apple devices and OSs you're using? 

Aurélien Coussement

Hi ! I'm trying to integrate small Storyline interactions into Rise courses. Unfortunately, I'm getting this awful black screen with a play button on mobile screens. As I'm integrating the storyline files via Storyline 360, there's no way to modify the files as presented in this thread...

Is there a way to modify the starting screen on mobile devices? I'm not displaying any video or audio in the starting screen of the interaction, I just want the learner to get the storyline interaction directly in front of his/her eyes, instead of this ugly, non ergonomic screen... I hope you agree with me... :)

J Hoog

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

 

 

 

 

Campus Virtual de Salud Pública

I don't understand why we have the same problem for more than 2 years. The play button on HTM5 in a mobile device is terrible and confusing for users. Everythime the Storyline is updated every solution in this discussion doesn't work. For example, the solution posted by "J Hoog" now is not working with Storyline 360 v3.25.18088.0. On the other hand, the solution posted by "Ivan Ruge" is not working despite was posted 24 hours ago. Articulate should give us a permanent solution for this. 

Leslie McKerchie

Hi Campus Virtual de Salud Pública,

Google no longer allows videos to autoplay in Chrome 66 and later, learners now see a play button when they launch or resume a course with a video on the first slide. You can read more about that here.

The play button is the user interaction required for this new policy.

Any modification of published output is not supported by Articulate. 

Campus Virtual de Salud Pública

Leslie, thanks for your prompt response! The play button is launched despite the course has or not has a video. For example, this HTML5 published with only blanks slides. https://s3.campusvirtualsp.org/test/story_html5.html. Attached is the result when I visit the link through an iPhone. Also, attached is the .story file.

Play button on iPhone

Aurélien Coussement

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

Eric Fox

I agree with Aurélien. A great deal of elearning content does not include video or audio and does not need a cumbersome and confusing "Play" button on mobile to allow the user to begin interacting with it. Just consider the interactions already built into Rise or the many content types of H5P (https://h5p.org/content-types-and-applications), most of which can be displayed on mobile devices just fine without requiring a "Play" button to get started. In fact, most of those H5P content types look much better than Storyline blocks when integrated into Rise (but then you lose the built-in tracking you get with Storyline blocks).

Ashley Terwilliger

Hi Aurelien, Eric, and Michael, 

As Leslie shared before, the play button was implemented to resolve two issues: 

  • Chrome/Safari blocking the autoplay of media unless there was a user interaction
  • Mobile devices which require user interaction to launch content. 

I'll be happy to let the team know that you'd like options to edit how that play button looks! Also, here's a bit more about how we work to prioritize feature requests, and you're always welcome to share those here in E-Learning Heroes or send along to our team as a feature request.

Eric Fox

Right, but those issues really only apply to content that might autoplay (e.g., audio or video).

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.

Storyline should be intelligently detecting the presence of media that might autoplay (e.g., audio and video) at the beginning of Storyline content, and then adding the play button/interface for mobile users only when necessary. Once again, H5P content is a great example of this. Most H5P content types work perfectly 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).