Use Video Plus Assets in React with Oracle Content Management

Introduction

In this tutorial, we’ll add a Video Plus (Kaltura) video to the React 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 React 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 React 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 React 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 React minimal site with video.

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

Updating the Section Component

The following is the src/components/Section.jsx file. It’s commented with necessary additions in order to render the video component into the home announcement section of the minimal site.

/**
     * Copyright (c) 2021 Oracle and/or its affiliates.
     * Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
     */
    import React, { useState, useEffect } from 'react';
    import PropTypes from 'prop-types';
    
    import filterXSS from 'xss';
    /* [1] Added line below - getItem method from services.js to call REST API */
    import { getItem, getRenditionURLs } from '../scripts/services';
    
    /**
     * Section component.
     *
     * @param section the section to be displayed
     */
    const Section = ({ section }) => {
      const [renditionURLs, setRenditionURLs] = useState(section.renditionURLs);
      /* [2] Added line below - create state for video properties */
      const [videoFieldProperties, setVideoFieldProperties] = useState();
      const options = {
        stripIgnoreTag: true, // filter out all HTML not in the whitelist
        stripIgnoreTagBody: ['script'], // the script tag is a special case, we need
        // to filter out its content
      };
    
      const { fields } = section;
      const {
        heading,
        type,
        body,
        image,
        actions,
      } = fields;
      const cleantext = filterXSS(body, options);
    
      // fetch renditionURLs
      useEffect(() => {
        // if no background is set or renditionURLs are already present, return
        // else fetch from the server
        if (!image || section.renditionURLs) return;
        getRenditionURLs(image.id).then((urls) => {
          setRenditionURLs(urls);
        }, console.error);
      }, [section]);
    
      /* [3] Added section of code below - logic to fetch video information 
      *  from Oracle Content Management API assuming section is Home 
      *  Announcement and asset with slug 'video-plus-sample' exists.
      */
      let onHome = '';
      // fetch video if on Home Announcement Section
      if (section.name && section.name.localeCompare('Home Announcement') === 0) {
        onHome = 'home';
        useEffect(() => {
          // Attaches video with slug 'video-plus-sample' to Home Announcement
          getItem('video-plus-sample').then((videoProperties) => {
            setVideoFieldProperties(videoProperties.fields.advancedVideoInfo.properties);
          }, console.error);
        }, [section]);
      }
    
      return (
        <section className={`content ${type}`} key={section.id}>
          <!-- [4] Added className to be Home if on home page for different CSS -->
          <div className={`${onHome}`}>
            {renditionURLs && (
              <picture>
                <source type="image/webp" srcSet={renditionURLs.srcset} />
                <source srcSet={renditionURLs.jpgSrcset} />
                <img
                  id="header-image"
                  src={renditionURLs.large}
                  alt="Company Logo"
                  width={renditionURLs.width}
                  height={renditionURLs.height}
                />
              </picture>
            )}
            <!-- [5] Added section below to HTML for video -->
            {videoFieldProperties && (
              <div>
                <iframe
                  className="video"
                  title="video"
                  src={`https://cdnapisec.kaltura.com/p/${videoFieldProperties.partner.id}/sp/0/playManifest/entryId/${videoFieldProperties.entryId}/format/url/protocol/https/flavorParamId/301971/video.mp4`}
                />
              </div>
            )}
            <div className="textcontent">
              <h1>{heading}</h1>
              <div className="text">
                {/* eslint-disable-next-line react/no-danger */}
                <div dangerouslySetInnerHTML={{ __html: cleantext }} />
              </div>
              {actions && (
                <div>
                  {actions.map((action) => (
                    <a className="button" href={action.link}>
                      {action.name}
                    </a>
                  ))}
                </div>
              )}
            </div>
          </div>
        </section>
      );
    };
    
    Section.propTypes = {
      section: PropTypes.shape().isRequired,
    };
    
    export default Section;

The main changes are as follows (numbered and labeled in the code section above):

  1. Import the getItem method from src/scripts/services.js to call the REST API. Ensure that this function is properly exported.

  2. Create a state variable for the video field properties such as entryID and partnerID needed to generate the video.

  3. Add a section to only modify the home announcement and get video data for the asset with slug ‘video-plus-sample’ and store this in the state variable.

  4. Change the class name to ‘home’ for the home page to apply different CSS patterns.

  5. Add a section of HTML for the video using an iframe and the source URL from Kaltura.

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 src/styles/styles.css:

Conclusion

In this tutorial, we added a Kaltura video to the React 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.