Previewing HTML5 Output in Captivate

This topic explains how to preview HTML5 content in Captivate.

If you are using any widgets in your project, you won’t be able to effectively test HTML5 or responsive output by just running it from your computer’s hard drive. This is not a bug in Captivate or the CpExtra widget. The reason is explained below.

Adobe has implemented widgets in HTML5 or responsive output as their own separate web page which Captivate loads into the output using an 'iframe'.  Unfortunately, some web browsers regard iframes as a threat to the security of your computer's file system, and therefore block them from loading anything, causing Captivate not to load the widget code, and resulting in failed functionality.

However, this issue only occurs if the Captivate output is run from your file system. If you upload and run the same content from an internet web server or a local-host server, then web browsers do not block iframes and the output runs as expected.

Therefore, if you deliver an HTML5 training course on a USB chip, CD, or any other method where it is run from the student's file system, CpExtra or any other HTML5 widget will not work.

Preview HTML5 Output

If you DO NOT have your own web server or local-host server set up to use for testing, you can still Preview how HTML5 (but not responsive) content should work using the Preview > HTML5 in Browser option available from Captivate’s main button bar.  (See below.)

Using this particular Preview option causes Captivate to create a temporary local-host server, and then launch the HTML5 output in your default browser. (There is no security threat you need to worry about when using this preview.)

Note: If having difficulty getting Captivate’s HTML5 previews to work, take a look at this post on the Adobe Captivate Forum.

If you want to test the same preview output in a different web browser, just copy the URL from the address bar of your default browser, and paste it into the address bar of the alternate browser (as shown below). 

The same output should then display in the alternate browser.

Preview Using Edge Inspect

As mentioned above, the Preview > HTML5 in Browser option cannot be used for testing responsive projects. (If you are working on a responsive project, that option does not even appear in the menu list.) The alternative method for responsive projects is Preview > In Adobe Edge Inspect. (Shown at the bottom of the list in the screenshot above.)

If you are really serious about developing responsive content, then setting up Edge Inspect will be essential to your projects.  But it’s not a five minute job:

  • You need to install the Edge Inspect CC application on your computer.  The first time you run Edge Inspect it will show you a page of information called: Adobe Chrome Extension Getting Started Guide.
  • It only works with Google Chrome browser.  So you need to be using Chrome on your desktop, regardless of any other browsers you might be using.
  • You need to install the Edge Inspect Chrome Extension in the browser.
  • You need to install the Edge Inspect mobile app on all devices you intend to test.
  • Edge Inspect requires your computer and devices to be on the same network. (This can be your home wireless network or LAN.) Additionally, your computer and devices must be on the same subnet of that network for auto-discovery to work properly.

You can find more information about installing and using Edge Inspect at these links:

Allow 15-45 minutes to download and install everything.

Publishing To A Web Server Or Local Host Server

If you DO happen to have access to a testing server, here’s how you can publish content for testing:

  1. Go to File > Publish... > Publish To My Computer.
  2. When the dialog opens, select HTML5 / SWF from the Publish as dropdown menu. (This menu does not appear for responsive projects as the only option will be to publish as HTML5.)
  3. Type in a suitable Project Title. This will be used as the folder name for the published output that will be uploaded to the web server, So, it should contains no spaces or special punctuation characters as these can cause broken links and non-functioning output. It’s also good practice to use all lower-case characters, as some web servers do not handle mixed-case names reliably.
  4. Specify the folder Location where the published content will be found.
  5. Under Output Format, deselect SWF and select HTML5. Although we personally find it quite counter-intuitive, the selected option is the one that looks greyed out, as shown in the screenshot below. (This option is also redundant and therefore does not appear for responsive output.)
  6. When everything is ready, click the Publish button. Captivate publishes the output to a folder as specified by the Location field.  If this folder does not already exist, Captivate creates it.
  7. Next you need to upload this output folder to your testing server:
    • If you are using a localhost server, all you need to do is copy the folder into the HTDOCS or WWW folder on your server.  You could even publish directly to this folder location.  However, you may find that you need to restart or refresh the server when uploading new published versions of the same content.
    • If you are testing on an external web server located on the internet or your company intranet, you many need to use Adobe Dreamweaver or another FTP client. (Note: It is outside the scope of this help to explain how to do this, as your setup and chosen method will be unique to your system.)
  8. Once the content is on the test server, navigate to the index.html file to view it in your chosen browser.

 

IF YOU LIKE WHAT YOU'VE READ ABOVE, THERE'S PLENTY MORE!

Join more than 2500 other Adobe Captivate users just like yourself and receive regular troubleshooting tips, illustrated tutorials, technical information, and creative solutions to real-world e-learning development issues. (See an example here.) Click the button below to join our community.  It's completely FREE!