Flowplayer video

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 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 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://discover.spott.ai/react-player/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.

ezgif.com-video-to-gif__46_.gif

Paste the Spott ID you just copied and place in the script on your website.

ezgif.com-video-to-gif__47_.gif

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 media 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 still in the Studio, click the dropdown menu at the top of your screen. Click "Edit" to open a new modal.

image__1_.png

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

image.png

Step 3: Enter your external ID and save

Fill in the Flowplayer id of the video you're making interactive in the text field. Click "Save" to persist your changes.

For developers (one-time instructions)

Add the following script to each page where you want Spott's layer to appear over a Flowplayer video:

<script src="//static-cdn.spott.ai/player/js/spott.flowplayer.js"/></script>

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

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

The script acts as a bridge between your player and Spott. To set this up, set 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 flowplayerVideoId of the video currently initialized. This is the External ID Spott will be looking for when your video is played.

If there are certain things not clear, don't hesitate to contact us! You can do this by clicking the purple icon on the bottom right. We're happy to answer any questions you might have.

 
Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.