Use Video Plus Assets in Gatsby with Oracle Content Management

Introduction

In this tutorial, we’ll add a Video Plus (Kaltura) video to the Gatsby minimal site sample, which leverages Oracle Content Management as a headless CMS as well as its software development kit (SDK) for content delivery in JavaScript. This Gatsby sample is available on GitHub.

All video management, collaboration, and workflow are done within Oracle Content Management. Under the covers, though, the video content is converted on the Kaltura platform, and then delivered from Kaltura. This ensures that you can manage your videos as part of the central Oracle Content Management asset hub, include them as part of your sites and experiences, and deliver those videos in an optimized way to all your channels.

At a high level, we’ll embed a video asset from Oracle Content Management by obtaining video properties from Oracle Content Management (partnerID and entryID) and then calling Kaltura’s API to retrieve a streaming URL to iframe into the home banner on the Gatsby minimal site sample.

Prerequisites

Before proceeding with this tutorial, we recommend that you read the following information first:

To follow this tutorial, you’ll need:

How to Set Up a Video Plus (Kaltura) Element in Your Minimal Site

What We’re Building

The asset pack that’s required for the Gatsby minimal site sample includes a video asset called Video Plus Sample with the slug ‘video-plus-sample’. In this tutorial, we’ll be adding this video to the home announcement banner of the minimal site. Note that this portion of the code is not available in the GitHub repository, but this tutorial will provide all the code and go over how to add that video to your sample using Kaltura.

This is what the home page will look like at the end of this section of the tutorial:

This image shows a landing page for a Gatsby minimal site with video.

The Contact Us and People pages will still look the same as before.

Updating gatsby-node.js

The following are the additions to the gatsby-node.js file.

GraphQL Query added in addition to initial queries:

videoData: oceAsset(slug: {eq: "video-plus-sample"}) {
      advancedVideoInfo {
        properties {
          entryId
          partner {
            id
          }
        }
      }
    }

Processing of query to get video properties:

const videoDataResult = result.data.videoData.advancedVideoInfo.properties;

Routing video properties to the page context for the ‘Home’ page:

if (page.slug.localeCompare('home') === 0) {
      createPage({
        path: '/',
        component: pageTemplate,
        context: {
          page,
          videoDataResult,
        },
      });
    }

On start, gatsby-node.js runs and uses the Gatsby Source OCE plugin to obtain data from the content repository. We add a videoData query to obtain the metadata associated with the asset of slug ‘video-plus-sample’. In particular, we will need the entryID and partnerID to be able to call Kaltura’s API and get a rendered video delivered from Kaltura. Then, we process the request for these properties in the advancedVideoInfo after the query is made. Finally, we pass these properties to the createPage function’s context for the home page, which is where the video will be displayed.

Updating pageTemplate.jsx

The following are the additions to the pageTemplate.jsx file.

Processing the passed in page context:

const Page = ({ pageContext: { page, videoDataResult } }) => {

Filtering to see if the videoDataResult exists, added to the <Banner> tag:

video={videoDataResult === undefined ? null : videoDataResult}

After passing the videoDataResult from gatsby-node.js in the context of the createPage method using this pageTemplate.jsx, we first take in the videoDataResult at the top of the Page creation. Then, for the Banner, we need to see if the videoDataResult is defined or not. If defined, the video property for the Banner is just the videoDataResult; otherwise, it is null.

Updating Banner.jsx

The following is are the additions to the Banner.jsx file.

Adding a ‘video’ property to the Banner:

const Banner = ({
      image, title, text, buttonData, video,
    })

Adding the video section’s HTML:

<section className="content announcement">
      <img src={image} alt="Banner Image" />
      {video && (
        <div>
          <iframe
            className="video"
            title="video"
            src={`https://cdnapisec.kaltura.com/p/${video.partner.id}/sp/0/playManifest/entryId/${video.entryId}/format/url/protocol/https/flavorParamId/301971/video.mp4`}
          />
        </div>
      )}
      <div>
        <div className="title">{title}</div>
        <div className="text"><p dangerouslySetInnerHTML={{ __html: text }} /></div>
        <div>
          {displayButton(buttonData)}
        </div>
      </div>
    </section>

Adding video property to the Banner propTypes:

video: PropTypes.string.isRequired,

First, we add the video property to the Banner component. Then, since we’ve processed the video property or lack thereof from the pageTemplate.jsx, we know if it’s null or not. If it’s not null, we know that we are dealing with the home announcement that has a valid video asset associated with it with the slug ‘video-plus-sample’, and we add the corresponding HTML to the site. Finally, we add the video property to the Banner propTypes.

Video Plus assets in Oracle Content Management support advanced video processing features provided by Kaltura. To render these videos using Kaltura’s server, a unique entryID and partnerID are needed for each video. These IDs, when put in the pattern of a specific URL, help create the endpoint source for Kaltura’s videos. More information about how to get a streaming URL using API calls in Kaltura can be found in the Kaltura documentation.

Updating the CSS

The following content styling changes need to be made to styles.css:

Conclusion

In this tutorial, we added a Kaltura video to the Gatsby minimal site sample. In order to do that, we needed to get the entryID and partnerID for the video located in Oracle Content Management’s minimal site repository. These properties can be found in the advanced video info and used in Kaltura’s API to generate a streaming URL, which we embed into the site using an iframe. Some additional CSS styling was used to properly scale and place the video in the banner section.

All video management, collaboration, and workflow are done within Oracle Content Management. Under the covers, though, the video content is converted on the Kaltura platform, and then delivered from Kaltura. This ensures that you can manage your videos as part of the central Oracle Content Management asset hub, include them as part of your sites and experiences, and deliver those videos in an optimized way to all your channels.

More information about Video Plus assets in Oracle Content Management can be found in the documentation.