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.
· 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.
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)
· 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.
· 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
· 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).