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.
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.
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).
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.
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.
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.
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).
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!
This worked for me in the latest version of SL (March 3, 2020 3.37.21614.0):
- Search in ds-slides.min for
MobileStartOverlay:function(). - Find this instance:
MobileStartOverlay:function(){var e=this,t=DS.stringTabler,n=DS.vendorOverrides.feDropShadow ...
- It continues on and on until you reach
return c.createElement. - Just like Mike's old instructions, add
setTimeout(this.onStart, 1);just before this so it looks like:
l=o.isUnified,u=s.env.is360;setTimeout(this.onStart, 1);return c.createElement
Hope this helps!
You are a life saver. Thanks so much for sharing your solution, Rachel!
OMG Rachel. You are incredible!! This totally worked and MADE MY DAY!!!
- Search in ds-slides.min for
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':
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!
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
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,
AnneUnfortunately this didn't work for me in the latest version of SL360
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...
