76 Replies
Steve Flowers

If you link directly to the story_html5.html it bypasses the launch screen illustrated in the OP at the top of the thread. You'll still get a "Play button" in the middle of the screen on iOS. See this example on iPad (published a year or so ago so it could have some problems):

https://dl.dropbox.com/u/19820702/sl_beta/wrench%20output/story_html5.html

Modifying your imsmanifest to point to the index_lms_html5.html should get around the intermediary launch page. You'll still see the play button on iOS.

Sam Carter

Steve Flowers said:

Modifying your imsmanifest to point to the index_lms_html5.html should get around the intermediary launch page. You'll still see the play button on iOS.


I've experimented with this as a way of viewing HTML5 content on my desktop (much easier), but this is not a solution for a enterprise-wide course for several reasons.  First among them is this would require deploying two courses (desktop and tablet) on the LMS and tracking two separate completions, in addition to student having to select the right course based on their device, and on and on.

There must be a way to defeat the launch page which seems to be triggered by index_lms.html detecting a tablet environment, then branching to index_lms_html5.html with a parameter to invoke this unwanted launch page first.

Steve Flowers

OK. This is doable. I'm not sure what changes in storylinecompiled.js between publishes but I found something that will automatically jump past the intermediate screen.

After publish, crack open storylinecompiled.js from within your mobile folder (you might be able to save a copy of this to drop into your published folder). Run a search on the contents of this file to find this line. It's all compressed together so you'll want to find this little bit within a sea of JavaScript. 

player.launch.find("a").first().click(player.revealPostInterstitial);player.populateIOSLaunch();

After the part that says "player.populateIOSLaunch();" paste in this bit:

player.revealPostInterstitial(); 

Sidenote: There are lots of places you can place this function call. This was the easiest to point to and it seems to work.

Here's what that does - there's a bit of jQuery code in this bit that calls revealPostInterstitial (builds the Storyline player) when the "Play" button is clicked. I am not sure what the side effects of this are but it should have no effect on anything but iOS HTML5 playback.

See it in action here:
http://www.xpconcept.com/testHTML5/story.html

Steve Flowers

A little more digging - storyline_compiled.js isn't compiled at publish time. It's resident in a folder in your Storyline install folder:

C:\Program Files (x86)\Articulate\Articulate Storyline\Content\mobile

That's where mine is. If you want to make this change (***see caveat 1 and 2 below***) permanently to this file and have it affect all publishes you can modify this once.

***Caveats***

1) This is at your own risk. Pretty sure Articulate can't support it and you'll want to remember that you did this (make a copy) in case something else pops up. It might cause other problems so be on the lookout

2) Any audio you use on the first slide probably won't work.

Sam Carter

Steve,

Judging from your in-depth fix for this issue, I am guessing you've use jQuery mobile for other purposes.  Is that right?

I will test this fix over the weekend, right now I'm on another project.  This fix may work for a single client, but in the long run, I'd rather keep my hands out of jQuery mobile and find some other way to apply the same result.  Perhaps by placing a supplemental JavaScript in the publishing folder.

If I find out anything further, I'll post back here.

And by the way, I have no problem adding slide 1 of the course with no audio to fix this issue.  It's a better presentation to the student than a third "click to launch" page.

Steve Flowers

It's a custom / complex framework. The construction of that screen and the player is Articulate specific, not really jQuery Mobile Even if there were a parameter, you'd still need to edit that file or the index file. Easiest just to modify this file. It'll apply to every publish if you modify it in the application folder.

Sam Carter

Brian Batt said:

In order for Safari on iOS to autoplay media like audio or video on the first slide, there must be a user interaction.  Thus, we display a Play page to handle the interaction.  The limitation is only in Safari on iOS, not other Desktop browsers.


There are better ways to handle this within Storyline.  For example, the first slide of a course could display the opening screen and require a play/pause to continue icon.    This screen is under control of the course author and provides clear context that the course is launched (rather than another launch screen).

This seems more relevant when the larger picture is examined.  The forced launch page that Storyline inserts is the third launch in a sequence on an LMS when viewing a course using Safari on an iPad.

