HTML5 Experience and Fixes
Feb 19, 2016
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
Sharing this kind of valuable information is what makes the Heroes community so great. With the imminent demise of Flash let's hope that Articulate focuses their attention on improving HTML5 playback and moves Flash to a fallback option. Thanks 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
Many thanks for the information and ideas you have shared, D K -- much appreciated! And, if you would like to share your thoughts with our Product team, you are always encouraged to do so using this form. :)
Thanks for this list, D K! Does anyone know which of these issues are resolved in 360/Storyline 3?
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.
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. ;)
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!
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.
Is there still a known issue with playing audio and video simultaneously in HTML5 output?
I have a slide with both audio and video. When Flash is enabled, it works fine, but with HTML5 only the video plays. I'm using SL2.
Any ideas on what to do?
Hi Malcolm,
Can you tell us more about where and how you're viewing the HTML5 output to see this?
As, it sounds like you're referring to the issue here? You may also find some slowness based on the iOS version and iPad/iPhone version you're using described here.
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.
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.
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!
Thanks for that info, Malcolm!
I've added this thread to our report for this issue, too. If we have any news to share about it, you'll be notified right away. 😊
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!
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.
Hey Karen!
Thanks for popping in here with your experience-- I'm sorry you're hitting that!
Can you share a copy of your .story project file so I can take a closer look at what's happening? You can add it as an attachment right to a comment here.
Thanks again!
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:
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.
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!
Any workarounds for videos not playing and buttons not working on the initial load (all on base layer), but everything working fine when you right-click and reload the page??? urghhhhh...
Hey Shelly,
Sorry you're hitting that. I'm happy to help!
I have a few questions to nail down the culprit here:
Thanks for letting us know about this! Keep me posted.
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 ?
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!
When will there be a fix for SL3?
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.
This discussion is closed. You can start a new discussion or contact Articulate Support.