透過 Oracle Content Management 使用 Video Plus 資產

簡介

在本教學課程中，我們將新增 Video Plus (Kaltura) 視訊至最低網站範例，該範例運用 Oracle Content Management 作為無頭痛的 CMS，以及它的軟體開發套件 (SDK) 提供 JavaScript 的內容傳遞。您可以在 GitHub 取得此 Vue 範例。

所有視訊管理、協同合作及工作流程都是在 Oracle Content Management 內完成。但該影片內容是由 Kaltura 平台所轉換，然後由 Kaltura 傳送。這可確保您可以在 Oracle Content Management 資產中心的中央管理影片時，將影片納入您的網站與體驗中，並以最佳化的方式將影片傳遞給所有通路。

在高層次，我們會透過從 Oracle Content Management (partnerID 和 entryID) 取得視訊特性，然後從 Oracle Content Management 內嵌視訊資產，然後呼叫 Kaltura 的 API 將串流 URL 擷取至 iframe 的最低網站範例首頁橫幅中。

必要條件

繼續此教學課程之前，建議您先閱讀下列資訊：

若要依照本教學課程，您需要：

如何在您的最小網站中設定 Video Plus (Kaltura) 元素

我們正在打造什麼

最低網站範例所需的 asset Pack 包含一個稱為 Video Plus Sample 的視訊資產，該資產為 slug 'video-plus-sample'。在本教學課程中，我們會將此影片新增至最少網站的首頁公告標幟。請注意，GitHub 儲存區域中沒有此程式碼的這個部分，但本教學課程將會提供所有程式碼，並帶領您如何使用 Kaltura 將該影片新增至您的範例。

這是教學課程中此區段結尾的首頁畫面：

此圖像顯示具有視訊之 Vue 最小網站的登陸頁面。

「與我們聯絡」及「人員」頁面仍與之前相同。

更新資料擷取代碼

Vue 最小應用程式使用 Vuex 和 Content SDK 的某些包裝函式程式碼，從 Oracle Content Management 擷取資料。有些簡單的程式碼需要新增至 Vuex 商店，以及支援視訊整合的 SDK 介面。

第一個變更位於 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;
    }

下一個變更位於 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;
        },

更新區段元件

以下是對 src/components/section.vue 檔案所做的變更，該檔案負責處理頁面公告區段中影片 iframe 的呈現。


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

下列為元件中的代碼變更：


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

CSS 需要某些變更才能正確整合視訊的顯示。在大型畫面上顯示時，會在公告文字旁邊顯示影片，並在限制畫面上顯示影片時顯示在文字上方。

.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;
    }

下列變更會顯示在較小的畫面上：

@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;
      }
    }

結論

在本教學課程中，我們將 Kaltura 影片加入到最低的網站範例。為此，我們需要取得位於 Oracle Content Management 最小網站儲存庫之視訊的 entryID 和 partnerID。在進階影片資訊中可以找到這些屬性，以用於 Kaltura 的 API 來產生串流 URL，此 URL 會內嵌在網站中使用 iframe。某些其他的 CSS 樣式設定可用來適當調整影像大小，並將影片置於橫幅區段中。

所有視訊管理、協同合作及工作流程都是在 Oracle Content Management 內完成。但該影片內容是由 Kaltura 平台所轉換，然後由 Kaltura 傳送。這可確保您可以在 Oracle Content Management 資產中心的中央管理影片時，將影片納入您的網站與體驗中，並以最佳化的方式將影片傳遞給所有通路。

如需有關 Oracle Content Management 中 Video Plus 資產的詳細資訊，請參閱文件。