Separate HTML5 and Flash output

Hi Vince, 

I'm not quite sure how you'd do this. Even if you created two separate courses, provided an option for the user (one that allows them to choose how they'd like to view the course), you'd need to insert the courses as web objects and they'd have to be hosted separately. 

How you linking to the course for the users? If you're putting the link for the course into a web page or even in an email, you could always just link to both courses, allowing the user to choose. Again, obviously, this isn't putting them into one course, but it may work for you, depending on how you're sharing the content. 

Maybe some of our community members can give you some additional suggestions that will work for you. If you find any additional methods or ideas, please share!

Thanks for the response, Christine.

The basic objective is for users to access the course through the LMS and have it launch the Flash or HTML5 version based on the user's device. From my understanding, this is what normally happens, but right now it takes the appropriate version from the same published Storyline output. What I am asking is if you can have a single package with different Storyline output, one for Flash and one for HTML5.

Again, I doubt this is possible, but I am trying to think of some kind of workaround for the HTML5 issues with Storyline.

Hi Vince,

Ahhh, I'm sorry about that. I misunderstood. Yes, if you select both options and publish, the course should detect what device the user is using and display that version of the course. So if you choose both HTML5 and the Articulate Mobile Player options, for example, and the learner launches the course on an iPad, the learner will see the Articulate Mobile Player output. If the learner launches the course on their desktop, they'll see the normal output. 

However, keep in mind that not all devices are supported. Android devices, for example are not currently supported by Storyline. You may be able to work with this a bit to get the course running, but this isn't something that's built-in to the software.

How are you having your learners access the HTML5 content? If they're viewing it on an iPad and you use the AMP app to view the course, the HTML5 issues shouldn't apply. 

Hi Christine,

At the current moment, our LMS does not support Tin Can API so the Articulate Mobile Player is not an option unfortunately. Our iPad users can access the course with their browser app (usually Safari, sometimes Chrome, or possibly others) and it launches the HTML5 content. Like I said, Storyline HTML5 output is not working as well as Flash. There are quite a few issues, and our team has been in contact with support about these issues.

We understand resolution of these issues will take time and may not even be possible in some cases, so we are looking at some workarounds. It would be great if we could publish the full Flash version for desktop users, and then be able to edit certain things to publish a different HTML5 version for iPad users that avoids the HTML5 issues. Of course, we would then need to somehow combine these in a single LMS package for delivery. Is that possible?

Thanks again.

I don't think there is an easy way to combine two separate modules into the same LMS package.   If you want to offer a rich Flash version and a scaled down html5 version, the simplest thing to do would be to create two packages and then provide instructions to the users.

It is not elegant but it would get the job done.

Hi Nancy,

I thought that would be the case, but just wanted to double check. I will have to figure out what to do from here.

Thank you!

Hi Vince, can you give us some insight into what kind of things aren't working for you in the html5 output.

I've been able to get single versions of my modules to run fine in both Flash and html5 - there are always a few glitches with this but you can usually design around the issues without having to resort to 2 versions.

There are some exceptions to this, but in general it can be done. Maybe the next step is to look at how you are designing your modules to see if you can make some adjustments that will enable you to avoid creating 2 versions.

That's a good point Christine. It would be nice to redesign the modules to avoid some of the HTML5 issues, but the problem is there are a few of them that are quite important to the overall fuctionality we look to provide our users. Below are some of the HTML5 issues our team is seeing:

Again, just to note, all of these issues have been submitted as support cases.

Just a thought. I found this thread regarding detecting if the user is using the Articulate Mobile Player and storing that in a variable (http://community.articulate.com/forums/p/25134/138184.aspx#138184)

Would it be possible to somehow detect if the course is being viewed in HTML5 vs Flash? That way I could still have a single course, and yet I could branch to certain slides to avoid the HTML5 issues?

That's an interesting question. - The story.html page has some code in it that detects whether the browser supports html5 and if it does redirects as follows:

else if (g_bUseHtml5)
 {
  var strLocation = "story_html5.html"; 

You can pull data into Storyline using JavaScript so you may be able to use player.SetVar to check if  g_bUseHtml5 is true and then use this info to branch them to a different set of slides.

If you are going to do this then you also have to prevent storyline from redirecting to story_html5.html in first place - probably the easiest way to do this would be to change var strLocation ="story_html5.html"; to var strLocation = "story.html";

Hi Nancy,

I think its worth a shot. I'm in the process of setting it up to try. Could you quickly tell me exactly how I would be able to pull the g_bUseHtml5 variable from the story.html file and store it as a variable in Storyline using Javascript.

Thanks!

Vince

I knew you were going to ask me that. I don't know offhand. I'd have to spend some time playing around with it. My JavaScript skills are only good enough to be dangerous. Try reaching out the Steve Flowers, Phil Mayor or Sam Clark in this community. They might be able to help you out.

Will do. Thanks again, Nancy!

Unfortunately many core features of Storyline do not work in HTML5, and there is no indication from Articulate that fixes will be coming forth at any time.  It would be helpful if critical bugs were documented so newcomers wouldn't have to discover the bugs on their own.

My two cents on solving your problem is to steer away from any feature that does not work correctly in HTML5 and Flash.  By omitting features that do not work in both media formats, you can test your course in HTML5 and be reasonably confident that it will play the same in Flash.  A 20 minute course requires repeated testing before release.  Doubling the testing is time I can't afford.  Not to mention that branching adds complexity, and complexity will add additional bugs.

Enough!  If you must know that you are running on an IOS device and need a variable set in Storyline to reflect that, here you go:

function setIOS() {

'use strict'; // This script is JSLint verified

var iIos = parseFloat(('0' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,''])[1]).replace('undefined', '3_2').replace('_', '.').replace('_', '')) || 0.0; // if 0.0, not IOS

// Assign iPad version and IOS version values to Storyline environment

if (iIos > 0) {

GetPlayer().SetVar("iIos", iIos);

}

}

setIOS();

1 - You must declare the variable iIos in Storyline as a numeric with a default value of zero.

2 - iIos is declared numeric because Storyline has a bug with True/False in HTML5, otherwise, I'd have used True for IOS devices.

3 - Any time iIos is greater than 0, you are running on an IOS device.  Branch if you must.

This code doesn't test for a desktop browser running HTML5.  That's another story, no pun intended.

Sam

One other way to check for HTML5 is to retrieve the variable player.isHTML5. In Flash it'll return undefined. In HTML5, it'll return true.

var sPlayer=GetPlayer();

if(player.isHTML5){

sPlayer.SetVar("playerType","html5"); //assumes you have a SL variable called playerType

}else{

sPlayer.SetVar("playerType","flash"); 

}

So using this setup, if you set the playerType to ios by default you should be able to successfully detect which player type is being used whether it's the AMP, HTML5, or Flash based player.

That's great stuff. Thanks Sam and Steve.

Both of these methods work for what they are intended. It is definitely useful to be able to detect the user's environment. However, using that ability to avoid HTML5 issues creates more development work and it doesn't really provide enough value to justify that work. Going forward, our team is developing primarily for Flash output and recommending Flash-enabled browsers for iPad users.