Local storage & if/then statements

You can watch our tutorial video on using local storage and if/then statements here, or read the article below.

Unlike linear videos, interactive videos have a flow that’s determined by the viewer. In this article, we’ll explore more advanced ways of how to use viewer input to change the flow of your videos. This includes working with:

• Local storage; and
• If/then statements

1.0 | Local storage

1.1 | What is Local storage?

In general, local storage allows websites to (temporarily) store data locally in the visitor’s browser. Local storage data is stored with a “key” and “value”. This data can then be used in other parts of the website. 

Like websites, interactive videos can also use local storage to store viewer input so it can be used elsewhere in the video. Local storage is commonly used for keeping track of a viewer’s score in a quiz, or storing the name of a viewer after they’ve entered it in a textfield.

1.2 | Setting local storage: Quiz Example

We’ll use the quiz example to explain how to set local storage. At the beginning of the quiz we would like the score to be zero. To do this: 

• Add a rectangle in the timeline starting and ending at the exact moment you want the local storage value to be set to zero.

• Expand the OnShow action panel
• Add a “Set local storage” action.

• Here you can fill in a name for the local storage (e.g. “score”) as well as a value. In our example, we’ll set the score to zero. This way, the quiz score will be reset if a viewer rewatches the video. 

Similarly, we can add to the “score” key when viewers answer questions correctly. Instead of setting it to a specific number you can set the value to “+1” in order to add to the score.

1.3 | Setting local storage: Tracking View Progress

A common application of local storage is to keep track of the viewer’s progress. In other words: has the viewer watched clip X, Y and Z? 

To keep track of this progress, set a local storage key/value at the end of each clip (for example: “Clip X seen” = “true”). As soon as all clips have been watched you can ‘unlock’ the final video (read more about it/then statements in section 3.0 Local storage and if/then statements combined).

2.0 | If/then statements

If/then statements can be used when you want the behaviour of the player or interactive elements to be triggered when specific conditions are met.

For example: IF the video is muted, THEN show the subtitles. Similarly, you can hide the subtitles as soon as the video is unmuted. Let’s use this example to show how to apply an if/then statement.

2.1 | Setting the “if” part

• Drag a button onto the canvas
• Expand the OnClick action menu 
• Add an if/then action.

• Click “edit conditions” and select the second icon.

• The interactive studio allows for elaborate conditions to be set here, but in this example we will only check to see if the player is muted or not. In the dropdown menu, select “is muted” and set it to “true”. 

2.2 | Setting the “then” part

After specifying the condition (“if”) we can set the “then” part: 

• Click the “plus” icon below “then”. 
• Select the second icon to control the behaviour of the player.

• Here we would like to show the subtitles, so click the fifth icon and set it to “show”.

2.3 | Setting the “else” part (optional)

The player is now set to show the subtitles when the audio is muted. In this case we would also like to hide the subtitles when the sound is on. We can do this by adding an “else” part to the statement. 

• Click the “plus” icon below “else”
• Select the second icon and head over to the subtitle settings. 
• Select ‘hide’.

2.4 | If/then statements: available variables

The following variable can be used as conditions in if/then statements: 

• Player conditions. Commonly used examples include:
  • Is playing
  • Is muted
  • Is fullscreen
• Widget conditions. Commonly used examples include:
  • Shown
  • Hidden
  • Opacity
• Local storage (see next section)

3.0 | Combine local storage with if/then statements

To get the best result, local storage and if/then statements are often combined. As an example, let’s say a viewer should only see the intro clip once. 

3.1 | Example: tracking viewer progress

To do this: at the end of the intro clip we will add a local storage key called “intro seen” with its value set to “true”. This local storage data can now be used to check if the viewer has already seen the intro. This check is executed by an if/then statement right at the beginning of the intro video. IF our local storage data meets our conditions, THEN we will skip the intro clip and proceed to the next clip. 

3.1 | Example: evaluating viewer score

Another example is to navigate a viewer to different content based on their specific input. For example: at the end of a quiz the viewer has to click the “Show results” button. By using an if/then statement it’s possible to either show a clip displaying “Congratulations” or “Too bad, try again” based on their score stored in the local storage.