Video Thumbnail Grid
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
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:
%20 in this search string is a URI-encoded space. For more information on the search syntax, see CMS/Playback API: Videos Search.
There are no special requirements for the player - the default Brightcove Player would work fine.
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.
Code for this app
You can find the code for this app in this GitHub repository.
Using the CodePen
Here are some tips to effectively use the above CodePen:
- Toggle the actual display of the player by clicking the Result button.
- Click the HTML/CSS/JS buttons to display ONE of the code types.
- Click Edit on CodePen in the upper right corner to fork this CodePen into your own account.
- Find all the code associated with this sample in this GitHub repository.