Video Plus-Assets in Gatsby mit Oracle Content Management verwenden

Einführung

In diesem Tutorial fügen wir dem Gatsby minimalen Sitebeispiel ein Video Plus-(Kaltura-)Video hinzu, das Oracle Content Management als Headless CMS sowie sein Softwareentwicklungskit (SDK) für die Inhaltsbereitstellung in JavaScript verwendet. Dieses Gatsby-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.

Auf hoher Ebene 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 Gatsby-Minimal-Sitebeispiel abzurufen.

Voraussetzungen

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

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

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

Unser Aufbau

Das asset pack, das für das Gatsby minimal-Sitebeispiel 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 Gatsby-Site mit Video.

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

gatsby-node.js wird aktualisiert

Im Folgenden werden die Ergänzungen zur Datei gatsby-node.js aufgeführt.

GraphQL-Abfrage zusätzlich zu ersten Abfragen hinzugefügt:

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

Abfrage wird verarbeitet, um Videoeigenschaften abzurufen:

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

Videoeigenschaften an den Seitenkontext für die Homepage weiterleiten:

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

Beim Start wird gatsby-node.js ausgeführt und verwendet das OCE-Plug-in für die Gatsby-Quelle, um Daten aus dem Inhalts-Repository abzurufen. Wir fügen eine videoData-Abfrage hinzu, um die Metadaten abzurufen, die mit dem Asset von slug "video-plus-sample" verknüpft sind. Insbesondere benötigen wir die entryID und partnerID, um Kaltura API aufrufen und ein gerendertes Video von Kaltura erhalten zu können. Anschließend wird die Anforderung für diese Eigenschaften in advancedVideoInfo nach der Abfrage verarbeitet. Schließlich übergeben wir diese Eigenschaften an den Kontext der Funktion createPage für die Homepage, auf der das Video angezeigt wird.

pageTemplate.jsx wird aktualisiert

Im Folgenden werden die Ergänzungen zur Datei pageTemplate.jsx aufgeführt.

Verarbeiten Sie den übergebenen Seitenkontext:

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

Filterung, um zu sehen, ob videoDataResult vorhanden ist, wird dem Tag <Banner> hinzugefügt:

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

Nachdem Sie videoDataResult aus gatsby-node.js im Kontext der createPage-Methode mit dieser pageTemplate.jsx übergeben haben, nehmen wir zuerst die videoDataResult am Anfang der Seitenerstellung an. Für das Banner muss dann geprüft werden, ob videoDataResult definiert ist. Wenn definiert, ist die Videoeigenschaft für das Banner nur videoDataResult. Andernfalls ist sie null.

Aktualisieren von Banner.jsx

Im Folgenden werden die Ergänzungen zur Datei Banner.jsx aufgeführt.

Hinzufügen einer 'video'-Eigenschaft zum Banner:

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

HTML des Videoabschnitts hinzufügen:

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

Videoeigenschaft zum Banner propTypes hinzufügen:

video: PropTypes.string.isRequired,

Zunächst wird die Videoeigenschaft zur Banner-Komponente hinzugefügt. Da die Videoeigenschaft von der SeiteTemplate.jsx verarbeitet wurde oder fehlt, wissen wir, ob sie null ist oder nicht. Wenn es nicht null ist, wissen wir, dass wir mit der Ankündigung zu Hause umgehen, mit der ein gültiges Videoasset mit dem Slug "video-plus-sample" verknüpft ist, und wir fügen die entsprechende HTML zur Site hinzu. Schließlich wird die Videoeigenschaft zum Banner propTypes hinzugefügt.

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 an der Inhaltsformatierung müssen an style.css vorgenommen werden:

Schlussfolgerung

In diesem Tutorial haben wir dem Gatsby minimalen Sitebeispiel ein Kaltura-Video 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.

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.

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