HTML5 Experience and Fixes

Recently updated several projects to ensure they worked in HTML5.  Found the following issues and fixes. Posting here in the hopes that it helps other people.

HTML5 Issues/Concerns

·         A video may not play automatically (can set the video to triggered-in video edit, and then add a trigger for the video to start at 0.25 seconds, or for the video to be triggered at timeline start)

·         Images may hide clickable elements even if they are not on the slide at the time of clicking.

·         Groups of images/text may not work correctly.

·         In Chrome the visited state may not be shown. This may be caused by layers with the “Hide objects on base layer” checkmarked. Can also add a trigger that changes the state to visited when the item is clicked on.

·         Drag and drop activity may not tile/random correctly.

·         Scroll pane on slide/layer may not work in HTML5.

·         No hover, does not work on mobile well.

·         On base slide video can play automatically, for video on layer have a trigger (trigger can be when timeline reaches a specific time moment or cue, or at timeline start).

·         Cannot click on base layer once having gone to a layer. (https://community.articulate.com/discussions/articulate-storyline/base-layer-clicks-prevention-conflict-on-show-layer-in-html5 - fix by unchecking “Prevent the user from clicking on the base layer")

·         Glow may be hard to see on a smaller screen.

·         Images may be delayed because they are loading as audio plays.

·         May get an error that says, “problem occurred with this web page so it was reloaded “ – this seems to be an issue with mobile Safari and its  limitations - https://community.articulate.com/discussions/articulate-engage/a-problem-occurred-with-this-web-page-so-it-was-reloaded-iphone-and-ipads - Performance of HTML5 content on an iPad/iPhone will be affected by mobile Safari's limited resource allocation. The responsiveness of the content in mobile Safari will generally be slower than desktop browsers. Some courses may not play properly and may even cause mobile Safari to close unexpectedly - https://en-uk.articulate.com/support/engage-13/html5-content-is-slow-or-doesnt-work-in-mobile-safari-en13

·         Audio and Video on the same slide/layer may not work in Google Chrome for HTML5.

·         Audio will randomly drop out - https://www.articulate.com/support/storyline/audio-or-video-is-missing-in-mobile-safari Also had a few issues with audio overlapping at random times.

·         In HTML5 grouped objects may not show as a “hand” even if the item is interactive.

·         In HTML5 objects that are partially transparent may not be clickable/interactive in the transparent sections.

 

Recommendations HTML5

Articulate Storyline has approved browsers when it comes to playing content.  In HTML5 Google Chrome and Mobile Safari are the supported browsers (https://en-au.articulate.com/support/storyline-2/system-requirements-for-articulate-storyline-2

Slide Design

·         Shorter slides, less layers.  HTML5 content loads for each slide – swirling circle, and the more content on the slide, the longer it will take to load.

·         Ensure any clickable item is at the top of the timeline (so no image may prevent clicking on it in HTML5, as transparent images may be blocking access to clickable items).  For clickable content best to have a new slide just for that content.

·         No hover activities.

·         Grow animation may animate oddly. Change animation to Fade if it grows oddly.

·         Glow may be hard to see on a smaller screen. For interactive activities use different colors for normal and selected – much easier to see on a small screen.

Drag & Drag/Interactive Activities (Mobile)

·         Any drag and drop activities should have a specific drop location with only one item associated with that drop location (as tile/random/free does not always work).  Tile with drag and drop seems to work best with text boxes only.

·         Create objects that are finger sized, if fingers will be touching/clicking/moving them.

·         Ensure lots of space around interactive items as you don’t want participants to accidentally touch another item. Also remember that the previous/next buttons need space if the interactive items are near these buttons.

·         Ensure target area is spacious, with a good amount of room for each item on the drop target.

Multimedia

·         Web optimize video. (Can use Handbrake to do this https://handbrake.fr/)

·         Place videos and keep them on the base layer.  If placing a video on a layer have the media play from a trigger.  Do not have the slide/layer move automatically at the end of a video, as on the iPhone the video “pops” to play full screen and may not be in tune with the timeline. (https://en-uk.articulate.com/support/storyline/sidebar-video-plays-full-screen-in-html5-output-on-iphones)

·         No video and audio on the same slide/layer overlapping each other, or one or both will not play.  Mobile safari cannot play two media simultaneously -http://www.ibm.com/developerworks/library/wa-ioshtml5/index.html

Workarounds

·         Hidden state may hide in HTML5, but the image may be transparent and block clickable items.  In this case use the “Disabled” state, and delete the image/item in the Disabled state to ensure it does not interfere with clickable items.   https://community.articulate.com/discussions/articulate-storyline/target-object-is-not-hidden-on-drag-and-drop-in-html5

·         Cannot click on base layer once having gone to a layer. (https://community.articulate.com/discussions/articulate-storyline/base-layer-clicks-prevention-conflict-on-show-layer-in-html5 - fix by unchecking “Prevent the user from clicking on the base layer" – use a hotspot at the bottom of the layer to prevent participants from clicking on the base layer.  Interactive Activities/Quizzes usually checkmark the option “Prevent user from clicking on the base layer.

·         When item objects on a layer that are coming through from the base layer, the hidden base layer objects may not disappear. May need to hide items on the base layer with an object on the layer in question.

·         States won’t change on slide.  Try unchecking “Hide Objects on Base Layer” – use a rectangle at the bottom of the layer to hide the base.   

·         Can use Articulate Replay to mute EN audio on a video and add a different language audio and then combine them into one media file (to deal with two media not playing at the same time).

25 Replies
D K

Another help. What worked for me was adding a "hover" state to the images in question.

·         If having issues with mouse hovered over not working on hidden text/state, try unchecking “Restore on mouse leave”.  Or edit states and add “Hover” state with images/text added there. https://community.articulate.com/discussions/articulate-storyline/triggers-mouse-hovers-over-object-not-working   Other options for mouse over hover not working - https://community.articulate.com/discussions/articulate-storyline/hover-over-trigger-going-to-base-layer-not-selected-layer#212777   https://community.articulate.com/discussions/articulate-storyline/triggers-not-firing-when-using-mouse-hovered-over-as-action 

Ashley Terwilliger

Hi Tess, 

We've fixed a lot of items within Storyline 360 and increased our HTML5 support tremendously! This article includes a comparison of Storyline 360 to Storyline 2, and you can also see all the fixes that were released to Storyline 360 since it's initial launch. 

Have you run into an issue with Storyline 3/360? I'd be happy to take a look at your .story file.

Tess Richardson

Hi Ashley! My main issue is that I'm wanting to repub my Storyline 2 courses in SL3 to take advantage of the improved HTML5 support, but I'm waiting until the SL3 fix is released for the Notes tab text that is cut off along the edge when viewing on a phone. 

In the meantime, I'm running up against some of DK's list of issues with the SL2 HTML 5 output as clients need better mobile delivery.

Rock and a hard place. :\ If I send brownies will the techs work faster to find the SL3 fix? It sometimes works with car mechanics. ;)

Ashley Terwilliger

LOL - I am sure they all love brownies, but I promise you we're already hard at work on fixing things in SL3 and SL360, knowing that HTML5 is a big priority for most folks. 

Depending on priority and risk, some bugs can be fixed quickly, while others take longer to resolve. Here's more information on how we identify and tackle bugs.

I'll keep you posted on the fix! 

Ashley Terwilliger

Hi all,

Great news!  We just released another update for Articulate 360, and included a few important fixes and new features that you'll see in the release notes here.  

The item you'll be interested in is how we fixed an issue where the right edge of notes text could be cut off in HTML5 output. 

Just launch the Articulate 360 desktop app on your computer and click the Update button for each application. Details here.

Please let us know if you have any questions, either here or by reaching out to our Support Engineers directly. 

Malcolm McKinnon

Hi Ashley,

Thanks for following up. I was viewing a course published to Tempshare (viewed in latest Chrome using Windows 10). 

The problem wasn't playing multiple videos as per the article, it was a single video and single audio track. When Flash was disabled, only the video would play. If Flash was enabled, both would play.

I imagine quite a lot of people would encounter this when recording video demonstrations (where a common workflow is to record the audio then record the screen (or vice versa)).

For anyone interested, I've fixed it now by recording the demo and audio separately in Captivate, publishing as a single MP4, then importing the MP4 into SL2. 

Ali Goulet

Hey Malcolm-

I'm glad you were able to find a usable workaround, but I'm also happy to continue investigating this with you.

There's an HTML5 issue similar to this on our radar for Storyline 2 that happens if the video is on mute- the inserted audio on the same slide won't play. Does that match what you're experiencing?

If that isn't the case for you, would you mind sharing an example .story project file where this issue is happening so I can do some testing? You can add it as an attachment to a comment here.

Thanks for letting us know about this- and I'm sorry that it slowed down your workflow. 

Malcolm McKinnon

Hi Ali,

Yes, I think that's what was happening - with the video on mute. I logged a support case the other day (#01107175) so it's being investigated. It's not a problem for this project now, but it's certainly handy to know for future reference.

Thanks very much for the prompt responses and follow up!

Ashley Terwilliger

Thanks Malcolm, and I wanted to share the workaround Ryan provided for anyone else who comes across this discussion, using Storyline 2:

It appears that the issue occurs when viewing the HTML5 version of the course. The issue appears to be caused by the video on your file. I noticed that the video is on Mute and you've added the audio file. As a workaround, remove the audio and unmute the audio on the video on the slide. 

We'll keep you posted here, or Ryan will share information in your case. Thanks!

Karen Siugzda

I'm experiencing a similar issue that's been mentioned. (I'm using Storyline 2)

I have several images on the base layer that are not working correctly in HTML5. When I mouse over them, the hover state does not appear, and the cursor does not change to the hand icon.

Each image has a Normal, Hover, and Visited state.

Once clicked, the images DO show the intended layers properly and the Visited state does appear correctly.

Are there workarounds for the hover images not working and the hand icon not appearing?

thanks.

Karen Siugzda

Hi Ali,

I'm attaching a sample file here.

When I published this it works fine in IE (flash version) but in Chrome (HTML 5 version) I experience these issues:

  1. No hover state showing
  2. No hand icon on hover
  3. Clickable area is limited to the colored parts of each image (In IE, the entire cog graphic, center area and all, are clickable)

I use images as "buttons" in numerous places so fixing this bug would be extremely helpful.

I'm currently using a work-around to get the hover state to appear by placing the graphic as a picture fill, but that comes with its own rendering issues AND doesn't fix the issue with no hand icon appearing so I'd rather NOT resort to this method.

Of course, everything works perfectly in Preview, so I didn't find this bug until way into the process...

Thanks for your help.

 

Alyssa Gomez

Hi Karen,

Thanks so much for sharing your file. I'm seeing the same thing you're seeing, and I'm going to take this to my team so we can determine next steps. 

As soon as I get more information, I'll pop back in here and let you know. Thanks again for bringing this up, and I'm really sorry it's giving you headaches!

Ali Goulet

Hey Shelly,

Sorry you're hitting that. I'm happy to help!

I have a few questions to nail down the culprit here:

  1. Where are you uploading the published output to when testing?
  2. What browser is this happening?
  3. Can you share a copy of your .story project file here so I can do some testing? You can add it as an attachment right to a comment here.

Thanks for letting us know about this! Keep me posted.

Frank Smith

We run Moodle 3.5.1 using the Adaptable Theme in a Windows environment with VDI zero client terminals

I’ve been using Articulate Storyline 3 to create HTML5 only SCORM packages for use in Moodle

In some of the SCORM slides we have YouTube Videos (Web Objects), and we only show Navigation Buttons at the end of a YouTube Video

What I do is……

1.       Set the timeline length of the YouTube Video (Web Object) to the length in seconds of the Video

2.       Change the State of navigation buttons to ‘Show’ when the Web Object Timeline ends. 

When I preview test, no problem…..Navigation buttons appear on time

However when I put the SCORMs into a production Moodle environment where 20 or more students may be viewing the same SCORM simultaneously, for some students there is a very significant lag in when the YouTube Video (Web Object) ends and when the navigation buttons appear……..

Is this an HTML5 problem, or am I doing something wrong ?

Ali Goulet

Hey Frank!

Sorry your learners are running into that-- let's get to the bottom of it.

Have you tried giving your course a spin in SCORM Cloud to see if the same behavior happens there? That'll give us a better idea whether the issue is file related or limited to Moodle. 

If you share your .story project file, I'm more than happy to help with testing! You can add it as an attachment right to a comment here in the thread. 

Thanks! 

Ashley Terwilliger

HI Andrew,

This discussion is a bit older, and looks to have dealt with a fix in SL360 (which would be available in Storyline 3 by now) and some lingering behaviors in Storyline 2, so I'm not sure what exactly you're checking in on?

Can you share any details about the issue you're running into, and I'll be happy to help! Also, it's worth confirming you're on the latest update of Storyline 3, build 3.6.18134.0