Use Video Plus Assets in Vue with Oracle Content Management

Introduction

In this tutorial, we’ll add a Video Plus (Kaltura) video to the Vue minimal site sample, which leverages Oracle Content Management as a headless CMS as well as its software development kit (SDK) for content delivery in JavaScript. This Vue sample is available on GitHub.

All video management, collaboration, and workflow are done within Oracle Content Management. Under the covers, though, the video content is converted on the Kaltura platform, and then delivered from Kaltura. This ensures that you can manage your videos as part of the central Oracle Content Management asset hub, include them as part of your sites and experiences, and deliver those videos in an optimized way to all your channels.

At a high level, we’ll embed a video asset from Oracle Content Management by obtaining video properties from Oracle Content Management (partnerID and entryID) and then calling Kaltura’s API to retrieve a streaming URL to iframe into the home banner on the Vue minimal site sample.

Prerequisites

Before proceeding with this tutorial, we recommend that you read the following information first:

To follow this tutorial, you’ll need:

How to Set Up a Video Plus (Kaltura) Element in Your Minimal Site

What We’re Building

The asset pack that’s required for the Vue minimal site sample includes a video asset called Video Plus Sample with the slug ‘video-plus-sample’. In this tutorial, we’ll be adding this video to the home announcement banner of the minimal site. Note that this portion of the code is not available in the GitHub repository, but this tutorial will provide all the code and go over how to add that video to your sample using Kaltura.

This is what the home page will look like at the end of this section of the tutorial:

This image shows a landing page for a Vue minimal site with video.

The Contact Us and People pages will still look the same as before.

Updating the Data Retrieval Code

The Vue minimal application uses Vuex and some wrapper code around the Content SDK to retrieve data from Oracle Content Management. There’s some simple code that needs to be added to the Vuex store and the SDK interface to support the video integration.

The first change is in the src/scripts/services.js file:

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

The next change is in the src/vuex/index.js file:

// 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;
        },

Updating the Section Component

Below are the changes made to the src/components/Section.vue file, which handles the rendering of the video iframe in the announcements section of the page.


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

These are the code changes in the component:


    // 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');
        },

Updating the CSS

Some changes are needed to the CSS to integrate the display of the video properly. When displayed on a large screen, the video is rendered adjacent to the announcement text and when it’s on a constrained screen, it’s displayed above the text.

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

The following changes are made to display on smaller screens:

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

Conclusion

In this tutorial, we added a Kaltura video to the Vue minimal site sample. In order to do that, we needed to get the entryID and partnerID for the video located in Oracle Content Management’s minimal site repository. These properties can be found in the advanced video info and used in Kaltura’s API to generate a streaming URL, which we embed into the site using an iframe. Some additional CSS styling was used to properly scale and place the video in the banner section.

All video management, collaboration, and workflow are done within Oracle Content Management. Under the covers, though, the video content is converted on the Kaltura platform, and then delivered from Kaltura. This ensures that you can manage your videos as part of the central Oracle Content Management asset hub, include them as part of your sites and experiences, and deliver those videos in an optimized way to all your channels.

More information about Video Plus assets in Oracle Content Management can be found in the documentation.