Interactive Video: Best Practices


“Interactive Lesson” (or interactive video) playback in LightSpeed VT is where a number of separate videos are woven together into an interactive experience. You can easily build your interactivity using the Interactive Video Composer or manually building a JSON file (JavaScript Object Notation) with specific properties and values which are documented below.

The workflow to make these from scratch needs to go in 7 steps.

Step 1: Planning

Plan it out and write your scripts. You should first make a flowchart of what you want this interactive adventure to look like on paper, then write your scripts from that.

Here are some helpful guides to get started in the right direction:

Step 2: Shoot the Video

It is really like shooting any other video, except there are two specific things to remember.

  • 1st Fade in and Fade Out – only put a Fade in on the “intro” video, and only put a “fade-out” on the closing video.
  • 2nd Leave at least 10 seconds of time for your loops when you have buttons up for the user to select.

Step 3: Upload Your Videos

This is a pretty simple step, just go in and upload them all to the Media Library. Once all the videos have finished encoding, you’re now ready to create your Interactive project.

Step 4: Create Your Interactive Project

There are two ways to create your interactive project:

Step 5: Make the JSON File

This is the most tricky step of the whole part, and still is not that bad.

First you need to gather all of your assets and information that you want to use, which will be:

Assets and Information
Paths All of the paths to your needed videos, and a name for each one so you can reference it in the JSON file.
Loop Time You want to know the minute & second count of where you want the loop back point to be.

We cover in more depth below how to make the full JSON file.

Step 6: Upload Your JSON File

Upload it in the Media Library (the Media Library will automatically add it to the correct area), once uploaded click on the “Documents” tab and clipboard the path to your JSON file in the media Library, this is what you will insert in the “Chapter Path” instead of a video.

Step 7: Add Your JSON File to a Chapter

In the Courseware Manager, go and find the Chapter in question, and you will want to manually add the path to this JSON file (as opposed to “Select From Library” like you would a video). Add the path to your JSON file on the “video path” line.

Here is an example of what the full path should look like:

Chapter Video Path for JSON File

Making the JSON File

Download the Example JSON File

Note: We have added a JSON file tool to help you create your file. Click on this link and it will take you to the JSON Editor page – JSON Editor

Root-Level Properties

  • debug – If set to true the player will show the button areas visually, helpful for tweaking button placement etc.
  • videos – A listing of video config objects used in this interactive lesson. Note that the object keys are considered the “id” of the associated video configuration.

Video Config Object Properties

  • buttons – A listing of button config objects
  • loopStart (optional) – An array in the format of [mins,secs] which tells the video player where to seek to once the video reaches it’s end. Used for areas where buttons are presented and an interaction is expected.
  • src – An absolute path to the video to be played
  • captions – An object listing of absolute paths to caption xml files, note that the the object keys are the actual label that is shown in the ui the associated language.
  • next – The id of a video to play upon completion
  • ending – A config object that determines what happens once the video completes

Ending Config Object Properties

  • video – The id of another video to play once video has ended (works exactly like the next property)
  • url – An array where the first item is the url and the second is the target window
  • complete (optional*) – If set to false, once the video ends it won’t call the complete callback

Note: If opening a url with “_self” as the target, make sure you set “Complete” to “false,” otherwise a javascript error may occur.

Button Config Object Properties

  • width – Pixel value for the button area’s width
  • height – Pixel value for the button area’s height
  • x – Pixel value for the button area’s left position
  • y – Pixel value for the button area’s top position
  • label – Text to show when debug is set to true
  • value – A string value that is sent to any selection callbacks along with the action property
  • time – An array in the format of [mins,secs] that tells the player when to activate the button area
  • video – The id of a video to play once clicked
  • url – An object with the string properties href (the url to be accessed), target (the window in which to open the url) and specs(properties for popup window)

IMPORTANT – For Your Button Measurements
To get the measurements for your button width and height, as well as the X and Y coordinates for the placement of the hot spots – use the “Get Coordinates” button on the JSON Editor (JSON Preview).

Related Articles