使用视频加成资产与 Oracle Content Management 作出响应

简介

在本教程中，我们将向 React Min site 示例添加一个增强视频 (Kaltura)，该视频利用 Oracle Content Management 作为无标题 CMS 及其软件开发工具包 (Software development kit， SDK) 在 JavaScript 中交付内容。GitHub 上提供了此反应示例。

所有视频管理、协作和工作流都是在 Oracle Content Management 中完成的。不过，在封面下，视频内容在 Kaltura 平台上转换，然后从 Kaltura 传送。这可确保您可以将视频作为 Oracle Content Management 中央资产中心的一部分进行管理，将视频作为您的站点和体验的一部分进行包含，并将这些视频以优化的方式传送到所有渠道。

概括地说，我们将通过从 Oracle Content Management 获取视频属性（partnerID 和 entryID），从 Oracle Content Management 中嵌入视频资产，然后调用 Kaltura 的 API，将指向 iframe 的流 URL 检索到反应最小的站点示例上的主标题。

先决条件

在继续本教程之前，我们建议您先阅读以下信息：

Oracle Content Management 中的视频

要学习本教程，您需要：

Oracle Content Management 订阅
具有内容管理员角色的 Oracle Content Management 账户
完全设置反应最少的网站，我们将向其添加 Kaltura 视频。

如何在最小站点中设置增强视频 (Kaltura) 元素

我们正在构建的内容

反应最小站点示例所需的资产包包括一个名为 Video Plus Sample 的视频资产，带有 slug ‘ video-plus-sample。在本教程中，我们将向最小站点的主页公告标题添加此视频。请注意，这部分代码在 GitHub 资料档案库中不可用，但本教程将提供所有代码，并介绍如何使用 Kaltura 将该视频添加到示例。

以下是本教程本节末尾的主页：

此图显示具有视频的反应最小站点的登录页面。

“与我们联系”和“人员”页面看起来仍然相同。

更新区段组件

下面是 src/components/Section.jsx 文件。它带有必要的添加内容，以便将视频组件呈现到最少站点的起始公告部分。

/**
     * Copyright (c) 2021 Oracle and/or its affiliates.
     * Licensed under the Universal Permissive License v 1.0 as shown at https://oss.oracle.com/licenses/upl.
     */
    import React, { useState, useEffect } from 'react';
    import PropTypes from 'prop-types';
    
    import filterXSS from 'xss';
    /* [1] Added line below - getItem method from services.js to call REST API */
    import { getItem, getRenditionURLs } from '../scripts/services';
    
    /**
     * Section component.
     *
     * @param section the section to be displayed
     */
    const Section = ({ section }) => {
      const [renditionURLs, setRenditionURLs] = useState(section.renditionURLs);
      /* [2] Added line below - create state for video properties */
      const [videoFieldProperties, setVideoFieldProperties] = useState();
      const options = {
        stripIgnoreTag: true, // filter out all HTML not in the whitelist
        stripIgnoreTagBody: ['script'], // the script tag is a special case, we need
        // to filter out its content
      };
    
      const { fields } = section;
      const {
        heading,
        type,
        body,
        image,
        actions,
      } = fields;
      const cleantext = filterXSS(body, options);
    
      // fetch renditionURLs
      useEffect(() => {
        // if no background is set or renditionURLs are already present, return
        // else fetch from the server
        if (!image || section.renditionURLs) return;
        getRenditionURLs(image.id).then((urls) => {
          setRenditionURLs(urls);
        }, console.error);
      }, [section]);
    
      /* [3] Added section of code below - logic to fetch video information 
      *  from Oracle Content Management API assuming section is Home 
      *  Announcement and asset with slug 'video-plus-sample' exists.
      */
      let onHome = '';
      // fetch video if on Home Announcement Section
      if (section.name && section.name.localeCompare('Home Announcement') === 0) {
        onHome = 'home';
        useEffect(() => {
          // Attaches video with slug 'video-plus-sample' to Home Announcement
          getItem('video-plus-sample').then((videoProperties) => {
            setVideoFieldProperties(videoProperties.fields.advancedVideoInfo.properties);
          }, console.error);
        }, [section]);
      }
    
      return (
        <section className={`content ${type}`} key={section.id}>
          <!-- [4] Added className to be Home if on home page for different CSS -->
          <div className={`${onHome}`}>
            {renditionURLs && (
              <picture>
                <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>
            )}
            <!-- [5] Added section below to HTML for video -->
            {videoFieldProperties && (
              <div>
                <iframe
                  className="video"
                  title="video"
                  src={`https://cdnapisec.kaltura.com/p/${videoFieldProperties.partner.id}/sp/0/playManifest/entryId/${videoFieldProperties.entryId}/format/url/protocol/https/flavorParamId/301971/video.mp4`}
                />
              </div>
            )}
            <div className="textcontent">
              <h1>{heading}</h1>
              <div className="text">
                {/* eslint-disable-next-line react/no-danger */}
                <div dangerouslySetInnerHTML={{ __html: cleantext }} />
              </div>
              {actions && (
                <div>
                  {actions.map((action) => (
                    <a className="button" href={action.link}>
                      {action.name}
                    </a>
                  ))}
                </div>
              )}
            </div>
          </div>
        </section>
      );
    };
    
    Section.propTypes = {
      section: PropTypes.shape().isRequired,
    };
    
    export default Section;

