Flowplayer video player

If you are working with Flowplayer on your website, you can easily add Spott's interactive layer by adding a script to your existing implementation.

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

There are two ways you can easily set up the Spott interactive overlay on Flowplayer.

1. Using the Spott Video ID (Easiest)
2. Using an external ID and link it internally in Spott (Advanced)

Using Spott Video ID

If you have access to your own website, this is probably the easiest option. If your website is managed by someone else, it might be best to take a look at the next solution by using an External ID

Before you start these steps, make sure you've uploaded your video to the Flowplayer 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. In order to do that, you should upload your video to the Spott platform.

Log into Spott and go to the projects 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 already.

Step 2: Put this code snippet on your website

Go to your website and put in this code snippet. Leave this page open as you still need to make some changes in step 3.

<script src="https://static.spott.ai/videoplayer/js/spott.flowplayer.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function(){ 
    initSpott({
        target: document.getElementById('player'), // JS selector targeting the Flowplayer container
        videoId: '' //Spott video ID
    })
}, false);
</script>

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

• A selector target which targets the element of your video player. Flowplayer uses an iframe to load the video player, so the selector could look like iframe.flowplayer or #videoplayer.
• The Flowplayer id videoId of the video currently initialized.

Step 3: Get the Spott video ID

When you have uploaded your video, go to the Spott Studio where you can copy the video ID.

Look at the URL and copy the ID, this is the last part of the URL. You can paste this in the videoId parameter.

Paste the Spott ID you just copied and place in the script on your website (see snippet above).

Your Flowplayer video should now have an interactive layer!

Using an External ID

Use an External ID if you are looking for a more advanced but scaleable integration. Using the External ID will allow you to have to put in the code snippet on your website once. We only advise you to set up this implementation if you are a developer yourself or have one in your team.

If this is not you, it might be easier to use the first solution by using the Spott Video ID.

For Content Creators

Before you start these steps, make sure you've uploaded your video to the Flowplayer platform. Take note of the video id.

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

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

Log into Spott and go to the projects page and make it interactive.

If you don't know how to do this, see this step-by-step guide on how to do this.

Step 2: Set an external ID

While you're video is still open in the Studio, click the Publish tab:

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

Step 3: Enter your external ID and save

<script src="https://static.spott.ai/videoplayer/js/spott.flowplayer.js"/></script>

<script>
initSpott({
  target: document.getElementById('player'), // JS selector targeting the Flowplayer container
  flowplayerVideoId: "" // The id of the Flowplayer video
})
</script>