Separate HTML5 and Flash output

I am wondering if it is possible to publish separately for Flash and HTML5 and then somehow combine the output into one package to load into the LMS.

Storyline and HTML5 output still have some issues so it would be nice to publish a full Flash version, and then somehow a seperate, simplified HTML5 version (edited to avoid HTML5 issues), and combine these into one LMS package. Seems like something that wouldn't be possible but I'm curious.

16 Replies
Christine Hendrickson

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!

Vince Pileggi

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.

Christine Hendrickson

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. 

Vince Pileggi

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.

Nancy Woinoski

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.

Nancy Woinoski

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.

Vince Pileggi

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:

Menu auto-collapse Navigation menu does start collapsed and also does not auto-collapse as the user progesses
Click to zoom images Freezes the course when opened, no option to shrink back to original size shown (specific to Mobile Safari in iOS)
Seekbar Does not work in Mobile Safari for iOS, freezes and does not show progress through slide
Layer triggers Clicking to open a new layer instead restarts the entire slide (related to use of seekbar)
Quiz retry Retry quiz button not working, specifically "reset results" trigger. (related to use of quiz bank)
Quiz feedback Not choosing an answer and pressing submit button causes an error

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

Vince Pileggi

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?

Nancy Woinoski

Vince Pileggi said:

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";

Sam Carter

Vince Pileggi said:

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?

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

Steve Flowers

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.

Vince Pileggi

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.