Theo player

If you are working with THEOplayer on your website, you can easily add Spott's interactive layer by adding a script to your existing implementation. Only a one-time setup is needed, from then on you can use your own IDs to link THEOplayer with Spott.

You'll be able to control the visibility and appearance of the interactive layer per video from the video details in Spott. Your current video publishing process won't be affected, which means you publish your videos first and add the interactive layer independently.

Follow the steps below to set up the Spott interactive overlay on THEOplayer.

One-time setup

If you're working with THEOplayer, the embed code that's already on your website will look something like the following.

<!-- theoplayer default CSS -->
<link rel="stylesheet" href="//cdn.theoplayer.com/dash/theoplayer/ui.css"/>

<!-- Player element -->
<div class="theoplayer-container video-js theoplayer-skin"></div>

<!-- License -->
<script type="text/javascript" src="https://cdn.myth.theoplayer.com/<yourUniqueCode>/THEOplayer.js"></script>

<script>
    var element = document.querySelector(".theoplayer-container");
    var player = new THEOplayer.Player(element, {
        ...
    });
    ...
</script>

Step 1: Put the Spott THEOplayer adapter on your website

Add the Spott THEOplayer adapter script to each page where you want Spott's layer to appear over a THEOplayer video.

<!-- Spott THEOplayer adapter -->
<script src="https://static-cdn.spott.ai/videoplayer/js/spott.theoplayer.js"/></script>

Each time a new video gets initialized in the player, you can trigger its interactive layer with the following snippet.

<script>
    initSpottTHEOplayer(player,{ //replace player by the THEOplayer instance
        theoplayerVideoId: '' //enter your external ID
    });
</script>

The script acts as a bridge between your player and Spott. To set this up, you can adjust these following parameters:

• A selector player that targets the Javascript instance of your video player.
• theoplayerVideoId is the external ID of the video that is currently initialized. This is the External ID that Spott will look for when a video is played.
• Alternatively, replace theoplayerVideoId by videoId if you want to use the Spott ID instead of an external ID.

Steps per video (Setting an External ID)

Before you start the following steps, make sure you've uploaded your video to the THEOplayer platform and added it to your website already.

Step 1: Upload your video to Spott and make it interactive

You'll add interactive elements to your video in the Spott Studio. To do that, you should upload your video to the Spott platform.

Log into Spott and go to the media page, upload your video, and make it interactive.

We have a full step-by-step guide for you if you haven't learned how to do this.

Step 2: Open the Edit menu

While you're still in the Studio of the video, click the dropdown menu at the top of your screen. Click "Edit" to open a new modal.

Step 3: Enter your external ID and save

In this modal, you should see "External source" and next to it another dropdown menu. Choose "THEOplayer".