«

»

Jul
24
2013

How to hide the Articulate Storyline HTML5 launch page on iOS/iPad

Storyline iOS Launch Page

When launching Storyline HTML5 courses from iPad, have you noticed an intermediate launch page with a ‘Play’ button before the actual course loaded? Ever wondered what the purpose of it is and why it comes up only for iOS?

Here is the reason – iOS does not support HTML5 autoplay attributes for <audio> and <video> tags. This means any web page with audio or video elements cannot self-start without user interaction (like tap to start audio or video).

 

For example, refer this page with an HTML5 audio tag. This page includes a piece of audio which would start automatically when launched from PC. But when you access this link from iPad the audio will not start until you play it.

 

Articulate Storyline iOS/iPad launch page

Storyline Course iOS Launch Page

 

This restriction is imposed by Apple to save the bandwidth on the cellular networks.

Additional details about this restriction can be referred at the apple site here (if you are interested)

 

Articulate Storyline Hide HTML5 Launch Page

 

So Storyline product makers decided to add this launch page (with a play button) at the beginning of HTML5 course on iOS. This way, if the course contains audio or video elements they will start playing automatically without user any interaction.

However, you may not need this launch page for all scenarios.

Some examples,

  • Your course already contains some user touch interaction at the beginning (say a begin button on the very first slide)
  • Your very first slide do not have any audio or video and the user is required to tap on the next button to load the next slide with audio/video
  • When your course do not have any auto played audio or video

So if you have one of the scenarios above and you want to skip this launch page completely there is a trick. This was suggested by one of the community member in the storyline forums.

 

The trick requires a small code change after you publish your content.

Here are the steps:

  • Open the storyline_compiled.js (under mobile folder) in a text editor
  • Search for exact code player.populateIOSLaunch();
Storyline iPad Start Screen

Before Edit

??

  • Insert this piece of code after the code above as player.populateIOSLaunch();player.revealPostInterstitial();
Articulate Storyline Tricks

After Edit

??

  • Now save and close the file

 

Now if you launch the course on iOS/iPad the course should launch directly without a launch page.

As an additional info, when the course is resumed during a later attempt, the launch page will not appear even without making the code change suggested above. This is because the user is promoted to resume or start the course from the beginning. So the user is forced to choose (tap) a response.

Before you make your hands dirty with this trick:

  • Please note, you are editing the HTML5 published file. So you will have to make this change every time after you publish
  • Do not apply this trick when your course has any self-playing audio or video elements on the very first page

 

[Update 12/19] With storyline update 4, the files are slightly changed. If you are using HTML5 standalone(Web) publish then you will have to make the steps explained above to??player_compiled.js??instead of??storyline_compiled.js. If you are using LMS publish (e.g. AICC)?? then the steps explained above still applies.

[Update 1/23] If you are using the latest version of storyline build ??update 4: 1311.1422??(as of today 23-Jan-2014) ??then you can download the tweaked player_compiled.js file from this link and replace into your version to hide this iOS launch menu.

 

Did you find this post useful? Feel free to share your feedback in the comments area.

You can find more interesting posts from us on the??post index??section

If you are interested to be notified for the new posts from us, then you can make use of the subscribe option available on the right sidebar.

 

14 comments

  1. Leslie Shapiro says:

    This solution worked perfectly for me with an html5-only publish, playing on iPad. However, in the publish I just did today, the launch screen reappeared. I’m using the exact same edited js file that I had before, and the interstitial command is there. Any idea what gives? (Storyline update in the last couple of weeks have anything to do with it?)
    Relevant text from my storyline_compiled.js file is below.

    ‘);$(document.body).prepend(player.launch);
    player.launch.show();player.launch.find(“a”).first().click(player.revealPostInterstitial);
    player.populateIOSLaunch();player.revealPostInterstitial();

    if(500>window.innerWidth){var a=player.launch.find(“.screenshot”)

    1. electron says:

      I have noticed that with Update 4, storyline introduced a new player JS – player_compiled.js

      I have noticed player_compiled.js is used with HTML5 standalone version and storyline_compiled.js used with HTML5 LMS version (no idea why they did so!).

      So the bottom line – if you are using the html5 only publish then you will have to make changes i have explained on the player_compiled.js rather than storyline_compiled.js that should work hopefully!

  2. Kane Barrnet says:

    How about editing this page? Some parts (bg colour) appear in the mobile\player.css file but where can you edit the page size and the button ? Any ideas

    1. electron says:

      Hey Kane,

      On storyline_compiled.js few lines before the code player.populateIOSLaunch(); you will see how this page is structured –

      $(‘<div class=”launch”> <div class=”launchwrap”><div class=”container”><div class=”launch_meta”><h1/><p/><a class=”button”” title=”play” rel=”nofollow”>Play</a></div><div class=”screenshot”><img/></div></div></div></div>’);

      You can try hardcoding some Width or Height values to adjust the div size of the container here to override the defaults

  3. Leslie Shapiro says:

    Thanks for your help. I wondered if the second .js file might need editing too. Interesting that one is for html5 only, and the other for LMS. I will definitely try this fix and report results back.

  4. Steve says:

    Hi,

    I was successfully using this hack for the ipad until Articulate issued update 4: 1311 1422

    Tried it to storyline_compiled.js and the player_compiled.js to no avail.

    My client is a bit miffed now as they do a lot of there everyday work on the iPad..

    Any other ideas?

    Cheers,

    Steve.

    1. electron says:

      Hey steve, I have created a tweaked version of player_compiled.js and added a download link on my post. You can try replacing this file into your build and try again to hide the iOS launch page.

  5. Hans Dulpers says:

    Dear Electron,

    I did all the steps you have supplied but I somehow (apparently) messed up somewhere. When I open the page on my iPad, it shows the preloader and then nothing. The same applies to browsers on computers.

    1. Hans Dulpers says:

      Dear Electron,

      My bad! I didn’t put in a play button. It is working perfectly now, thanks!

      Kind regards
      Hans Dulpers

      1. electron says:

        Hey Hans, thanks for the feedback, Glad to know it helped!

  6. Steve says:

    Great explanation and expansion. I would have linked to the original forum post though:)
    http://community.articulate.com/forums/p/19353/114590.aspx#114590

  7. laszlo kovacs says:

    Dear Electron,

    Articulate has just released it’s latest update and the new fix stops the launch screen but the SCORM won’t fit in in the player window any more.

    1. electron says:

      Thanks for sharing Laszlo!

  8. Leon says:

    Any advice on how to remove html5 launch page on Storyline 2? Tried to follow these directions, but they don’t seem to apply. Any help would be greatly appreciated.

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>