Skip to main content
Participant
December 8, 2022
Answered

Hotspots not working in HTML5 preview

  • December 8, 2022
  • 3 replies
  • 952 views

I am very new to this technology and to Captivate so apologies in advance! 

 

I created a virtual tour for my company through Captivate on my desktop computer. Today, I downloaded Captivate on my laptop and opened up the virtual tour file. The virtual tour is made up of 360 photos with multiple hotspots on each photo. When I went to preview the project in HTML5, the hospots don't work. All other buttons do. However, the hotspots work perfectly fine when I preview the project in HTML5 on my desktop. I am doing the same exact thing on the desktop with the same exact file but it just won't work on my laptop. When I publish the file to my laptop and open it, the 360 photos do not show up at all (I'm assuming that's because they are not on my laptop yet). Not sure if it is an issue that occurred when transferring the file over to my laptop?

 

The Captivate version I have is up to date and I am opening in the latest version of Chrome. 

 

Please ELI5!

This topic has been closed for replies.
Correct answer RodWard

To have it work from your laptop you would either need to install the same version of Captivate to your laptop and then use the Preview as HTML5 option to display the content using Captivate's builtin temporary web server.  Otherwise you would need to install a web server (e.g. Apache or IIS) and use that to display the content.

 

I would go with installing a trial version of Captivate and use that.  Installing a full web server and getting it to work is complex.


One other thing I have found with the hotspots on the 360 slides is that the invisible hit areas of the hot spots (the part that is sensitive to mouse clicks) can easily get displaced, which then makes the hot spots appear to be not working.  

 

I discovered this by accident when I developed a training course that included a number of 360 slides and started receiving feedback that the hotspots did not work for some users.  I had tested the hot spots on my own system and they worked perfectly.  So I was somewhat confused by this issue until I was able to actually watch the problem on another end user's screen.  By clicking around the outside area of the hot spots I discovered that the hit areas were actually there but NOT sitting over the top of the hot spot graphics.

 

The issue turned out to be related to the end user's browser resolution and display percentage.  I also found that turning on HTML scaling when publishing also tended to be problematic.

3 replies

Lilybiri
Legend
December 9, 2022

Apparently your desktop is ready for and has the necessary software to show 360 photo/vidoe files. Maybe that is not the case for the laptop? I am also big confused by the sentence '... I publish the file TO my laptop"? Do you use that laptop as webserver? Published VR projects need to be on a webserver. It is not necessary to have the photos on that system as you seem to misunderstand.

RodWard
Community Expert
Community Expert
December 9, 2022

Are your desktop and laptop on the same operating system?  E.g. are they both Windows or is one a Mac?

 

Are you running Captivate on both computers and publishing from the app to view the content?  Or did you just take the published files from the computer with the Captivate license and copy them over to your other computer and try to view by opening the index.html file in a web browser?  If that's what you did then the reason the content did not work would be due to the fact that 360 content needs to be served from a web server environment.  Captivate sets up a temporarty localhost web server when you publish or preview as HTML5.  However, just trying to execute the same content without the web server will not work.

Participant
December 9, 2022

Thank you so much for your help! The desktop where everything works is Windows 10 Pro and my laptop is Windows 11. 

 

I took the Captivate file from the desktop, sent it to myself, and downloaded it on my laptop. When I opened it in my laptop to preview it, all the 360 photos and hotspots show up, but the hotspots don't work. I think I did exactly what you mentioned above when trying to publish the project and that's when the photos didn't show up. So that makes sense but I'm still confused as to what's going on in the preview? For now, I really just need the preview option to work as my goal is to take this to a conference and have people test out the project on my laptop. Thanks again! 

RodWard
Community Expert
Community Expert
December 9, 2022

To have it work from your laptop you would either need to install the same version of Captivate to your laptop and then use the Preview as HTML5 option to display the content using Captivate's builtin temporary web server.  Otherwise you would need to install a web server (e.g. Apache or IIS) and use that to display the content.

 

I would go with installing a trial version of Captivate and use that.  Installing a full web server and getting it to work is complex.

Paul Wilson CTDP
Community Expert
Community Expert
December 8, 2022

I would reach out to CaptivateHelp@Adobe.com and see if they can troubleshoot this for you.

Paul Wilson, CTDP