Remove play button on html5 opening screen in Storyline 2

Oct 24, 2014

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 SL1, but not on SL2.

Thank you in advance.

21 Replies
Emily Ruby

Hello Leon!

Articulate Storyline's HTML5 output is supported on iPads/iPhones running iOS 7 or later. However, the mobile Safari browser has inherent limitations that impact how multimedia operates and the overall performance of HTML5 content. This can include having to push the play button to start media. 

I am sure if others in the community have found a way to remove this button, they will jump in with ideas!

Michelle Hilgart

Hi Sebastjan, I tried your code and it didn't work. I am likely putting it in the wrong place. Can you send more specific info on where to place the code?  I've tried putting it within the <script> tag above the </script> and also outside and above the <script> tag and neither makes any difference in the big play button displaying when an interaction link is clicked on mobile safari.  We are publishing for web HTML5 only and I am grabbing a weburl to the story_html5.html file.

http://hilg1.s3.amazonaws.com/ bevitalized/sleeppro/story_ html5.html

 http://hilg1.s3.amazonaws.com/bevitalized/sleepwindow/story_html5.html

We completely understand that this isn't a supported solution and that it won't be, but for our group to continue to use Storyline, we need to find a solution -- supported or not.  This issue is causing a terrible experience for our mobile safari users. It goes beyond users having to press the play button. The blank white load screen with no load indicator/then black display with button and publish name is confusing and disorienting to a majority of users. Many think the program is not working properly. If the play button loaded with a transparent background so users could see the interaction content showing through it would not be such an issue.

If anyone else can help provide possible workarounds or fixes we'd appreciate suggestions.  I know we are not the only Storyline 360 users facing this issue. We will share all that we find out and hope others will share with us as well.

If there is a Storyline developer who could point our  programmers in the right direction for a code fix, without supporting or helping us do that, it would also be greatly appreciated.

 

sebastjan f

Hi Michelle,

Mentioned solution ONLY works in in SL2 (and not 360!). Havent seen 360 hack yet.

regular story_html5.html ends like this (copy pasting last 3 lines):

...... document.write("<scr" + "ipt src='mobile/masks.js' type='text/javascript' charset='utf-8'><\/scr" + "ipt>");
}
</script>

</html>

 

add my code (not mine actually - was published on forum long ago) and end should look like this

...... document.write("<scr" + "ipt src='mobile/masks.js' type='text/javascript' charset='utf-8'><\/scr" + "ipt>");
}

document.addEventListener("DOMNodeInserted", function(event) {
if($(event.target)[0].className=="launch_interstitial"){
player.revealPostInterstitial();
}
});
</script>

</html>

 

hope this helps

s.

Anne Seller

Sebastjan: Thanks for taking the time to explain the code, but unfortunately, this didn’t work for me either. I only get a white screen.

Michelle: I found a video from Nick Eastham, where he explains (at the 1:20 mark) how you can remove that pesky play button overlay by making a small edit to the javascript file „player_compiled.js“ in the mobile folder (which is a subfolder of the folder containing your published output from Storyline 2):

https://www.youtube.com/watch?v=XABtm8HxOcY

This worked well for me, so hopefully it will work for you too. 

Cheers,

Anne

Kyle Ortman
sebastjan f

try adding following lines at the end (just before </script> of the story_html5.html file

document.addEventListener("DOMNodeInserted", function(event) {
if($(event.target)[0].className=="launch_interstitial"){
player.revealPostInterstitial();
}
});


</script>

This did the trick for me! Thanks Sebastian!

Alyssa Gomez

Hey Adam!

I'm not sure if this is the most recent thread on this topic, but I'm happy to try and point you in the right direction.

Are you looking to remove the play button you see on mobile devices? That button will appear by default, but as others have mentioned, you may be able to remove it using Javascript. Since that's outside our wheelhouse of support, hopefully folks in the community can chime in with their experience.

Adam Bayliss

Hi Alyssa - Yes, thanks - this morning when I saw this I though DOH! - and changed it.

Then the whole course (there's a lot of Javascript in it) broke and I spent hours trying to find out why - It turned out to be a call to LMSapi.  to get the student name - and once there is a JS error, it didnt recover..

  •  var player = GetPlayer();
  • var myName = lmsAPI.GetStudentName();
  • player.SetVar("name", myName);

So, there's one to be aware of - I changed this setting back and it worked! 

Thanks (no-body could guess that!)

Adam

 

This discussion is closed. You can start a new discussion or contact Articulate Support.