hotspots

  • 1
  • Question
  • Updated 1 month ago
  • Answered

I am having interactive transparent Hotspot issues when producing to SCORM and uploading to an LMS.  I realize it is probably an issue on the LMS side, but was wondering if there was anything I can do when creating the hotspots in Camtasia to resolve this?  We set the hotspots up to jump to certain timestamps in the video depending on which hotspot is clicked.  There are some hotspots built on top of larger hotspots which are designed to show the user where the correct place to click is if they do not click on the correct spot.  Basically a software simulation.  The smaller and correct hotspot to click is built on the higher track to take precedent.  We then build a hotspot on a lower track that takes up the whole screen, so if they click anywhere but the correct location, it jumps to a callout showing where they should have clicked.  This is to help them learn how the software works.  All of these work perfectly when produced to Screencast but once loaded to the LMS, some work and some don't.  Any suggestions?  Thanks!
Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes

Posted 1 month ago

  • 1
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 99 Posts
  • 32 Reply Likes
Can you tell me what version of Camtasia your are using the produce your SCORM output?

Screencast.com is setup to use the newest version of the TechSmith Smart Player which is what plays back videos produced from Camtasia.  We fixed an issue with hotspots that overlap last year.  If you have an old version of Camtasia, that may be producing with a version before the bug fix.

Camtasia 2018 has the most recent version of the TechSmith Smart Player.

We also recently published an article on how to manually update the TechSmith Smart Player https://support.techsmith.com/hc/en-us/articles/360016247852-Camtasia-Windows-Update-the-Version-of-the-TechSmith-Smart-Player

Hope this helps,
Ben Rhodes
Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes
Thanks Ben,
I am using an older version of Camtasia.  Specifically, Version 8.0 4(Build 1060). 

So if I'm understanding correctly, there is a bug in the way the hotspots are produced and it is automatically corrected when produced to Screencast but if produced as a SCORM it is not?  Thanks!
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 99 Posts
  • 32 Reply Likes
Yes, the version of the Smart Player for Camtasia 8.0.4 would contain that bug.  You can use the article above to update the SCORM output to resolve the issue.
Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes

Thank you!  I will try that.
Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes
Hi Ben,

Option 1 wasn't very clear to me.  Specifically, "Copy techsmith-smart-player.min.js from above and paste it into this location within your local production from Camtasia".  I'm not sure what it is referring to when it says "paste it into this location within your local production from Camtasia".  Is this within the Camtasia production settings in Camtasia or within my OS somewhere?  Can you maybe help clear that up for me?

I did attempt option 2 from that article and updated the SCORM output in the HTML player file as directed.  I still have the exact same results as before so it did not work.

In my HTML player file I have this for the .CSS:

<link href="skins/express_show/player-min.css" rel="stylesheet" type="text/css" />

I replaced the bold section with: 
https://assets.techsmith.com/smartplayer/5/latest/techsmith-smart-player.min.css

For part 3 for the JS file, it wasn't quite as clear where that is located (I have very limited HTML skills/knowledge).  I believed it was this bolded part in my HTML player file:

<script src="scripts/player-min.js" charset="utf-8"></script>
<script type="text/javascript">

I replaced that with:
https://assets.techsmith.com/smartplayer/5/latest/techsmith-smart-player.min.js

Do you see anything I did wrong?  Do you need more info?  Any additional help you can provide is much appreciated!  Thank you!

Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes
Ben,
 
It was user error on my end, I was missing a quotation but the hotspots are now working!  I have a two separate issue now...

There is now no full screen option within the player.  Is there a way to get that back?

The hotspots have a dashed lined showing them and they aren't truly transparent.  Is there anyway to make them truly transparent?


Thank you for all of your help!
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 99 Posts
  • 32 Reply Likes
I'm glad you figured it out.  Those instructions are a little different for Camtasia 8 productions.

What browser are you using view this content?

The fullscreen button is gone, either because the site with the embedded SCORM module does not place the necessary HTML attribute on the iframe element that holds the Camtasia production.  Or your browser does not support the HTML fullscreen api.

I'm wondering if the browser you are using is specific to why you are seeing the dotted lines.  This isn't something I normally see with hotspots.
Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes
Thanks Ben,

Using IE Version 11.  Unfortunately the way our LMS is set up at our organization, IE is the only way our users access it. 

I noticed in Screencast it does the same thing.  Meaning, if I produce it to screencast and view it in IE, the hotspots have the dotted outline.  When I view it in Chrome, it does not have the dotted outline.  So I assume its just an issue with IE?
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 99 Posts
  • 32 Reply Likes
