Why doesn't my HTML Export work on my local computer?

[ryan schar]

I have a customer who wants to be able to download her eLearning onto her own computer and complete it. Unfortunately, this doesn't work.  When she opens the index.html file, the browser tries to download pngs and cannot find them.

On a web server, the eLearning works fine.  When the eLearnings is served from a web server, the pngs are transformed into data:images at some point and the browser downloads these instead.

My two questions are:

1. Is this behavior to be expected?

2. If not, how can I get it to run locally?  If so, how do I explain the fact that the modules cannot be run locally and must be served from a web server?

Thanks for any help!!

[RodWard]

HTML5 is designed as a web-based content solution, and will definitely work better from a web server.  However, in most cases it is still possible to get the Captivate HTML5 content to play from a local file folder as long as the web browser's security is not blocking something.

Is it possible that the client has perhaps NOT downloaded all the required files?  (You customer will need to have a lot more than just the HTML file in order to play the content.  A typical Captivate HTML5 module has dozens or even hundreds of files involved.)

Is it possible that your client was sent a zipped archive containing the HTML5 content and she has not attempted to unzip the package to a folder before then attempting to run the index.html file?

[ryan schar]

Is it possible that the client has perhaps NOT downloaded all the required files?

This is not the problem because I actually have the same problem. The eLearning won't play for me either if I try to play it from my desktop.  In the browser console, I see the same errors where various pngs are not found.

However, in most cases it is still possible to get the Captivate HTML5 content to play from a local file folder as long as the web browser's security is not blocking something.

This sounds like a reasonable explanation, but it is not obvious my browser is blocking something.

What i find peculiar is that browser looks for pngs when it is playing the eLearning locally, but looks for data:images when the eLearning is hosted on a server.  I know this because I am watching the "Network" panel in the Chrome browser.  Does this mean that some script which transforms the pngs to data:images is not being run? 

[Jeremy Shimmerman]

When a Captivate project is published it converts the images into a JSON file under the /dr  folder. I think the file is titled img1.json.

If the console is unable to load the images, it probably means it can't find that folder and file. 

[RodWard]

If the JSON files are not present in the output, perhaps they are are being stripped out by some overzealous anti-virus app.

EDIT:  Just had another thought.  The 'location' where these files are being stored locally wouldn't happen to be a network file server or document management server of some kind would it? (E.g. Sharepoint).  Sometimes these apps try to force downloading of the files.

[ryan schar]

Yea, this is really peculiar.

When I look at the version local on my desktop, I see the json files with apparent mapping of png -> data strings in the "dr" folder. So they are there already.  Nevertheless, when I open the index file in my browser I get a "loading..." message with everything grayed out in the background, and the browser console has these error messages where it cant find the pngs.

[RodWard]

Are you able to try using a different browser?  E.g. If you are on IE, can you try EDGE or Chrome.

[Stagprime]

I frequently publish my files as HTML5 and place them in a location on our network that is commonly accessible.

I then provide the link. This seems to work fine as well for my own machine.

I think the hangup here is the word "download".
It does not work that way. The author of the project would need to provide every single file.

For example, in the picture below I have all of the following items at the root level.

Clicking on a project within an LMS and "downloading" will not get all of the needed files.

If I misunderstand - please let me know.

[teresah9791625]

I have the same issue, my content will not load locally in Edge or Chrome. It will load fine in IE 11 and Firefox. I have been round and round with this. I have been in contact with Adobe and they keep telling me my files run on their end...although admitted they had to click refresh a few times. It is frustrating. There is some issue with those json files because I have an older published course and it has the actual graphics in the  dr folder and that course runs fine locally in Edge and Chrome. I was looking for a way to convert those json files to actual images for my local version. I can't seem to find a way to do this...I am very frustrated, right now the only thing I can tell my customer is oh you have to run this from IE11 or Firefox....don't use Edge or Firefox...they are not happy with this solution.

[RodWard]

Does this published output run on all of the browsers if it is uploaded to a web server and launched from there?  (Assuming that the web server is also set up to server JSON files.)  I'm wondering if your issue is mainly because you are trying to run the files locally and not from a web server.

