Video Plus-Assets in Vue mit Oracle Content Management verwenden

Einführung

In diesem Tutorial fügen wir dem Vue minimalen Sitebeispiel 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 Vue-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 Vue minimalen 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 für das Vue minimale Sitebeispiel erforderliche Asset Pack 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 Vue-Site mit Video.

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

Datenabrufcode aktualisieren

Die minimale Vue-Anwendung verwendet Vuex und einen Wrapper-Code um das Content-SDK, um Daten aus Oracle Content Management abzurufen. Es gibt einen einfachen Code, der dem Vuex-Speicher und der SDK-Schnittstelle hinzugefügt werden muss, um die Videointegration zu unterstützen.

Die erste Änderung erfolgt in der Datei src/scripts/services.js:

// Add a simple function to handle integration with the Vuex store. 
    export async function fetchVideo(videoSlug) {
      const video = await getItem(videoSlug, '');
      return video;
    }

Die nächste Änderung befindet sich in der Datei src/vuex/index.js:

// Add the import of fetchVideo from services
    import {
      fetchOceMinimalMain, fetchPage, fetchVideo, getRenditionURLs,
    } from '../scripts/services';
    ....
    // Add videoData to the state managed by Vuex
    state() {
        return {
          minimalMainData: {},
          pageData: {},
          renditionURLs: {},
          peoplePageData: {},
          videoData: {},
        };
      },
    
    ....
    
    // Add a fetchVideoData call to the actions: section of the file
    fetchVideoData({ commit }, videoId) {
          return fetchVideo(videoId).then((data) => {
            commit('setVideoData', data.fields.advancedVideoInfo.properties);
          });
        },
    
    ....
    
    // Add a setter function for the videoData to the mutations: section
        setVideoData(state, data) {
          state.videoData = data;
        },

Abschnittskomponente aktualisieren

Im Folgenden werden die Änderungen an der Datei src/components/Section.vue aufgeführt, die das Rendering des Video-iframe im Ankündigungsabschnitt der Seite abwickeln.


    // The video is rendered in the videoDiv section below. 
    // It only renders if it is displayed in the announcement section of the Home page. 
    <template>
      <div  >
        <picture v-if="section.fields.image && renditionURLs">
          <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>
        <div className="videoDiv" v-if="section.name == 'Home Announcement' && getVideoLink">
          <iframe
            className="video"
            title="video"
            :src="getVideoLink"
          />
        </div>
        <div className="textDiv">
          <h1>{{ section.fields.heading }}</h1>
          <div className="text">
            <div v-html=cleanContent></div>
          </div>
          <div v-if="section.fields.actions">
            <div v-for="(action, i) in section.fields.actions" v-bind:key="i">
              <a class="button" :href="action.link">
                {{action.name}}
              </a>
            </div>
          </div>
        </div>
      </div>
    </template>

Codeänderungen in der Komponente:


    // Add a method to the computed: section of the component to generate the link used in the video iframe. 
      getVideoLink() {
          const data = this.$store.state.videoData;
          let result = '';
          const { entryId, partner } = data;
          if (partner) {
            result = `https://cdnapisec.kaltura.com/p/${partner.id}/sp/0/playManifest/entryId/${entryId}/format/url/protocol/https/flavorParamId/301971/video.mp4`;
          }
          return result;
        },
    
    //Add code to the mounted() method of the component to retrieve the video data. 
    // Note that it only runs if the Section component is rendering the announcement panel 
    // of the Home page. 
    mounted() {
        if (this.section.fields.image || !this.section.renditionURLs) {
          this.loading = true;
          this.fetchData()
            .then(() => {
              this.loading = false;
            });
        }
        if (this.section.name && this.section.name.localeCompare('Home Announcement') === 0) {
          this.loading = true;
          this.fetchVideoData()
            .then(() => {
              this.loading = false;
            });
        }
      },
    
    // Add a final method in the methods: section of the component to call the vuex store to load the video data. 
     fetchVideoData() {
          return this.$store.dispatch('fetchVideoData', 'video-plus-sample');
        },

CSS aktualisieren

Einige Änderungen sind erforderlich, um die Anzeige des Videos korrekt zu integrieren. Wenn das Video auf einem großen Bildschirm angezeigt wird, wird es neben dem Ankündigungstext wiedergegeben. Wenn es sich auf einem eingeschränkten Bildschirm befindet, wird es über dem Text angezeigt.

.announcement > div {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      color: #ffffff;
    }
    
    .announcement>div>div {
      width:57%;
      min-height:425px;
      margin-left:3vw;
      margin-right:3vw;
      margin-top:6vw;
      margin-bottom:1vw;
      z-index:2
     }
     
     .announcement .videoDiv {
       margin-right: 0;
        margin-top:1vw;
     }
     .announcement .video {
      margin: 6vw auto;
      display: block;
      height: 23vw;
      width: 40vw;
    }

Die folgenden Änderungen werden in kleineren Bildschirmen angezeigt:

@media screen and (max-width: 1023px) {
      .announcement >div {
        -ms-flex-direction:column;
        flex-direction:column;
         -webkit-box-pack:start;
         -ms-flex-pack:start;
        justify-content: flex-start;
      }
        .announcement>div>div {
        width:100%;
       }
       
      .announcement .textDiv {
        margin-left: 6vw;
        margin-right: 6vw;
        margin-top: 6vw;
        margin-bottom: 0;
        z-index:2;
     }
    
      .announcement .text {
        margin-right: 6vw;
        margin-top: 6vw;
        margin-bottom:6vw
      }
        .announcement .video {
        height: 40vw;
        width: 70vw;
      }
    }

Schlussfolgerung

In diesem Tutorial haben wir dem Vue minimale 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.