If you are working with Brightcove on your website, you can easily add Spott's interactive layer by adding a script to your existing implementation.
Your current video publishing process is not affected, which means you publish your videos first and add the interactive layer independently.
Our Brightcove integration works by adding a code snippet to your website where your video is shown and by adding the Spott project id to your Brightcove init script.
Using Spott 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 project 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.
<video-js id="myPlayerID"
data-video-id="5045678907001"
data-account="1752604059001"
data-player="ByZN9ymFZ"
data-embed="default"
data-application-id
controls
width="640"
height="360"></video-js>
<script src="https://static.spott.ai/videoplayer/js/spott.brightcove.js"></script>
<script src="https://players.brightcove.net/1752604059001/ByZN9ymFZ_default/index.min.js"></script>
<script>
initSpottBrightcove(document.getElementById('myPlayerID'), {
videoId: 'xxxx-xxxx-xxxx-xxx-xxxxx'
})
</script>
The script acts as a bridge between your player and Spott. To set this up, enter these parameters:
- The Brightcove video ID is in the example ByZN9ymFZ
- videoId: 'xxxx-xxxx-xxxx-xxx-xxxxx' inside spott-overlay is the Spott video id
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 before the '?' symbol. You can paste this in the videoId parameter in the code snippet.