Remove play button on html5 opening screen in Storyline 360

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!

And I'm just going to keep saying this until someone at Articulate listens/understands:

A "play" button at the beginning of Storyline content is only necessary when there is content that might autoplay (e.g., audio or video) at the beginning. If Articulate can't figure out how to intelligently detect that, the author should be allowed to set whether or not a play button appears.

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.

 H5P content is a great example of this. Most H5P content types work brilliantly 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).

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,
Anne

Here was my solution. A blank slide that transitions to the main slide when timeline reaches 0. 

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/review

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

And the Rise test works also as expected. Thats great...  no autoplay however, but i donot mind.
I tested only on my Samsung Galaxy J7..

The ds-slides.min.js and the unminified version i attach. Do rename your original when working with this and do keep a copy of it outside the default Articulate folder ("C:\Program Files (x86)\Articulate\360\Storyline\player\unified\html5\lib\scripts") because when they update Storyline all here will be overwritten.



I exchanged the original ds file for my edited one, so all i publish will be without the 'Big-Black-Mobile-Play-Button'.

ds-slides.edits.js is the unminified file with my edits in it.
ds-slides.min.js is the same file, but now minified again and thus ready for use...

Kind regards,
Math

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.

Math,

Just wanted to say thank you for coming up with and sharing this workaround. It works wonderfully! This recently became an urgent need for me as well, and feel very fortunate and grateful to have found your posts. Nice work!

Best regards
Gary