主要更改如下（在上面的代码部分中编号和标记）：

从 src/scripts/services.js 中导入 getItem 方法以调用 REST API。确保正确导出此函数。
为生成视频所需的视频字段属性（如 entryID 和 partnerID）创建状态变量。
添加一个部分以仅修改房屋公告，并获取具有 slug“video-plus-sample”的资产视频数据，并将其存储在状态变量中。
将主页的类名称更改为“主页”，以应用不同的 CSS 模式。
使用 iframe 和 Kaltura 中的源 URL 为视频添加 HTML 部分。

Oracle Content Management 中的增强视频资产支持 Kaltura 提供的高级视频处理功能。要使用 Kaltura 的服务器呈现这些视频，每个视频都需要一个唯一的 entryID 和 partnerID。这些 ID 放在特定 URL 的模式中时，有助于为 Kaltura 的视频创建端点源。有关如何使用 Kaltura 中的 API 调用获取流 URL 的更多信息，请参阅 Kaltura 文档。

更新 CSS

需要对 src/styles/styles.css 进行以下内容样式更改：

已添加到文件中间的主公告部分：

.announcement .home {
      width: 100%;
      display: flex;
      margin-left: 2vw;
    }
    .announcement .video {
      margin: 6vw auto;
      display: block;
      height: 23vw;
      width: 40vw;
    }

当视频位于主页公告左侧时，上面的 CSS 样式将形成视频的动态大小 iframe。

已添加到文件底部的小屏幕（移动）部分：
```
.announcement .home {
        width: 100%;
        display: inline-block;
      }
    .announcement .video {
        height: 40vw;
        width: 70vw;
      }
```
在移动视图中，当视频位于主页公告顶部时，上面的 CSS 样式将形成视频的动态大小 iframe。本节将覆盖公告的 .home 和 .video 的先前属性，以了解较小的屏幕大小。

结论

在本教程中，我们将 Kaltura 视频添加到反应最小站点示例。为此，我们需要获取 Oracle Content Management 最少站点存储库中视频的 entryID 和 partnerID。可以在高级视频信息中找到这些属性，并使用 Kaltura 的 API 生成流 URL，我们使用 iframe 嵌入到站点中。还使用了一些额外的 CSS 样式来正确缩放视频并将其放在标题部分中。

有关 Oracle Content Management 中增强视频资产的详细信息，请参阅文档。

标题和版权信息

使用视频加成资产与 Oracle Content Management 作出响应

F50503-01

2021 年 1 月

第一作者：Oracle Corporation