Uso de activos de Video Plus en Gatsby con Oracle Content Management

Introducción

En este tutorial, agregaremos un vídeo de Video Plus (Kaltura) al ejemplo de sitio mínimo de Gatsby, que utiliza Oracle Content Management como CMS sin cabecera, así como su kit de desarrollo de software (SDK) para la entrega de contenido en JavaScript. Este ejemplo de Gatsby está disponible en GitHub.

Toda la gestión de vídeos, la colaboración y el flujo de trabajo se realizan dentro de Oracle Content Management. Bajo las cubiertas, sin embargo, el contenido de video se convierte en la plataforma Kaltura, y luego se entrega desde Kaltura. Esto garantiza que puede gestionar sus vídeos como parte del hub de activos central de Oracle Content Management, incluirlos como parte de sus sitios y experiencias y ofrecerlos de forma optimizada a todos sus canales.

En un nivel superior, embeberemos un activo de vídeo de Oracle Content Management mediante la obtención de propiedades de vídeo de Oracle Content Management (partnerID y entryID) y, a continuación, llamamos a la API de Kaltura para recuperar una URL de flujo de iframe en el banner de inicio en el ejemplo de sitio mínimo de Gatsby.

Requisitos

Antes de continuar con este tutorial, le recomendamos que lea primero la siguiente información:

Para seguir este tutorial, necesitará:

Cómo configurar un elemento Video Plus (Kaltura) en su sitio mínimo

Lo que estamos creando

El paquete de activos necesario para el ejemplo de sitio mínimo de Gatsby incluye un activo de vídeo llamado Video Plus Sample con el fragmento 'video-plus-sample'. En este tutorial, agregaremos este vídeo a la bandera del anuncio en casa del sitio mínimo. Tenga en cuenta que esta parte del código no está disponible en el repositorio de GitHub, pero este tutorial proporcionará todo el código y supervisará cómo agregar ese vídeo a su muestra mediante Kaltura.

Este es el aspecto que tendrá la página inicial al final de esta sección del tutorial:

En esta imagen se muestra una página de llegada para un sitio mínimo de Gatsby con vídeo.

Las páginas Contacto y Personas seguirán teniendo el mismo aspecto que antes.

Actualizando gatsby-node.js

A continuación se muestran las adiciones al archivo gatsby-node.js.

GraphQL Consulta agregada además de consultas iniciales:

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

Procesamiento de consulta para obtener propiedades de vídeo:

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

Enrutamiento de propiedades de vídeo al contexto de la página inicial:

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

Al iniciar, gatsby-node.js se ejecuta y utiliza el plugin de OCE de origen de Gatsby para obtener datos del repositorio de contenido. Agregamos una consulta videoData para obtener los metadatos asociados al activo del segmento 'video-plus-sample'. En particular, necesitaremos entryID y partnerID para poder llamar a la API de Kaltura y obtener un vídeo presentado entregado desde Kaltura. A continuación, procesamos la solicitud de estas propiedades en advancedVideoInfo después de realizar la consulta. Por último, transferimos estas propiedades al contexto de la función createPage para la página inicial, donde se mostrará el vídeo.

Actualizando pageTemplate.jsx

A continuación se muestran las adiciones al archivo pageTemplate.jsx.

Procesando el contexto de página transferido:

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

Filtrando para ver si existe videoDataResult, agregado a la etiqueta <Banner>:

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

Después de transferir videoDataResult de gatsby-node.js en el contexto del método createPage mediante este pageTemplate.jsx, primero tomamos videoDataResult en la parte superior de la creación de la página. A continuación, para el banner, debemos ver si videoDataResult está definido o no. Si se define, la propiedad de vídeo de Banner es solo videoDataResult; de lo contrario, es nula.

Actualización de Banner.jsx

A continuación se muestran las adiciones al archivo Banner.jsx.

Agregando una propiedad 'video' al banner:

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

Adición del HTML de la sección de vídeo:

<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>

Agregando propiedad de video al rótulo propTypes:

video: PropTypes.string.isRequired,

En primer lugar, agregamos la propiedad de video al componente Banner. Luego, como hemos procesado la propiedad de video o la falta de la misma desde pageTemplate.jsx, sabemos si es nula o no. Si no es nulo, sabemos que estamos tratando con el anuncio de casa que tiene un activo de vídeo válido asociado con el fragmento 'video-plus-sample', y agregamos el HTML correspondiente al sitio. Por último, agregamos la propiedad de vídeo al rótulo propTypes.

Los activos de Video Plus en Oracle Content Management soportan funciones avanzadas de procesamiento de vídeo proporcionadas por Kaltura. Para presentar estos vídeos utilizando el servidor de Kaltura, se necesitan entryID y partnerID para cada vídeo. Estos ID, cuando se colocan en el patrón de una URL específica, ayudan a crear la fuente de punto final para los vídeos de Kaltura. Puede encontrar más información sobre cómo obtener una URL de transmisión mediante llamadas de API en Kaltura en la documentación de Kaltura.

Actualización de CSS

Los siguientes cambios de estilo de contenido deben realizarse en style.css:

Conclusión

En este tutorial, agregamos un vídeo de Kaltura a la muestra mínima de sitios de Gatsby. Para ello, necesitábamos obtener entryID y partnerID para el vídeo ubicado en el repositorio de sitios mínimo de Oracle Content Management. Estas propiedades se pueden encontrar en la información de vídeo avanzada y usar en la API de Kaltura para generar una URL de transmisión, que incrustamos en el sitio usando un iframe. Se ha utilizado algún estilo CSS adicional para escalar correctamente y colocar el vídeo en la sección de banner.

Toda la gestión de vídeos, la colaboración y el flujo de trabajo se realizan dentro de Oracle Content Management. Bajo las cubiertas, sin embargo, el contenido de video se convierte en la plataforma Kaltura, y luego se entrega desde Kaltura. Esto garantiza que puede gestionar sus vídeos como parte del hub de activos central de Oracle Content Management, incluirlos como parte de sus sitios y experiencias y ofrecerlos de forma optimizada a todos sus canales.

Puede encontrar más información sobre los activos de Video Plus en Oracle Content Management en la documentación.