Uso de activos de Video Plus en reacción con Oracle Content Management

Introducción

En este tutorial, agregaremos un vídeo con Video Plus (Kaltura) al ejemplo de sitio mínimo de React, 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 React 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 reacción.

Requisitos

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

Vídeos en Oracle Content Management

Para seguir este tutorial, necesitará:

una suscripción a Oracle Content Management
Una cuenta de Oracle Content Management con el rol de administrador de contenido
un sitio mínimo de React totalmente configurado al que agregaremos un vídeo de Kaltura.

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

Lo que estamos creando

El paquete de activos que se requiere para el ejemplo de sitio mínimo reactivo incluye un activo de vídeo denominado 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 React con vídeo.

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

Actualización del componente de sección

A continuación, se muestra el archivo src/components/Section.jsx. Se comenta con las adiciones necesarias para presentar el componente de video en la sección de anuncio de casa del sitio mínimo.

/**
     * 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;

Los principales cambios son los siguientes (numerados y etiquetados en la sección de código anterior):

Importe el método getItem desde src/scripts/services.js para llamar a la API de REST. Asegúrese de que esta función se ha exportado correctamente.
Cree una variable de estado para las propiedades del campo de video, como entryID y partnerID, necesarias para generar el video.
Agregue una sección para modificar solo el anuncio de inicio y obtener datos de vídeo para el activo con el segmento 'video-plus-sample' y almacénelo en la variable de estado.
Cambie el nombre de clase a 'home' para que la página inicial aplique patrones CSS diferentes.
Agregue una sección de HTML para el vídeo utilizando un iframe y la URL de origen de Kaltura.

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

Se deben realizar los siguientes cambios de estilo de contenido en src/styles/styles.css:

Se ha agregado a la sección principal del anuncio, en medio del archivo:
```
.announcement .home {
      width: 100%;
      display: flex;
      margin-left: 2vw;
    }
    .announcement .video {
      margin: 6vw auto;
      display: block;
      height: 23vw;
      width: 40vw;
    }
```
Los estilos CSS anteriores forman el iframe de tamaño dinámico para el vídeo en situaciones en las que el vídeo está en el lado izquierdo del anuncio en casa.
Agregado a la sección de pantalla pequeña (móvil), hacia la parte inferior del archivo:
```
.announcement .home {
        width: 100%;
        display: inline-block;
      }
    .announcement .video {
        height: 40vw;
        width: 70vw;
      }
```
Los estilos CSS anteriores forman el iframe de tamaño dinámico para el vídeo en situaciones en las que el vídeo está encima del anuncio en casa cuando está en vista móvil. Esta sección sustituye las propiedades anteriores de .home y .video de un anuncio para tamaños de pantalla más pequeños.

Conclusión

En este tutorial, agregamos un vídeo de Kaltura a la muestra mínima de sitio de React. 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.

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

Título e Información de Copyright

Uso de activos de Video Plus en reacción con Oracle Content Management

F50505-01

noviembre de 2021

Autor Principal: Oracle Corporation