Paul Holliday

That is true, if you could point me to the correct setting to do this, that would be great!  It only happens in the html5 version, not the flash version. The css fix is in player.css, line 1832:

.framewrap

{

background:#ccc;

background: #fff;

position:absolute;

border-radius:10px;

/*border:solid 1px #000;*/

}

I have also have to fix a .js issue in storyline_compiled.js to jump past the pointless launch screen.

Why can't these settings be clean, and simple to begin with ? The likely hood that anyone will want to use the default are nil ?

Gonzalo Rosetti

Brian Batt said:

Hi everyone,

In order for Safari on iOS to autoplay media like audio or video on the first slide, there must be a user interaction.  Thus, we display a Play page to handle the interaction.  The limitation is only in Safari on iOS, not other Desktop browsers.


Has anyone heard an official reply from Articulate Storyline staff apart from this one, which was obviously a quick but inefficient attempt as we have seen it was possible after all?

Looking forward to a new update as the HTML5 is a great weakness of this fantastic piece of software.

SL staff keep up the hard work!

Peter Anderson

Hi Gonzalo, 

Brian's response remains the official stance at this time. You're welcome to implement the unsupported workarounds listed in this thread, but we haven't formally announced a way to bypass the welcome screen. 

As HTML5 continues to evolve, so will our ability to improve its output, relying less on things like welcome screens.

Please feel share to any ideas you have directly with our development team here

Thanks!

Paul Burrows

This is a follow up to the user seeing a superfluous HTML5 launch page on mobile devices (this does not involve the iPad Mobile Player at all).  This launch page includes a thumbnail.jpg of the first slide of a presentation, plus a default blue play button.The caveat of course, as noted earlier in this thread, is that a published Storyline interaction should not have audio or video at the beginning of the presentation...and my published tutorials do not.

I followed Steve Flowers suggestion of cracking open mobile/storyline_compiled.js, with these instructions:

  • After publishing, crack open storylinecompiled.js from within your mobile folder (you might be able to save a copy of this to drop into your published folder). Run a search on the contents of this file to find this line. It's all compressed together so you'll want to find this little bit within a sea of JavaScript. 
  • player.launch.find("a").first().click(player.revealPostInterstitial);player.populateIOSLaunch();
  • After the part that says "player.populateIOSLaunch();" paste in this bit:

player.revealPostInterstitial(); 

  • Sidenote: There are lots of places you can place this function call. This was the easiest to point to and it seems to work. 
  • Here's what that does - there's a bit of jQuery code in this bit that calls revealPostInterstitial (builds the Storyline player) when the "Play" button is clicked. I am not sure what the side effects of this are but it should have no effect on anything but iOS HTML5 playback.

Knowing full well that to test such a thing, one needs to clear all caches in the web browsers on mobile devices (iPhones, iPads, etc.)  Otherwise you may never see the desperately desired results.  By the way, the interstitial HTML5 launch page seems to only occur the first time a user launches a Storyline interaction on a mobile device.  Thereafter, in my testing, the user jumps straight to the interaction without the interstitial launch page.  A caching thing?

Be that as it may, Mr. Flowers suggestion worked!  Like others in this thread, I did not want our users to launch, then launch again just to see a Storyline interaction, particularly in my case where there will be dozens an dozens of individual Storyline published interactions as part of the final project.

It took a while to finally find this thread (I searched for "HTML5 launch screen").  But thanks to Mr. Flowers (indeed my Super Hero today), I can deliver a better user experience to my client.

Cheers to all you smart people in Storyline land.  

Paul

Orson Kellogg

So...... I had a trial version of Storyline before, and the forced opening screen thing in iOS was the biggest reason I did not get a license. I'm producing interactive content for a website, not training, and don't want anyone to have to click through an intro screen to get started. It's just not done, and tools like Tumult Hype and Hippo Animator -- much less powerful, I grant -- do not require this. 

Have people tried the solution marked as "Suggested Answer" from Steve Flowers and found that it works? I have no way of testing myself.

Orson