[teresah9791625]

Yes it runs fine from all browser on a server. The issue is locally. Like I said I have an older course done in Cap 9 when still had graphics in dr folder and that one runs fine locally. So I believe it is sometimes crapping out on those files. Does anyone know an easy way to convert those json files to graphics. I would like to run a test and see it a course I have will run with the actual files in the dr folder.

[RodWard]

OK.  That's what I thought.

As you have discovered, Captivate's HTML5 output now makes use of JSON files to deliver certain types of images because it is possible with a single JSON file to deliver multiple images, thereby speeding up download and playback times for HTML5 on mobiles. There is no option in Captivate to revert the publishing process back to the way it worked in earlier versions.

Web browsers have become more and more secure due to concerns about hackers using certain exploits to deliver viruses to end users.  That's why Flash is being phased out, but it's also the reason why some web browsers don't make it easy or even possible to play HTML5 with JSON content locally on your computer.  (Sometimes you may be able to get it to work by relaxing the security settings, but not always.)

HTML5 is designed from the ground up as a web-based medium and that means the only fully reliable delivery platform for HTML5 content is from a web server.  It's more or less guaranteed to work that way because no browser manufacturer would like to see their market disappear because they cannot play web-based content. JSON is widely used on websites for performance reasons.

However, even if some browsers still currently support running HTML5 with JSON locally at the moment, that's not guaranteed to be the case in the future.  A minor browser security update could see your courses become non-functional in those browsers as well at any time.

The bottom line is that you and your client REALLY need to think about HTML5 as being ONLY for web delivery, not local playback.

Sorry.

[Lilybiri]

Great explanation, Rod, will bookmark this thread!

[teresah9791625]

Great explanation but definitely shows the shortcomings of Captivate…not a total solution at all.

[teresah9791625]

I understand all that, however most clients we have want both a local and web version because they have some systems that are not allowed on the internet. So with no flash and also many of these machines do not allow running exes either, and now this whole html5/json issue, we have created an environment that makes it impossible for what should be a simple request…being about to run an html page locally.

I guess I should not have relied on Adobe captivate, I should have just built my own straight html content. I am really screwed at this point with so many worthless lessons developed.

[teresah9791625]

I FINALLY found a work around for this error on local files. I went back to Captivate version 9.0.1.324 and when you publish from that version, it does not create the .json files for images. So, therefore I have not had the above mentioned error show up one time while running from local content. This is not a solution for any projects you have in Captivate 2017, so I got a coworker to make a json parser that takes the json files in 2017 published courses and converts them to the png files. I put the png files in the dr folder and them remove the script in the index file that parses the json files ( because I don't need them anymore) and now my local content runs fine in Chrome, Edge, IE 11 and Firefox. I am doing some more testing today, but so far so good. I know this might not be a solution for others who have experienced this same issue but for now I can hopefully deliver what my customer wants.

[ffami]

If you use the Quality settings "JPEG" or "High 24-bit" in the slide properties, Captivate will not create json files.

[RodWard]

Okay.  Now that IS interesting.

This might be a useful workaround for people that need to deliver HTML5 output from a web server or LMS where they cannot get the administrators to configure the server to allow JSON files.

[cedids]

Worked flawless! Thank you so much!!!

[JyveAFK]

This has saved my butt.

I'd NEVER have thought to have looked at this/changed the settings (and why does it say jpg when it actually exports to PNG?). 

HUGE thanks.

[jorgenf50250910]

I've been struggling with this too and adjusting the Quality settings did not work for me. I noticed that this is happening when CP tries to load the images for the first slide before the course has started playing, and it fails every time the browser is closed and the page reopened leaving the course unresponsive. After a click on the refresh button it might or it might not work ( Chrome ).  So the solution that seems to be working well is that there should be no assets on the first slide. It should be an empty very short slide with a continue so it will not be noticable - or a page with text and background color only - no image on master slide or anything else - then everything should be happy days 😄