Unfortunately IE11 has a bug with that it displays the outline when we try to not show it. There is a way to disable it, but it impacts keyboard accessibility when tabbing around the player controls.  The desired result is to highlight the hotspot area using tabbing.  This impact would impact all browsers.
Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes
So how would I disable it?
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 99 Posts
  • 32 Reply Likes
You will need to insert some text into one of the JavaScript files in your Camtasia production.
  1. Locate techsmith-smart-player.min.js - look for a scripts folder
  2. Open this file in simple text editor like notepad - note this file is not supposed to be human readable to reduce file size.
  3. Search for the following text in the file: hotspotsAltText,f=typeof g===i?g.call(b,{hash:{},data:e}):g),h+=j(f)+'"
  4. You will need to insert the following text after the quotation in the string above as shown in this image: hidefocus="true"


     
  5. Save the file and you should be all set.
(Edited)
Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes
Are all of these issues resolved in Camtasia Version 9?  Meaning, no manually adjustments would need to be made with any of the code in these files?  Thank you.
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 99 Posts
  • 32 Reply Likes
The overlapping Hotspots issue is resolved in the version of TechSmith Smart Player that ships with Camtasia 9.
Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes

Thank you, I appreciate all the great feedback.  I have one last question regarding the full screen issue with IE.  I want to make sure I am understanding correctly... the no full screen option in IE is an issue with the browser and not with Camtasia, correct?  And there is nothing I can do to make the full screen option available in IE?  Thanks again!
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 99 Posts
  • 32 Reply Likes
My guess is your LMS does not include the necessary HTML code when embedding the Camtasia production in the page to allow the Smart Player to go fullscreen.  The technical details involve providing the allowfullscreen attribute in all iFrame elements that contain the Smart Player production.
<iframe allowfullscreen></iframe>
You can verify this by:
  1. Navigate to LSM page with Smart Player production.
  2. Right click over some part of the video.
  3. Select "Inspect Element"
  4. Look for any iframe elements that do not contain the allowfullscreen attribute.  Note you may see other variations of this attribute like: webkitallowfullscreen and / or mozallowfullscreen.  Those are ok when including allowfullscreen.
Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes

Hi Ben,

I was attempting to correct the hotspot outline issue by adding in the hidefocus="true" but I don't even see the techsmith-smart-player.min.js.  When I open the Scripts folder in my Camtasia production this is what I see:


Photo of Rick Stone

Rick Stone

  • 4492 Posts
  • 2002 Reply Likes
What about the player-min.js shown in your image?
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 99 Posts
  • 32 Reply Likes
Sorry for the confusion, player-min.js is the file to look at. Let me know if you can not find the string inside that file.  It has been a while since looking at Camtasia 8 productions.
Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes
Thanks Ben, I should have mentioned I did try searching in the player-min.js but came up empty.  I tried again just now and simply looked just for  hotspotsAltText and did not find anything.  Thanks!
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 99 Posts
  • 32 Reply Likes
Is is possible for you to update your version of Camtasia 8?  It is a free update.  The last version of Camtasia 8 changes how we packaged the Smart Player that lines up with the instructions I linked to.
Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes
Thanks Ben, when I go to Help -> Check for updates it only gives me options about Camtasia 2018 with links to learn more about it or contact sales.  Is there a way to manually update to the latest version of Camtasia Studio 8?
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 99 Posts
  • 32 Reply Likes
You can visit this page to download Camtasia 8.6.  https://www.techsmith.com/download/oldversions
Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes
Thanks Ben!  I now have 8.6.0 installed.  Should this resolve the bug with the hotspots too or will I have to make those manual changes still?
Photo of Ben Rhodes

Ben Rhodes, Employee

  • 99 Posts
  • 32 Reply Likes
I'm happy that worked for you.  No, you will need to grab the newest version of the Smart Player as instructed in the page I shared to get the bug fix for overlapping hotspots.  Then make the change to hide the dotted outlines.
Photo of AC123

AC123

  • 17 Posts
  • 0 Reply Likes
Sorry Ben, but still having issues locating:  hotspotsAltText,f=typeof g===i?g.call(b,{hash:{},data:e}):g),h+=j(f)+'"

The newer Camtasia version 8 I now have does produce the techsmith-smart-player.min.js file but that specific text is not in that file either. 

I open the file in notepad and do a Find (CTRL F) on that text and come up empty.  I tried just looking for hotspotsAltText and found nothing for that either.  Any other suggestions? 

Thank you for all the help and feedback!