Simple JW Player Integration With Brightcove-Hosted Videos

Recently, one of our clients came to us with a request to embed Brightcove-hosted videos on JW Player. Their reasons included a new design, control over multiple video elements, and the need to enhance the video experience in a positive manner.

This module contains the core implementation of embedding JW Player for playing videos hosted by Brightcove. To understand how this module works, you will need to know how fields work in Drupal 7. At the end of this article, there is a URL to the entire source code for your use with proper attribution.

Let’s begin…I have divided this module into three parts:

  • Field-Related – Field Type Definition, Widget and Formatter
  • Module Configuration Form
  • API Methods & Helper Methods

PART 1:

Field-Related

You will need three things for your custom field to work: Field Type Definition, a Widget, and a Formatter. In this case, I am using a field type called “jwpvp_field”. Look at the repository for the full code view for each method described below.

Let’s create a custom field. Register a field type.

Next, the widget definition. Register a new field widget.

manage_fields_field_widget

The form for the widget. This is the form that displays on your node edit or any entity edit page where the above field type is used.

Drupal 7 Field Widget Form
Drupal 7 Field Widget Form

Next, the formatter definition. Formatters handle the display of field values.

Formatter settings form: This is the form that is used to store the default width, height and autoplay settings of JW Player.

Drupal 7 Field Formatter Settings form
Drupal 7 Field Formatter Settings form

Formatter Settings Summary:

Drupal 7 Field Formatter Settings summary
Drupal 7 Field Formatter Settings summary

Formatter View: This is the place where the final output will be generated and sent to the page. We will alter this output later using the template_preprocess hook so all the elements needed for JW Player to render correctly are sent to the theme hook.

Notice that we are also attaching the required javascript/s which are needed for the JW Player to work correctly.

Drupal 7 Field formatter View

Field Autocomplete Callback:

This callback is used to return autocomplete options for the field. As soon as you start typing into the field on the node edit form, it will generate a list of valid options from your given Brightcove library. Read “jwpvp_menu()” to register this autocomplete callback with the correct permissions.

autocomplete

 

Value Callback Output

widget_form

Let’s register a theme hook:

Use the template preprocess hook to alter the variables:

Read more about template preprocess here: https://www.drupal.org/node/223430.

Notice the “jwpvp_bc_video_load” method that I will be using to fetch videos’ details from the Brightcove account.

Then, we will need a place to store the Brightcove and JW Player credentials and cache settings. Let’s create an admin settings form and the autocomplete callback menu callback for the field.

PART 2:

Module Configuration Form:

So now the module configuration page is set at ‘admin/config/media/jwpvp’ location.

Settings Form:

The settings form will store the credentials and simple cache settings. We will keep it simple and use the “cache” cache type to store video details (i.e cache table). I have also added a cache clear button so that in any case, if you need to just reset Brightcove’s cache only.

settings_form

PART 3:

API Method:

This method takes a video ID and checks if the cache table already contains a video object, if not, uses the Media API and gets the video details from Brightcove and stores it in cache table.

Other Information:

I have also added all the needed validation callbacks which can be viewed on the github source code. JW Player provides various options out-of-the-box that can be leveraged using this module or an extension of this module.

For Example: to add your logo that would display on the top right side, just add the line below in your template preprocess hook.

Available customizations to JW Player are listed on this page.

Full Source URL: https://github.com/bhavindesai/jwpvp

References:

Drupal 7 Form API: Click Here

Brightcove API Test tool: Click Here

Drupal 7 Field API: Click Here

 

Leave a Reply