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.
Thanks for chiming in! Do you have an example link you can share? I haven't seen the Play button appear on the first slide if there's no audio or video on that first slide.
Sorry I didn't clarify. This happens on iPads. Attached are examples. . I understand this button can be necessary if there is autoplay video on the first slide since iOS blocks autoplay. But if there isn't any autoplay its just added clicks.
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!
The "Play" button no longer appears when opening Storyline content that does not contain any audio or video on an iOS device. I'm just looking for the same functionality when there is no audio or video on the first page (because the "Play" button is unnecessary).
I am having the same issue, on both android and apple, I have a tiny 3 screen module without any media yet there is an annoying play button when it loads. What is the point of it and how can it be removed?
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?
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... :)
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!
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.
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?
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.
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.
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.
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).
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).
We have had challenges with this also, especially when the play button launches the iOS video preview which then needs to be closed before user can interact with the course.
Wonder if it would be possible to customise the black screen with an Image? This would create a sort of splash screen.
Fair point Eric, agree H5P is doing some great things. Hoping that the articulate team can continue to lead the way and possibly address this in a future release.
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.
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).
95 Replies
Hi Colleen,
Thanks for chiming in! Do you have an example link you can share? I haven't seen the Play button appear on the first slide if there's no audio or video on that first slide.
Also, here's a quick sample I put together. Do you see the Play button when you test this link in Chrome?
Sorry I didn't clarify. This happens on iPads. Attached are examples. . I understand this button can be necessary if there is autoplay video on the first slide since iOS blocks autoplay. But if there isn't any autoplay its just added clicks.
Attached is how you sample project starts on an iPad...
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!
The "Play" button no longer appears when opening Storyline content that does not contain any audio or video on an iOS device. I'm just looking for the same functionality when there is no audio or video on the first page (because the "Play" button is unnecessary).
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!
I am having the same issue, on both android and apple, I have a tiny 3 screen module without any media yet there is an annoying play button when it loads. What is the point of it and how can it be removed?
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?
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... :)
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!
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
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?
This post was removed by the author
Best solution
Step 1: in story_html5.html
reproducir como escritorio sin el boton de play.
Replace the lines with the following code.
/(?=.*\bWindows\b)(?=.*\bARM\b)/i
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.
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.
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.
Thanks so much for sharing your file and allowing me to take a look.
I apologize. You did ask about mobile initially. The play button is standard on mobile devices, which require user interaction.
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
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).
We have had challenges with this also, especially when the play button launches the iOS video preview which then needs to be closed before user can interact with the course.
Wonder if it would be possible to customise the black screen with an Image? This would create a sort of splash screen.
Fair point Eric, agree H5P is doing some great things. Hoping that the articulate team can continue to lead the way and possibly address this in a future release.
Hi Aurelien, Eric, and Michael,
As Leslie shared before, the play button was implemented to resolve two issues:
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.
The ability to customize the play button would help immensely. I understand the need for it to exist. Thanks!
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).