Video Plus-Assets in Echtzeit mit Oracle Content Management verwenden

Einführung

In diesem Tutorial fügen wir dem React Minimum Site Sample ein Video Plus-(Kaltura-)Video hinzu, das Oracle Content Management als Headless CMS und sein Softwareentwicklungskit (SDK) für die Inhaltsbereitstellung in JavaScript verwendet. Dieses React-Beispiel ist auf GitHub verfügbar.

Die gesamte Videoverwaltung, Zusammenarbeit und der Workflow erfolgen in Oracle Content Management. Unter den Abdeckungen wird der Videoinhalt jedoch auf der Kaltura-Plattform konvertiert und anschließend von Kaltura geliefert. Dadurch wird sichergestellt, dass Sie Ihre Videos im zentralen Oracle Content Management-Asset-Hub verwalten, als Teil Ihrer Sites und Erfahrungen aufnehmen und diese Videos auf optimierte Weise für alle Kanäle bereitstellen können.

Im Allgemeinen wird ein Videoasset aus Oracle Content Management eingebettet, indem Videoeigenschaften aus Oracle Content Management (partnerID und entryID) abgerufen werden. Anschließend rufen wir die Kaltura-API auf, um eine Streaming-URL an iframe in das Home-Banner im Minimalen Sitebeispiel reagieren abzurufen.

Voraussetzungen

Bevor Sie mit diesem Tutorial fortfahren, sollten Sie zuerst die folgenden Informationen lesen:

Videos in Oracle Content Management

Um diesem Tutorial zu folgen, benötigen Sie Folgendes:

Oracle Content Management-Abonnement
ein Oracle Content Management-Account mit der Rolle "Inhaltsadministrator"
eine vollständig eingerichtete React Minimal Site, der wir ein Kaltura-Video hinzufügen.

So richten Sie ein Video Plus-(Kaltura-)Element auf Ihrer minimalen Site ein

Unser Aufbau

Das asset pack, das für das React minimal site example erforderlich ist, enthält ein Videoasset namens Video Plus Sample mit dem slug "video-plus-sample". In diesem Tutorial fügen wir dieses Video dem Home Ankündigungsbanner der minimalen Site hinzu. Beachten Sie, dass dieser Teil des Codes nicht im GitHub-Repository verfügbar ist. Dieses Tutorial stellt jedoch den gesamten Code bereit und erläutert, wie Sie dieses Video mit Kaltura zu Ihrem Beispiel hinzufügen.

So sieht die Homepage am Ende dieses Abschnitts des Tutorials aus:

Diese Abbildung zeigt eine Landingpage für eine minimale React-Site mit Video.

Die Seiten "Kontakt" und "Personen" sehen immer noch genauso aus wie zuvor.

Abschnittskomponente aktualisieren

Die Datei src/components/Section.jsx ist im Folgenden aufgeführt. Es wird mit den erforderlichen Ergänzungen kommentiert, um die Videokomponente in den Home Ankündigungsabschnitt der minimalen Website wiederzugeben.

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

Die wichtigsten Änderungen lauten wie folgt (im obigen Codeabschnitt nummeriert und gekennzeichnet):

Importieren Sie die Methode getItem aus src/scripts/services.js, um die REST-API aufzurufen. Stellen Sie sicher, dass diese Funktion ordnungsgemäß exportiert wird.
Erstellen Sie eine Statusvariable für die Videofeldeigenschaften wie entryID und partnerID, die zum Generieren des Videos benötigt werden.
Fügen Sie einen Abschnitt hinzu, um nur die Home-Ankündigung zu ändern und Videodaten für das Asset mit slug "video-plus-sample" abzurufen, und speichern Sie diesen in der Statusvariablen.
Ändern Sie den Klassennamen für die Homepage in "Home", um verschiedene CSS-Muster anzuwenden.
Fügen Sie einen HTML-Abschnitt für das Video mit einem iframe und der Quell-URL von Kaltura hinzu.

Video Plus-Assets in Oracle Content Management unterstützen erweiterte Videoverarbeitungsfunktionen von Kaltura. Um diese Videos mit dem Kaltura-Server wiederzugeben, sind für jedes Video eine eindeutige entryID und partnerID erforderlich. Diese IDs helfen beim Einfügen in das Muster einer bestimmten URL, die Endpunktquelle für Kaltura Videos zu erstellen. Weitere Informationen zum Abrufen einer Streaming-URL mit API-Aufrufen in Kaltura finden Sie in der Kaltura-Dokumentation.

CSS aktualisieren

Die folgenden Änderungen der Inhaltsformatierung müssen an src/styles/styles.css vorgenommen werden:

Zum Hauptabschnitt der Ankündigung in der Mitte der Datei hinzugefügt:
```
.announcement .home {
      width: 100%;
      display: flex;
      margin-left: 2vw;
    }
    .announcement .video {
      margin: 6vw auto;
      display: block;
      height: 23vw;
      width: 40vw;
    }
```
Die obigen CSS-Stile bilden den dynamisch skalierten iframe für das Video in Situationen, in denen sich das Video auf der linken Seite der Home-Ankündigung befindet.
Zum kleinen Bildschirmabschnitt (mobil) hinzugefügt, unten in der Datei:
```
.announcement .home {
        width: 100%;
        display: inline-block;
      }
    .announcement .video {
        height: 40vw;
        width: 70vw;
      }
```
Die obigen CSS-Stile bilden den dynamisch skalierten iframe für das Video in Situationen, in denen das Video über der Home-Ankündigung in der mobilen Ansicht steht. In diesem Abschnitt werden die vorherigen Eigenschaften für .home und .video einer Ankündigung für kleinere Bildschirmgrößen außer Kraft gesetzt.

Schlussfolgerung

In diesem Tutorial wurde ein Kaltura-Video zum React Minimum Site Sample hinzugefügt. Dazu mussten wir die entryID und partnerID für das Video im minimalen Site-Repository von Oracle Content Management abrufen. Diese Eigenschaften finden Sie in den erweiterten Videoinformationen und werden in der Kaltura-API verwendet, um eine Streaming-URL zu generieren, die wir mit einem iframe in die Website einbetten. Einige zusätzliche CSS-Formatierung wurde verwendet, um das Video richtig zu skalieren und in den Banner-Abschnitt zu platzieren.

Weitere Informationen zu Video Plus-Assets in Oracle Content Management finden Sie in der Dokumentation.

Titel und Copyright-Informationen

Video Plus-Assets in Echtzeit mit Oracle Content Management verwenden

F50506-01

November 2021

Hauptverfasser: Oracle Corporation