Update the Version of the TechSmith Smart Player

The TechSmith Smart player is made up of these files:

• techsmith-smart-player.min.js - JavaScript required to run the TechSmith Smart Player.
• embedded-smart-player.min.js - JavaScript required to run the TechSmith Smart Player.
• techsmith-smart-player.min.css - All the CSS used to display the TechSmith Smart Player

TechSmith provides an endpoint that will always resolve to the newest major version of each of these files (CDN). These links will always be up-to-date without doing any further edits to your Camtasia local productions.

• https://cdn.cloud.techsmith.com/smartplayer/5/latest/techsmith-smart-player.min.js
• https://cdn.cloud.techsmith.com/smartplayer/5/latest/embedded-smart-player.min.js
• https://cdn.cloud.techsmith.com/smartplayer/5/latest/techsmith-smart-player.min.css

Option 1: Update Local Files

1. Download the above files to your desktop by first clicking on the link and then right clicking on the web page it opened and choose Save As or Save Page As.
2. Copy techsmith-smart-player.min.js from above and paste it into this location within your local production from Camtasia (this will overwrite the file in that location): media/scripts/techsmith-smart-player.min.js
3. Copy embedded-smart-player.min.js from above and paste it into this location within your local production from Camtasia (this will overwrite the file in that location): media/scripts/embedded-smart-player.min.js
4. Copy techsmith-smart-player.min.css from above and paste it into this location within your local production from Camtasia (this will overwrite the file in that location: media/skins/techsmith-smart-player.min.css.

Option 2: Use CDN Links Directly

You can replace the existing references to the Smart Player files with the full path to that file on the CDN.  When deployed to production, the latest major version of the TechSmith Smart Player will be used.

1. Open the index_player.html file that was produced by Camtasia. This can be found in: (production folder name)/media/index_player.html
2. Paste in the full URL of the CSS file as shown here:
   
3. Paste in the full URL of the techsmith-smart-player.min.js file as shown here:
4. Paste in the full URL of the embedded-smart-player.min.js file as shown here: 
5. Save the HTML file.

What has changed

The TechSmith Smart Player will now display a header element when viewing SCORM productions.

The header contains two items.

1. The lesson title entered by the author in the SCORM manifest options form will be displayed in the header.
   
2. A button to end the current SCORM session.
   • When the viewer begins the video the button will display “Complete video later”.
     
   • When the viewer has finished the objectives defined by the author (ex: they have watched 100% of the video), the button will display “Complete video”.
     
     
     

Important:  The viewer must use this button to exit a SCORM session correctly.  If they do not then there is a good chance that the information will not be reported correctly to the LMS.

Notes:

1. The viewer will be asked to confirm the completion of the session if they have not reached the objectives defined by the author.
   
   - The viewer can resume the video where they left off the next time they visit If the video does not use the TechSmith quiz email service to report quiz results.
2. When the SCORM objectives have been completed, clicking the “Complete video” button will automatically end the session.
3. The SCORM header is hidden when the video is being viewed in full screen mode. (Assuming the LMS you are using supports full screen mode).

How do I get the update?

Using Camtasia 2019 and 2020

• Both Camtasia 2019 and 2020 will automatically pull down this version (or later) when you create a new SCORM production.

Update existing SCORM productions from Camtasia 2019 and 2020

To manually update Smart Player for an existing SCORM production follow these steps.

1. Download the new version of the TechSmith Smart Player by right clicking and selecting the “save link as” option for each file listed below..
   1. techsmith-smart-player.min.js
   2. embedded-smart-player.min.js
   3. techsmith-smart-player.min.css
2. Unzip the SCORM package (if needed)
3. Replace the two JavaScript files in the SCORM folder:
   1. <scorm-folder>/scripts/techsmith-smart-player.min.js
   2. <scorm-folder>/scripts/embedded-smart-player.min.js
4. Replace the CSS file in the SCORM production folder:
   1. (Camtasia Windows)
      <scorm-folder>/skins/remix/techsmith-smart-player.min.css
   2. (Camtasia Mac)
      <scorm-folder>/skins/techsmith-smart-player.min.css
5. Zip up all the files and folders in your SCORM production folder.
   
   

Update existing SCORM productions from older Camtasia versions

1. Follow the steps 1 - 4 in manually “Update existing SCORM productions from Camtasia 2019 and 2020”
2. Delete the following files from the production folder:
   1. “scripts/config_xml.js”
   2. “[production name]-scorm.js” - Production name is the name you used when produced the project.
   3. “Scormwrapper.js”
3. Open `[production name]_player.html` in a text editor.  Find and delete the following lines from the file.
   

Now add the following JavaScript above `TSC.mediaPlayer.init("#tscVideoContent");`

Note:

• minViewPercentageToCompleteLesson is the percent of video that needs to be watched for the SCO to be marked complete.  The value can between 0 and 1.
• minScoreToPassLesson is the min score to get for the SCO to be marked passed.  The value can be from 0 and 100.

4. Save file.
5. Zip up all the files / folders in your SCORM production folder.