Usar o Video Plus Assets em Reação com o Oracle Content Management

Introdução

Neste tutorial, vamos adicionar um vídeo do Video Plus (Kaltura) à Exemplo mínimo de reação de sites, que utiliza o Oracle Content Management como um CMS sem interface e seu kit de desenvolvimento de software (SDK) para entrega de conteúdo no JavaScript. Esta amostra React está disponível no GitHub.

Todo o gerenciamento, colaboração e workflow de vídeo são feitos no Oracle Content Management. No entanto, sob as capas, o conteúdo do vídeo é convertido na plataforma Kaltura e depois entregue de Kaltura. Isso garante que você possa gerenciar seus vídeos como parte do hub de ativos do Oracle Content Management central, incluí-los como parte de seus sites e experiências e entregar esses vídeos de forma otimizada para todos os seus canais.

Em um nível alto, incorporaremos um ativo de vídeo do Oracle Content Management obtendo propriedades de vídeo do Oracle Content Management (partnerID e entryID) e, em seguida, chamando a API da Kaltura para recuperar um URL de streaming para o iframe no banner inicial na Exemplo mínimo de reação do site.

Pré-requisitos

Antes de prosseguir com este tutorial, recomendamos que você leia as seguintes informações primeiro:

Vídeos no Oracle Content Management

Para seguir este tutorial, você precisará:

uma assinatura do Oracle Content Management
uma conta do Oracle Content Management com a atribuição de Administrador de Conteúdo
um site mínimo totalmente configurado ao qual adicionaremos um vídeo do Kaltura.

Como configurar um elemento Video Plus (Kaltura) em seu site mínimo

O que estamos construindo

O pacote de ativos necessário para Reacionar amostra mínima de site inclui um ativo de vídeo chamado Vídeo Plus Sample com a barra 'video-plus-sample'. Neste tutorial, vamos adicionar este vídeo ao banner de anúncio em casa do site mínimo. Observe que esta parte do código não está disponível no repositório do GitHub, mas este tutorial fornecerá todo o código e mostrará como adicionar esse vídeo à sua amostra usando o Kaltura.

Esta é a aparência da home page no final desta seção do tutorial:

Esta imagem mostra uma página inicial para um site mínimo React com vídeo.

As páginas Entre em contato conosco e pessoas ainda terão a mesma aparência anterior.

Atualizando o Componente da Seção

Veja a seguir o arquivo src/components/Section.jsx. Ele é comentado com as adições necessárias para converter o componente de vídeo na seção de anúncio em casa do site 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;

As principais alterações são as seguintes (numeradas e identificadas na seção de código acima):

Importe o método getItem de src/scripts/services.js para chamar a API REST. Certifique-se de que essa função seja exportada corretamente.
Crie uma variável de estado para as propriedades do campo de vídeo, como entryID e partnerID, necessárias para gerar o vídeo.
Adicione uma seção para modificar apenas o anúncio em casa e obter dados de vídeo do ativo com o slug 'video-plus-sample' e armazene-o na variável de estado.
Altere o nome da classe para 'home' para que a home page aplique diferentes padrões CSS.
Adicione uma seção de HTML para o vídeo usando um iframe e o URL de origem do Kaltura.

Os ativos do Video Plus no Oracle Content Management suportam recursos avançados de processamento de vídeo fornecidos pelo Kaltura. Para renderizar esses vídeos usando o servidor da Kaltura, são necessários entryID e partnerID exclusivos para cada vídeo. Esses IDs, quando colocados no padrão de um URL específico, ajudam a criar a origem do ponto final para os vídeos do Kaltura. Mais informações sobre como obter um URL de streaming usando chamadas de API no Kaltura podem ser encontradas na documentação do Kaltura.

Atualizando o CSS

As seguintes alterações de estilo de conteúdo precisam ser feitas em src/styles/styles.css:

Adicionado à seção do anúncio principal, no meio do arquivo:
```
.announcement .home {
      width: 100%;
      display: flex;
      margin-left: 2vw;
    }
    .announcement .video {
      margin: 6vw auto;
      display: block;
      height: 23vw;
      width: 40vw;
    }
```
Os estilos CSS acima formam o iframe dimensionado dinamicamente para o vídeo em situações em que o vídeo está no lado esquerdo do anúncio em casa.
Adicionado à seção Small Screen (mobile), na parte inferior do arquivo:
```
.announcement .home {
        width: 100%;
        display: inline-block;
      }
    .announcement .video {
        height: 40vw;
        width: 70vw;
      }
```
Os estilos CSS acima formam o iframe dimensionado dinamicamente para o vídeo em situações em que o vídeo está acima do anúncio em casa quando em visualização móvel. Esta seção substitui as propriedades anteriores de .home e .video de um anúncio por tamanhos de tela menores.

Conclusão

Neste tutorial, adicionamos um vídeo Kaltura à Exemplo mínimo de ação do site. Para fazer isso, precisávamos obter entryID e partnerID para o vídeo localizado no repositório mínimo de sites do Oracle Content Management. Essas propriedades podem ser encontradas nas informações de vídeo avançadas e usadas na API da Kaltura para gerar um URL de streaming, que incorporamos ao site usando um iframe. Alguns estilos CSS adicionais foram usados para escalar corretamente e colocar o vídeo na seção de banner.

Mais informações sobre os ativos do Video Plus no Oracle Content Management podem ser encontradas na documentação.

Título e Informações de Copyright

Usar o Video Plus Assets em Reação com o Oracle Content Management

F50501-01

Novembro de 2021

Autor Principal: Oracle Corporation