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.
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!
Hi Julie! Thanks for popping in to share the blog post with the community. Modifying the published output is not an activity supported by Articulate and I just wanted to mention that for anyone that may wish to utilize the solution you've shared.
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.
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: 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):
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.
Hi Alyssa - what I really want to do is remove the launcher page - because it opens a 'spare' window in the LMS, and the progress isn't properly comitted if you close the course window, but not the launcher window.
I see the note to developers in the Launcher.html code - does that work?:
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!
21 Replies
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!
Any news on this issue? Is there a way in Storyline 2 to remove the play button for HTML5 content?
Many thanks,
Silvia
Hi Silvia,
There isn't a change to the behavior of Storyline but there may be unsupported methods of changing that behavior.
Here is a solution but you have to edit the code after its published:
http://blog.commlabindia.com/elearning-development/hide-play-button-storyline
Hi Julie! Thanks for popping in to share the blog post with the community. Modifying the published output is not an activity supported by Articulate and I just wanted to mention that for anyone that may wish to utilize the solution you've shared.
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>
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.
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.
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
Thanks Julie. This worked well.
Hey Louise - Glad that this thread was able to assist you as well. Thanks for popping in to share :)
This did the trick for me! Thanks Sebastian!
@sebastJan f, the script worked perfectly fine for me. I am using storyline 2.
Hi all - is this the newest thread on this issue?
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.
Hi Alyssa - what I really want to do is remove the launcher page - because it opens a 'spare' window in the LMS, and the progress isn't properly comitted if you close the course window, but not the launcher window.
I see the note to developers in the Launcher.html code - does that work?:
Hey, Adam!
In Player Properties, do you have the Launch player in new window (creates launch page) setting enabled?
If so, try disabling that setting, and let me know if that makes a difference!
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..
So, there's one to be aware of - I changed this setting back and it worked!
Thanks (no-body could guess that!)
Adam
Thanks for the update, Adam! I'm glad you were able to find the culprit!
hi Sebastain,
this solution works for storyline 360 too . It removes the play button at the start but the audio on the title slide doesnt play.
Any workouts for this..
hi Anne,
player_compiled.js file is not there published courses of storyline 360.
This discussion is closed. You can start a new discussion or contact Articulate Support.