HTML5 Presentation Not Playing Properly in Recent Chrome Updates - How do we get around being a slave to browsers?

Report · Mar 16, 2018

This issue is cross-posted in the Google Chrome forum, but I haven't gotten any hits on it since posting it this morning.

Recent updates to Chrome (e.g. any 64-bit version at or above v64.0.3282.186) make my web-based training files appear broken. I publish to HTML5 using Captivate 2017. On our locked-down domain, we're stuck on Chrome 32-bit v64..., and the training works great.

The major issue with how the training plays in Chrome is with audio clipping. Let's say I'm on slide 5, and the audio is 30 second long. 25 seconds of the audio will play, and the last 5 seconds will be mute. If I rewind and replay slide 5, all 30 seconds of the audio play without issue. This happens randomly. I can practically rule out lag. If I watch the same training over again, slide 5 could play fine, and the issue may occur on slide 6. It never happens twice on the same slide when taking a training.

The other issues are on the display side. The very first title page (used in at least 5 different published trainings ) distorts a single blue box object into a 2-tone blue thing with an ugly light-blue border that doesn't actually exist. Transparencies have a faint gray border. Although these look very unprofessional, I have not found anything which would cause the training to stop or fail.

Unfortunately, my evaluation scores have reflected this, and the result is the lowest training score I've had in six years

The worst part about this? It impacts ALL of my published WBTs, not just the popular one that everybody is playing right now. So, in January, when Chrome was the browser that played the nicest, we sent out a recommendation to learners to use Chrome. I think a good portion of the people that are coming back for the new training are using Chrome based on that recommendation. Now I'm chewing on my foot. The kicker? - If you open up the training from January, it no longer displays correctly and audio clipping occurs. It broke something that already worked really, really well.

Are there any suggestions for how to deal with this browser working/not-working yo-yo? I am frantically trying to add red critical alert boxes to my trainings to inform people of the browser risks, and I can't help but wonder if there's not a better way. Is Firefox going to work tomorrow? IE?

Sorry, I know a lot of this is venting, but I am really interested in knowing how others of you like me out there are getting through this or around this issue... or do you use some kind of generic disclaimer? I'm thinking of trying to run inspectors on the training and see what's different between browsers when it plays, but I'm behind on coding these days. Has anyone tried this, and if so, what were the results?

Report · Mar 17, 2018

No idea, nothing like that ever happened with SWF output. Welcome to that wonderful HTML5 world where every browser is doing what it wants.

Report · Mar 19, 2018

I wish that Google and the others would have decided to get better with HTML5 before shutting off Flash.

Report · Mar 19, 2018

It is Apple who is the dictator.

Report · Mar 17, 2018

Hi, the attached article will provide some guidance. Have a great day.

https://support.techsmith.com/hc/en-us/articles/203730598-Camtasia-Windows-Produced-MP4-plays-on-loc...

Chandra

Report · Mar 17, 2018

Hi Chandra,

Thanks for the suggestion. Unfortunately, this is a browser-based problem. The issues occur whether or not file is played locally or on a server. The file structure includes numerous file types, but the .mp4s that play are not affected, as far as I can tell.

Jen

Report · Mar 18, 2018

That is what I understood from your original mail as well. Up till now I didn't have problems playing projects uploaded to my domain, certainly not in Chrome which is my default browser. I am wondering if it is due to the browser or to the server but am not at all expert about servers. Locally playing is a big problem, unless for very simple projects (which is rarely the case in my situation). Camtasia only leads to mp4, which cannot be compared with output from Captivate. Just for testing, do you have issues with this published movie:

Captivate's Timeline

You can find more examples on my blog, embedded in iFrames. Will publish another one today, based on my presentation about Shared Actions.

Report · Mar 19, 2018

Thank you so much for sharing! I watched some of the Captivate's Timeline training, and the audio (thus far) has played well. However, in the /TimelineBlog portion, the Adv/Actions slide in the Gr_Pause sections has overlapping audio. I'm back to wondering if part of the audio problem is caused by site lag, coupled with how/when each file is used in the production. There's no explanation to why it's only Chrome though. The entire .zip of this package was 20Mb.

