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 responding. See below for more details.
In SL2, if you selected Web Publication and checked HTML5 only, the published output had a mobile folder. Within that folder, there was a player_complied.js file. Within the body of that file, it was possible to locate and change the setting of populateIOSLaunch to remove the need for the user to have to click a Play button to initiate the start of an interaction on an iOS device ( avoiding multiple clicks to just get the mobile user started). This solution only works if the first slide is NOT a video, so we adjusted our SL2 content accordingly.
However, in SL 360, that player_compiled.js file no longer exists. Instead, according to Articulate Support, the automatic display of the white screen and play button for iOS is controlled by the app.min.js file, which is referenced as a link source in the last lines of the story_html5.html . I've been able to open the app.min.js file, but the setting of populateIOSLaunch is no longer used. Because the file in minified, our developers are having difficulty determining what part of the code is actually controlling the Play button for iOS.
I thought about using the new responsive player, but my understanding is that it doesn't support JS - which we use extensively to both pass variables between SL interactions and the underlying database, and to notify the event listener on triggers associated with the user completing / cancelling out of the interaction.
Unfortunately, for now, the user experience for an iOS mobile user using Articulate 360 file isn't on par yet with our SL content. If you or anyone else has a workaround or solution now that we've moved to SL 360, I'd welcome it.
Although I can't help with the code modification I did want to make one distinction that the new responsive player within Storyline 360 is different than the Articulate Mobile player. The latter is what doesn't support Javascript as detailed here. The responsive player is what you're seeing when you view the HTML5 output on a tablet or mobile device.
Storyline 360’s HTML5 output and new responsive player give learners the best viewing experience on tablets and smartphones, making Articulate Mobile Player (AMP) output unnecessary, unless learners need to download content for offline viewing or your course includes FLV videos with alpha-channel transparency, both of which are supported in AMP.
Hope that helps clarify that piece and that someone else in the community can help with those code adjustments!
Thanks for replying. Great news about Storyline 360 output supporting Javascript.
I'm trying to confirm my understanding of the new Storyline 360 published output, and maybe you can help. In SL2, we used the Publish to Web output option. We uploaded the story_html5.html file to our web server (or app server) and then created a link on the website page (or app screen) that launched the story file for the user to view from their laptop, tablet or smartphone.
If we select Storyline 360 as the published output type, the file is then published to Articulate 360. From the published message dialogue, I'm provided with a 'View Project Link', which - when clicked - launches the Articulate 360 review page. While Review is helpful, I'm looking for the file that I would upload to our server so learners can view the SL360 content from our website (or mobile app) on their tablet or smartphone.
Based on information on how to publish Articulate 360 for mobile devices, I think web output is still the publication option we should select, and we should still link to the uploaded .html file (we don't want users to download and don't need Flash). If that's the case, I guess I'm still waiting for some indication of where in the app.min.js file the play button can be suppressed for iOS devices.
You'll want to choose the option below Articulate 360 which is the Web option, and once you do that you can also choose to publish with HTML5 only. The tutorials here should walk you through it. As for the suppression of that play button, I'll leave that up to the community to offer some advice and assistance on!
Hello Nicolas - modification of the published output is not something we can offer assistance with.
As Ashley mentioned above, hopefully the community will be able to assist. Perhaps one of the users above even figured out a way and can chime back in.
Is there a solution here? In the test environment in the browser playing the sound, but on the device (iPad or Nexus) does not work. Does something have to be loaded before triggering onStart?
- Storyline 360 v3.15.15581.0
- iOS 11.3 with Safari and Android 7.1. with Chrome
- Server Apache
- client Firefox 59.0.3
When I call the application on the devices with the start button, it
plays the audio. If I call up the custom script page as described above,
there will be no sound.
If I call the adapted script with the Firefox from the server, the
soundtrack will also be played.
I also tried it with Firefox on the iPad, it's the same behavior.
The custom script above to remove the play button isn't something I can help with.
But it's worth noting that browsers like Safari and Chrome have started to block the autoplay of media by default, so that play button has been even more instrumental in ensuring that the user is interacting with the content and would like the audio to play.
I have to imagine the changes in autoplay are likely impacting the previously created script too.
It would be good if you could customize this start screen with the
button, so harmoniously fits into the presentation. So that I can define
my own wallpapers and click areas, etc., because that's how I end up on
the start button and then on my own start screen on which I have to
press start again.
Thanks for that additional feedback. I also wanted to let you know that Chrome has rolled back (temporarily) some of the autoplay changes with audio only. You can read about that here, so it'll give you a bit of breathing room while you update your courses with audio on the first slide.
With the new Modern Player, I don't get the HTML5 play button on the opening screen IF the course does not contain audio or video. However, if the course contains audio or video ANYWHERE in the course, the play button appears on the opening screen. We don't use any audio or video on our opening screens so we don't want the button... The Modern Player's javascript must be testing for media somewhere, any ideas where? I'd really like that button to go away!
95 Replies
Hi Mary
what was the code in the js file you are looking to edit. I've found a story.js file in the published output but not sure what you are editing
Hi Wendy -
Thanks so much for responding. See below for more details.
In SL2, if you selected Web Publication and checked HTML5 only, the published output had a mobile folder. Within that folder, there was a player_complied.js file. Within the body of that file, it was possible to locate and change the setting of populateIOSLaunch to remove the need for the user to have to click a Play button to initiate the start of an interaction on an iOS device ( avoiding multiple clicks to just get the mobile user started). This solution only works if the first slide is NOT a video, so we adjusted our SL2 content accordingly.
However, in SL 360, that player_compiled.js file no longer exists. Instead, according to Articulate Support, the automatic display of the white screen and play button for iOS is controlled by the app.min.js file, which is referenced as a link source in the last lines of the story_html5.html . I've been able to open the app.min.js file, but the setting of populateIOSLaunch is no longer used. Because the file in minified, our developers are having difficulty determining what part of the code is actually controlling the Play button for iOS.
I thought about using the new responsive player, but my understanding is that it doesn't support JS - which we use extensively to both pass variables between SL interactions and the underlying database, and to notify the event listener on triggers associated with the user completing / cancelling out of the interaction.
Unfortunately, for now, the user experience for an iOS mobile user using Articulate 360 file isn't on par yet with our SL content. If you or anyone else has a workaround or solution now that we've moved to SL 360, I'd welcome it.
Mary
Hi Mary,
Although I can't help with the code modification I did want to make one distinction that the new responsive player within Storyline 360 is different than the Articulate Mobile player. The latter is what doesn't support Javascript as detailed here. The responsive player is what you're seeing when you view the HTML5 output on a tablet or mobile device.
Storyline 360’s HTML5 output and new responsive player give learners the best viewing experience on tablets and smartphones, making Articulate Mobile Player (AMP) output unnecessary, unless learners need to download content for offline viewing or your course includes FLV videos with alpha-channel transparency, both of which are supported in AMP.
Hope that helps clarify that piece and that someone else in the community can help with those code adjustments!
Hi Ashley -
Thanks for replying. Great news about Storyline 360 output supporting Javascript.
I'm trying to confirm my understanding of the new Storyline 360 published output, and maybe you can help. In SL2, we used the Publish to Web output option. We uploaded the story_html5.html file to our web server (or app server) and then created a link on the website page (or app screen) that launched the story file for the user to view from their laptop, tablet or smartphone.
If we select Storyline 360 as the published output type, the file is then published to Articulate 360. From the published message dialogue, I'm provided with a 'View Project Link', which - when clicked - launches the Articulate 360 review page. While Review is helpful, I'm looking for the file that I would upload to our server so learners can view the SL360 content from our website (or mobile app) on their tablet or smartphone.
Based on information on how to publish Articulate 360 for mobile devices, I think web output is still the publication option we should select, and we should still link to the uploaded .html file (we don't want users to download and don't need Flash). If that's the case, I guess I'm still waiting for some indication of where in the app.min.js file the play button can be suppressed for iOS devices.
Let me know if I'm on the right track!
Hey Mary - you are correct and you should still publish to the web as you mentioned.
Hopefully someone in the community will be able to assist you with that modification, as we do not support the modification of published output.
Hi Mary,
You'll want to choose the option below Articulate 360 which is the Web option, and once you do that you can also choose to publish with HTML5 only. The tutorials here should walk you through it. As for the suppression of that play button, I'll leave that up to the community to offer some advice and assistance on!
Just want to see if there is an update for this post.
Found a solution for the play btn?
Hello Nicolas - modification of the published output is not something we can offer assistance with.
As Ashley mentioned above, hopefully the community will be able to assist. Perhaps one of the users above even figured out a way and can chime back in.
After a lot of trial and error I found a workaround with a mousedown event. However its quite complicated.
I will do a post tomorrow to explain it.
Thanks Nicolas. Looking forward to it.
This worked for me:
search in app.min.js for
MobileStartOverlay:function()Right after the text that reads
var c=a("polyfills/detection");type this:setTimeout(this.onStart, 1);The final line should look something like this:
... MobileStartOverlay:function(){var c=a("polyfills/detection");setTimeout(this.onStart, 1);return b.createElement ...Tested and working better than sl2's solution for this so far.
Thanks alot!
Glad to hear it Nicolas :) Thanks for popping in with an update.
Thanks Mike,
This worked for me but with a few changes.
My final line looks like this:
"MobileStartOverlay:function(){var i=e("polyfills/detection");setTimeout(this.onStart, 1);return t.createElement..."
This post was removed by the author
Thanks Mike ! Sometimes the text to search is
var i=e("polyfills/detection");well this works.... but the audio is totally off ...not synced to slide timing.
Is there a solution here? In the test environment in the browser playing the sound, but on the device (iPad or Nexus) does not work. Does something have to be loaded before triggering onStart?
Hi Jens,
This discussion is just a bit older. Are you using the code above to play audio? If so, I'll have to rely on the community for help!
If you have audio inserted on your slides that isn't playing on your mobile devices, can you share a bit more about your course?
Hi Ashley,
thanks for the feedback.
My Environment:
- Storyline 360 v3.15.15581.0
- iOS 11.3 with Safari and Android 7.1. with Chrome
- Server Apache
- client Firefox 59.0.3
When I call the application on the devices with the start button, it
plays the audio. If I call up the custom script page as described above,
there will be no sound.
If I call the adapted script with the Firefox from the server, the
soundtrack will also be played.
I also tried it with Firefox on the iPad, it's the same behavior.
Why?
Mit freundlichen Grüßen aus Lindau
Jens Scharf
Technische Dokumentation
Hi Jens,
The custom script above to remove the play button isn't something I can help with.
But it's worth noting that browsers like Safari and Chrome have started to block the autoplay of media by default, so that play button has been even more instrumental in ensuring that the user is interacting with the content and would like the audio to play.
I have to imagine the changes in autoplay are likely impacting the previously created script too.
Hi Ashley,
okay, bad news.
It would be good if you could customize this start screen with the
button, so harmoniously fits into the presentation. So that I can define
my own wallpapers and click areas, etc., because that's how I end up on
the start button and then on my own start screen on which I have to
press start again.
Mit freundlichen Grüßen aus Lindau
Jens Scharf
Technische Dokumentation
Agree I would like to see this aswell. You cannot give it the look of the presentation
I would like to see some more options
Hi Jens and J,
Thanks for that additional feedback. I also wanted to let you know that Chrome has rolled back (temporarily) some of the autoplay changes with audio only. You can read about that here, so it'll give you a bit of breathing room while you update your courses with audio on the first slide.
With the new Modern Player, I don't get the HTML5 play button on the opening screen IF the course does not contain audio or video. However, if the course contains audio or video ANYWHERE in the course, the play button appears on the opening screen. We don't use any audio or video on our opening screens so we don't want the button... The Modern Player's javascript must be testing for media somewhere, any ideas where? I'd really like that button to go away!