Utilizza asset video Plus in risposta a Oracle Content Management

Introduzione

In questa esercitazione verrà aggiunto un video Video Plus (Kaltura) al esempio sito minimo React, che utilizza Oracle Content Management come CMS senza monitor e al relativo kit di sviluppo software (SDK) per la consegna dei contenuti in JavaScript. Questo esempio di React è disponibile su GitHub.

Tutte le attività di gestione, collaborazione e workflow dei video vengono eseguite in Oracle Content Management. Sotto le coperture, però, il contenuto video viene convertito sulla piattaforma Kaltura, e poi consegnato da Kaltura. In questo modo, puoi gestire i tuoi video nell'ambito dell'asset hub centrale di Oracle Content Management, includerli nell'ambito dei tuoi siti ed esperienze e fornire tali video in modo ottimizzato a tutti i tuoi canali.

A un livello elevato, incorporeremo un asset video da Oracle Content Management ottenendo le proprietà video da Oracle Content Management (partnerID e entryID), quindi richiamando l'API di Kaltura per recuperare un URL di streaming a iframe nel banner della home sul esempio sito minimo React.

Prerequisiti

Prima di procedere con questa esercitazione, si consiglia di leggere le seguenti informazioni:

Video in Oracle Content Management

Per seguire questa esercitazione, sono necessari:

una sottoscrizione a Oracle Content Management
un account Oracle Content Management con il ruolo Amministratore contenuto
un React minimal site completamente impostato a cui aggiungere un video Kaltura.

Come configurare un elemento Video Plus (Kaltura) nel tuo sito Minimal

Cosa stiamo costruendo

Il asset pack richiesto per l'esempio sito minimo React include un asset video denominato Video Plus Sample con il slug 'video-plus-sample'. In questa esercitazione verrà aggiunto questo video al banner dell'annuncio home del sito minimo. Tenere presente che questa parte del codice non è disponibile nel repository GitHub, ma questa esercitazione fornirà tutto il codice e spiegherà come aggiungere il video al campione utilizzando Kaltura.

Questo è l'aspetto della home page alla fine di questa sezione dell'esercitazione:

Questa immagine mostra una pagina di destinazione per un sito con video React minimo.

Le pagine Contattateci e Persone continueranno ad avere lo stesso aspetto di prima.

Aggiornamento del componente sezione

Di seguito è riportato il file src/components/Section.jsx. È stato commentato con le aggiunte necessarie per rendere il componente video nella sezione dell'annuncio iniziale del sito minimo.

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

Le modifiche principali sono le seguenti (numerate e etichettate nella sezione del codice precedente):

Importare il metodo getItem da src/scripts/services.js per chiamare l'API REST. Assicurarsi che questa funzione sia esportata correttamente.
Creare una variabile di stato per le proprietà del campo video, ad esempio entryID e partnerID, necessarie per generare il video.
Aggiungere una sezione per modificare solo l'annuncio home e ottenere dati video per l'asset con slug 'video-plus-sample' e memorizzarlo nella variabile di stato.
Modificare il nome della classe in 'home' per la home page per applicare pattern CSS diversi.
Aggiungere una sezione di HTML per il video utilizzando un iframe e l'URL di origine da Kaltura.

Gli asset Video Plus in Oracle Content Management supportano le funzioni avanzate di elaborazione video fornite da Kaltura. Per eseguire il rendering di questi video utilizzando il server Kaltura, sono necessari entryID e partnerID univoci per ogni video. Questi ID, se inseriti nel pattern di un URL specifico, contribuiscono a creare l'origine endpoint per i video di Kaltura. Per ulteriori informazioni su come ottenere un URL di streaming mediante chiamate API in Kaltura, consultare la documentazione di Kaltura.

Aggiornamento CSS

È necessario apportare le seguenti modifiche allo stile del contenuto a src/styles/styles.css:

Aggiunto alla sezione di annuncio principale, nel mezzo del file:
```
.announcement .home {
      width: 100%;
      display: flex;
      margin-left: 2vw;
    }
    .announcement .video {
      margin: 6vw auto;
      display: block;
      height: 23vw;
      width: 40vw;
    }
```
Gli stili CSS sopra formano l'iframe con dimensioni dinamiche per il video nelle situazioni in cui il video si trova sul lato sinistro dell'annuncio home.
Aggiunto alla sezione a schermo piccolo (mobile), verso la parte inferiore del file:
```
.announcement .home {
        width: 100%;
        display: inline-block;
      }
    .announcement .video {
        height: 40vw;
        width: 70vw;
      }
```
Gli stili CSS sopra riportati formano l'iframe dimensionato dinamicamente per il video in situazioni in cui il video è sopra l'annuncio home quando si trova in visualizzazione mobile. In questa sezione vengono sostituite le proprietà precedenti per .home e .video di un annuncio per dimensioni di schermo più piccole.

Conclusione

In questa esercitazione è stato aggiunto un video Kaltura all'esempio sito reale minimo. A tale scopo, è necessario ottenere entryID e partnerID per il video disponibile nel repository del sito minimo di Oracle Content Management. Queste proprietà possono essere trovate nelle informazioni video avanzate e utilizzate nell'API di Kaltura per generare un URL di streaming, che incorporiamo nel sito utilizzando un iframe. Alcuni stili CSS aggiuntivi sono stati utilizzati per ridimensionare e posizionare il video nella sezione banner.

Ulteriori informazioni sugli asset Video Plus in Oracle Content Management sono reperibili nella documentazione.

Titolo e informazioni sul copyright

Utilizza asset video Plus in risposta a Oracle Content Management

F50504-01

Novembre 2021

Autore principale: Oracle Corporation