Uso de activos de Video Plus en Vue con Oracle Content Management

Introducción

En este tutorial, agregaremos un vídeo con Video Plus (Kaltura) al ejemplo mínimo de sitios, que utiliza Oracle Content Management como CMS sin cabecera, así como su kit de desarrollo de software (SDK) para la entrega de contenido en JavaScript. Este ejemplo de Vue está disponible en GitHub.

Toda la gestión de vídeos, la colaboración y el flujo de trabajo se realizan dentro de Oracle Content Management. Bajo las cubiertas, sin embargo, el contenido de video se convierte en la plataforma Kaltura, y luego se entrega desde Kaltura. Esto garantiza que puede gestionar sus vídeos como parte del hub de activos central de Oracle Content Management, incluirlos como parte de sus sitios y experiencias y ofrecerlos de forma optimizada a todos sus canales.

En un nivel superior, embeberemos un activo de vídeo de Oracle Content Management mediante la obtención de propiedades de vídeo de Oracle Content Management (partnerID y entryID) y, a continuación, llamamos a la API de Kaltura para recuperar una URL de flujo de iframe en el banner de inicio en el ejemplo de sitio mínimo de voz.

Requisitos

Antes de continuar con este tutorial, le recomendamos que lea primero la siguiente información:

Para seguir este tutorial, necesitará:

Cómo configurar un elemento Video Plus (Kaltura) en su sitio mínimo

Lo que estamos creando

El paquete de activos necesario para el ejemplo de sitio mínimo de salida incluye un activo de vídeo denominado Video Plus Sample con el fragmento 'video-plus-sample'. En este tutorial, agregaremos este vídeo a la bandera del anuncio en casa del sitio mínimo. Tenga en cuenta que esta parte del código no está disponible en el repositorio de GitHub, pero este tutorial proporcionará todo el código y supervisará cómo agregar ese vídeo a su muestra mediante Kaltura.

Este es el aspecto que tendrá la página inicial al final de esta sección del tutorial:

En esta imagen se muestra una página de llegada para un sitio mínimo de Vue con vídeo.

Las páginas Contacto y Personas seguirán teniendo el mismo aspecto que antes.

Actualización del código de recuperación de datos

La aplicación Vue minimal utiliza Vuex y algún código de envoltorio alrededor del SDK de contenido para recuperar datos de Oracle Content Management. Hay un código simple que se debe agregar a la tienda de Vuex y a la interfaz de SDK para soportar la integración de vídeo.

El primer cambio está en el archivo 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;
    }

El siguiente cambio está en el archivo 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;
        },

Actualización del componente de sección

A continuación se muestran los cambios realizados en el archivo src/components/Section.vue, que maneja la representación del iframe de vídeo en la sección de anuncios de la página.


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

Estos son los cambios de código del componente:


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

Actualización de CSS

Se necesitan algunos cambios en el CSS para integrar correctamente la visualización del vídeo. Cuando se muestra en una pantalla grande, el vídeo se presenta junto al texto del anuncio y cuando está en una pantalla restringida, se muestra encima del texto.

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

Se realizan los siguientes cambios para mostrar en pantallas más pequeñas:

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

Conclusión

En este tutorial, agregamos un vídeo de Kaltura a la muestra mínima de sitio. Para ello, necesitábamos obtener entryID y partnerID para el vídeo ubicado en el repositorio de sitios mínimo de Oracle Content Management. Estas propiedades se pueden encontrar en la información de vídeo avanzada y usar en la API de Kaltura para generar una URL de transmisión, que incrustamos en el sitio usando un iframe. Se ha utilizado algún estilo CSS adicional para escalar correctamente y colocar el vídeo en la sección de banner.

Toda la gestión de vídeos, la colaboración y el flujo de trabajo se realizan dentro de Oracle Content Management. Bajo las cubiertas, sin embargo, el contenido de video se convierte en la plataforma Kaltura, y luego se entrega desde Kaltura. Esto garantiza que puede gestionar sus vídeos como parte del hub de activos central de Oracle Content Management, incluirlos como parte de sus sitios y experiencias y ofrecerlos de forma optimizada a todos sus canales.

Puede encontrar más información sobre los activos de Video Plus en Oracle Content Management en la documentación.