In testing the load times of your site (7.2Mb) versus the home page (38Kb login page, no content! - can't test internally due to login) of cornerstone, your publish opened 3 times faster than our Cornerstone login page. It's still strange it's only Chrome that has problems, but maybe Google's changes affected how page elements load. I'm going to try and see if our super-admins have more details on server bandwidth from Cornerstone.

On your publish, I do see phantom blue boxes around some of the button objects (the first, centered play button at the beginning of the project and the linked ones all have a blue box) that do not appear in Firefox. They look like the ones that I have in my project, but mine are grey (my defaults are different). The ones here play in both the 32 and 64 bit versions, though, and mine only appear in the 64 bit version.

Interestingly, on the board game, when it rolled a 6 at the beginning, on my home monitor (1440x900), the game piece was in-between space 5 and space 6, but on my work laptop (32-bit chrome, but 1600x900 res), it showed correctly in the 6 square. I think this may be a screen resolution thing rather than a Chrome version, though.

I have to say thanks again for sending that example video. I just went from Captivate 8 to 2017 in December. I don't remember a loop or a timer ever existing. We have about 20 hours of training to convert to HTML5 this year. I may as well get them up to speed.

(I totally agree about Ctrl-R!!!)

Report · Mar 19, 2018

That centered blue box is a bug in CP2017, it shouldn't show up because I turned that option off, but it does in some browsers. I logged that bug, not fixed yet. I just tried to explain by posting that link thatt the problems can be due to the server or LMS, not necessarily to Captivate.

Overlapping audio is only possible with object audio. f course background audio can play at the same time as any other audio clip, whether slide audio or object audio or audio started with Play Audio command.

Report · Mar 19, 2018

I think there are a few things to try this week to minimize as many issues as possible. I really want to get more into the root of what's happening in the background, but that's not something to attempt for this deadline! I have until Friday to work the bugs out.

To address the audio: I'm adding a dynamic browser warning to each of my web-based training projects - meaning, I'm using a web object to show a simple webpage that provides a timestamped update as to which browser should be used/avoided today. When something critical changes in a browser, I can simply update this one simple page, instead of republishing all 20 projects or mucking with the page descriptions in 3 different places. I wonder how Captivate publishes audio types (e.g., bg, slide, object) to HTML5.
For phantom boxes on white backgrounds: For any object with a stroke of zero, I'm going to make their stroke color white.
For phantom boxes on other bg colors: For my title page fly-in (which worked great as a .swf, grrr) that, I'm going to record it as an .mp4 and play the darn thing that way.

Hopefully this summer I can make the case to do more research on Captivate's HTML5 structure and its playability in browsers. I'll post more if any other problems arise. Because this is my first publish using the PowerPoint linked slides, and the audio is in PowerPoint, I may try to move the audio into Captivate and see how that affects the file. I was hoping to avoid this step, because it's easier to work animation times out in PowerPoint with the audio file there. Maybe I'll unlink the PowerPoint and see what it does.

There's a ton of things to try. I also worry that I'm wasting my time trying to figure out what's going on if something totally different will be broken tomorrow.

Report · Mar 19, 2018

I didn't get that point: audio is from PPT! Sorry about that, is very bad practice. You need to import the audio in Captivate's Library. I neve use PPT not even for the visual items, but would have recommended to take at least the audio out.

Looking forward to your exploration details, but please, forget about PPT

Report · Mar 19, 2018

I'm so torn! I have historically agreed with that exact sentiment. But... the learning curve for Captivate and contentment in using Articulate Studio in our department are both too high. Importing PowerPoint is about the only compromise - I can say to my department, "Look! We can all edit this!", and I get to keep using Captivate (a little self-serving, I know ).

Report · Mar 19, 2018

Maybe when they realize that Articulate is not able to create real responsive projects? That there is no roundtripping with any other application (I use Photoshop, Illustrator, Audition daily with Captivate)? That SL cannot resuse scripts, has no Library? Lot of arguments for me.

Unzip the PPT and import the assets into Captivate's Library.