Utiliser Video Plus Assets dans Gatsby avec Oracle Content Management

Introduction

Dans ce tutoriel, nous ajouterons une vidéo Video Plus (Kaltura) à l'exemple de site Gatsby minimal, qui s'appuie sur Oracle Content Management en tant que CMS sans tête ainsi que sur son kit SDK pour la diffusion de contenu dans JavaScript. Cet exemple de Gatsby est disponible sur GitHub.

Toutes les tâches de gestion, de collaboration et de workflow vidéo sont effectuées dans Oracle Content Management. Toutefois, sous les couvertures, le contenu vidéo est converti sur la plateforme de Kaltura, puis délivré à partir de Kaltura. Vous pouvez ainsi gérer vos vidéos dans le cadre du hub de ressources central d'Oracle Content Management, les inclure dans vos sites et vos expériences, et les diffuser de manière optimisée sur tous vos canaux.

A un niveau élevé, nous intégrerons une ressource vidéo à partir d'Oracle Content Management en obtenant des propriétés vidéo à partir d'Oracle Content Management (partnerID et entryID), puis en appelant l'API de Kaltura pour extraire une URL de diffusion en continu vers iframe dans la bannière de base de l'échantillon de site minimal de Gatsby.

Prérequis

Avant de poursuivre ce tutoriel, nous vous recommandons de lire les informations suivantes en premier :

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

Configuration d'un élément Video Plus (Kaltura) dans votre site minimal

Ce que nous construisons

Le asset pack requis pour l'échantillon de site minimal de Gatsby inclut une ressource vidéo appelée Video Plus Sample avec le slug 'video-plus-sample'. Dans ce tutoriel, nous ajouterons cette vidéo à la bannière d'annonce personnelle du site minimal. Notez que cette partie du code n'est pas disponible dans le référentiel GitHub, mais ce tutoriel fournit tout le code et explique comment ajouter cette vidéo à votre échantillon à l'aide de Kaltura.

Voici à quoi ressemblera la page d'accueil à la fin de cette section du tutoriel :

Cette image présente une page de destination pour un site minime de Gatsby avec vidéo.

Les pages Nous contacter et Personnes restent identiques.

Mise à jour de gatsby-node.js

Voici les ajouts au fichier gatsby-node.js.

GraphQL Requête ajoutée en plus des requêtes initiales :

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

Traitement de la requête pour obtenir les propriétés vidéo :

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

Routage des propriétés vidéo vers le contexte de la page d'accueil :

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

Au démarrage, gatsby-node.js exécute et utilise le module d'extension OCE de la source Gatsby pour obtenir les données du référentiel de contenu. Nous ajoutons une requête videoData pour obtenir les métadonnées associées à la ressource de slug 'video-plus-sample'. En particulier, nous aurons besoin des outils entryID et partnerID pour pouvoir appeler l'API de Kaltura et obtenir une vidéo rendue de Kaltura. Ensuite, nous traitons la demande de ces propriétés dans advancedVideoInfo une fois la requête effectuée. Enfin, nous transmettons ces propriétés au contexte de la fonction createPage pour la page d'accueil, où la vidéo sera affichée.

Mise à jour de pageTemplate.jsx

Voici les ajouts au fichier pageTemplate.jsx.

Traitement du contexte de page transmis :

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

Filtrage pour voir si videoDataResult existe, ajouté à la balise <Banner> :

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

Après avoir transmis le fichier videoDataResult à partir de gatsby-node.js dans le contexte de la méthode createPage à l'aide de ce fichier pageTemplate.jsx, nous prenons d'abord le fichier videoDataResult en haut de la création de la page. Ensuite, pour la bannière, nous devons voir si videoDataResult est défini ou non. Si elle est définie, la propriété vidéo de la bannière est uniquement videoDataResult ; sinon, elle est NULL.

Mise à jour de Banner.jsx

Voici les ajouts au fichier Banner.jsx.

Ajout d'une propriété 'video' à la bannière :

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

Ajout du HTML de la section vidéo :

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

Ajout de la propriété vidéo à la bannière propTypes :

video: PropTypes.string.isRequired,

Tout d'abord, nous ajoutons la propriété vidéo au composant Bannière. Ensuite, comme nous avons traité la propriété vidéo ou son absence dans pageTemplate.jsx, nous savons s'il est NULL ou non. S'il n'est pas nul, nous savons que nous traitons de l'annonce maison qui a une ressource vidéo valide qui lui est associée avec le slug 'video-plus-sample', et nous ajoutons le HTML correspondant au site. Enfin, nous ajoutons la propriété vidéo à la bannière propTypes.

Les ressources Video Plus d'Oracle Content Management prennent en charge les fonctionnalités avancées de traitement vidéo fournies par Kaltura. Pour réaliser le rendu de ces vidéos à l'aide du serveur de Kaltura, un fichier entryID et partnerID uniques sont nécessaires pour chaque vidéo. Ces ID, lorsqu'ils sont mis dans le modèle d'une URL spécifique, aident à créer la source d'adresse pour les vidéos de Kaltura. Pour plus d'informations sur l'obtention d'une URL de transmission en continu à l'aide d'appels d'API à Kaltura, reportez-vous à la documentation de Kaltura.

Mise à jour du CSS

Les modifications de style de contenu suivantes doivent être apportées à styles.css :

Conclusion

Dans ce tutoriel, nous avons ajouté une vidéo Kaltura à l'exemple de site minimal de Gatsby. Pour ce faire, nous devions obtenir entryID et partnerID pour la vidéo située dans le référentiel de site minimal d'Oracle Content Management. Ces propriétés se trouvent dans les informations vidéo avancées et sont utilisées dans l'API de Kaltura pour générer une URL de transmission en continu, que nous intégrons au site à l'aide d'un iframe. Un style CSS supplémentaire a été utilisé pour mettre à l'échelle et placer la vidéo correctement dans la section Bannière.

Toutes les tâches de gestion, de collaboration et de workflow vidéo sont effectuées dans Oracle Content Management. Toutefois, sous les couvertures, le contenu vidéo est converti sur la plateforme de Kaltura, puis délivré à partir de Kaltura. Vous pouvez ainsi gérer vos vidéos dans le cadre du hub de ressources central d'Oracle Content Management, les inclure dans vos sites et vos expériences, et les diffuser de manière optimisée sur tous vos canaux.

Pour plus d'informations sur les ressources Video Plus dans Oracle Content Management, reportez-vous à la documentation.