Uso di asset video Plus in Gatsby con Oracle Content Management

Introduzione

In questa esercitazione verrà aggiunto un video Video Plus (Kaltura) al esempio sito minimo di Gatsby, che utilizza Oracle Content Management come CMS senza monitor, nonché il kit SDK (Software Development Kit) per la distribuzione dei contenuti in JavaScript. Questo esempio di Gatsby è 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'interfaccia API di Kaltura per recuperare un URL di streaming a iframe nel banner della home sul esempio sito minimo di Gatsby.

Prerequisiti

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

Per seguire questa esercitazione, sono necessari:

una sottoscrizione a Oracle Content Management
un account Oracle Content Management con il ruolo Amministratore contenuto
un Sito minimo Gatsby 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 di sito minimo di Gatsby 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 minimo Gatsby con video.

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

Aggiornamento di gatsby-node.js

Di seguito sono riportate le aggiunte al file gatsby-node.js.

GraphQL Query aggiunta in aggiunta alle query iniziali:

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

Elaborazione della query per ottenere le proprietà video:

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

Instradamento delle proprietà video al contesto di pagina per la pagina 'Home':

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

All'inizio, gatsby-node.js esegue e utilizza il plugin OCE di origine Gatsby per ottenere dati dal repository di contenuti. Aggiungiamo una query videoData per ottenere i metadati associati all'asset di slug 'video-plus-sample'. In particolare, avremo bisogno di entryID e partnerID per poter chiamare l'API di Kaltura e ottenere un video di rendering distribuito da Kaltura. Quindi, elaboriamo la richiesta di queste proprietà nel file advancedVideoInfo dopo l'esecuzione della query. Infine, queste proprietà vengono passate al contesto della funzione createPage per la home page, dove verrà visualizzato il video.

Aggiornamento di pageTemplate.jsx

Di seguito sono riportate le aggiunte al file pageTemplate.jsx.

Elaborazione del contesto di pagina passato:

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

Filtro per vedere se esiste videoDataResult, aggiunto alla tag <Banner>:

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

Dopo aver passato il file videoDataResult da gatsby-node.js nel contesto del metodo createPage utilizzando questa paginaTemplate.jsx, si effettua per la prima volta il file videoDataResult nella parte superiore della creazione della pagina. Poi, per il banner, dobbiamo vedere se il videoDataResult è definito o meno. Se definita, la proprietà video per il banner è solo videoDataResult, altrimenti è nulla.

Di seguito sono riportate le aggiunte al file Banner.jsx.

Aggiunta di una proprietà 'video' al banner:

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

Aggiunta dell'HTML della sezione video:

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

Aggiunta della proprietà video al banner propTypes:

video: PropTypes.string.isRequired,

In primo luogo, la proprietà video viene aggiunta al componente Banner. Quindi, dato che abbiamo elaborato la proprietà video o la sua mancanza da pageTemplate.jsx, sappiamo se è nulla. Se non è nullo, sappiamo che stiamo affrontando l'annuncio domestico che ha un asset video valido associato al slug 'video-plus-sample' e aggiungiamo il corrispondente HTML al sito. Infine, aggiungiamo la proprietà video al banner propTypes.

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 modifiche di stile del contenuto riportate di seguito a style.css:

Aggiunto alla sezione di annuncio principale, nel mezzo del file:
```
.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.

Conclusione

In questa esercitazione è stato aggiunto un video Kaltura al esempio sito minimo Gatsby. 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

Uso di asset video Plus in Gatsby con Oracle Content Management

F50496-01

Novembre 2021

Autore principale: Oracle Corporation

Uso di asset video Plus in Gatsby con Oracle Content Management

Introduzione

Prerequisiti

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

Cosa stiamo costruendo

Aggiornamento di gatsby-node.js

Aggiornamento di pageTemplate.jsx

Aggiornamento di Banner.jsx

Aggiornamento CSS

Conclusione