Getting Started with Video Interactivity

In this topic you will learn how to get started with adding interactivity to videos.

The Interactivity plugin for the Brightcove Player allows the player to take advantage of the features provided by Brightcove Interactivity. When annotations are added to an Interactivity project, they will automatically appear on the corresponding video.

Before you get started

Before you can started with video interactivity, you must have a Brightcove Player configured with the Interactivity plugin. Adding the Interactivity plugin to a Brightcove Player will allow annotations to be displayed inside of the player during video playback. The Interactivity plugin can coexist with other player plugins. For complete steps on creating an Interactivity-enabled Brightcove Player, see Configuring a Brightcove Player with the Interactivity Plugin.

Creating an Interactivity project

Follow these steps to create a project.

  1. Login to Video Cloud Studio.
  2. Open the Interactivity module.
  3. Click New Project.
  4. Enter a Project Title.
  5. Select a video to use in the project.
  6. Click Create. The project will appear in the Projects listing.

Adding a text overlay

In this section, a text overlay will be added just to validate that the interactivity can be viewed inside of a Brightcove Player.

  1. Click on the project Title to open it.
  2. In the bottom toolbar, click on the text overlay icon.
  3. Click on the Editor link in the menu.
  4. Enter some sample text for the overlay and click SUBMIT.
  5. Click Done.

For information on adding text and image overlay annotations to a video, see one of the following:

Previewing and generating embed code for a video

Once an annotation has been added to a project, preview the video to ensure the interactivity is working as expected. When previewing and generating the embed code in the Interactivity module, the project will use the Interactivity-enabled player that is configured as part of the account defaults.

Follow these steps to preview and generate the embed code for the project:

  1. Click on a project title to open it.
  2. Click Embed.
  3. Select a Player. The dropdown list contains all players that have the Interactivity plugin installed.
  4. Click Preview to preview the project in another browser tab.
  5. Confirm that the interaction appears.
  6. Copy the embed code and paste it into your web page.