Video Thumbnail Grid

Overview

While Brightcove Gallery offers a robust system for building video portals, you can also build a simple do-it-yourself portal. If you don't want to load a player on your web page before the user chooses a video, you can display a video thumbnail grid as shown in this sample. When a thumbnail is selected, a Brightcove Player is loaded on the page with the selected video.

What you will need

All you will need to build this portal are:

• A Video Cloud account
• A search-enabled policy key to authenticate a request to the Playback API
• Some web development skills (HTML, CSS, and JavaScript)

Design considerations

Getting video data

Although either the CMS API or the Playback API can be used to fetch video data, the Playback API is the obvious choice here for several reasons:

• Because response data is cached (for up to 20 minutes), it is much faster
• It returns all the data you need to play a video, whereas the CMS API requires two separate requests to get the video metadata and the video sources
• It is CORS-enabled, meaning you do not need to route the API request through a server-side proxy app

However, the Playback API offers two ways to fetch video data. There is a basic method to get a video by id (or reference id), and we could easily iterate over an array of ids to request each one. That is not very efficient, however.

A better option is to use the video search method, which allows us to find all the videos by id and return them with one request. The search parameter for the request will look like this:

q=id:6543217890%20id:1234567890%20id:987654321...

The %20 in this search string is a URI-encoded space. For more information on the search syntax, see CMS/Playback API: Videos Search.

The player

There are no special requirements for the player - the default Brightcove Player would work fine.

Some users may not watch any videos at all, so there is no point using bandwidth to load a player until it is needed. We will use the Brightcove Player Loader to load a player dynamically the first time a video is selected for playback. To maximize performance, we will also pre-load the Brightcove Player JavaScript, but the player loader will do this automatically if it is not already present.

Getting a policy key

Policy keys are automatically generated for all Brightcove Players. For security reasons, however, the standard policy keys do not enable searching for videos using the Playback API. For this sample, we do want a search-enabled key. You can create one using the Policy API, but the easiest way is to use the Brightcove learning sample app and make sure you check the option to get a search-enabled key.

Sample app

Code for this app

You can find the code for this app in this GitHub repository.

Codepen

See the Pen Video Grid Sample by Brightcove Learning Services (@rcrooks1969) on CodePen.