Oracle Content Managementと反応するVideo Plusアセットの使用
イントロダクション
このチュートリアルでは、ビデオ・プラス(Kaltura)のビデオを「最小限のサイト・サンプルで反応」に追加します。このサンプルでは、Oracle Content ManagementをヘッドレスのCMSと、JavaScriptでのコンテンツ配信用のソフトウェア開発キット(SDK)を利用します。このReactサンプルは、GitHubで入手できます。
すべてのビデオ管理、コラボレーションおよびワークフローは、Oracle Content Management内で実行されます。しかし、カバーの下では、ビデオの内容はKalturaプラットフォームで変換され、その後Kalturaから配信されます。これにより、ビデオを中央のOracle Content Managementアセット・ハブの一部として管理し、それらをサイトおよびエクスペリエンスの一部として含め、それらのビデオをすべてのチャネルに最適化された方法で配信できるようになります。
概要レベルでは、Oracle Content Management (partnerIDおよびentryID)からビデオ・プロパティを取得し、KalturaのAPIをコールして、「最小限のサイト・サンプルの処理」のホーム・バナーにストリーミングURLをiframeに取得することで、Oracle Content Managementからビデオ・アセットを埋め込みます。
前提条件
このチュートリアルを進める前に、まず次の情報を確認することをお勧めします。
このチュートリアルに従うには、次のものが必要です。
- Oracle Content Managementサブスクリプション
- コンテンツ管理者ロールを持つOracle Content Managementアカウント
- Kalturaのビデオを追加する完全なセットアップ最小サイト。
最小サイトでビデオプラス(Kaltura)要素を設定する方法
オラクルが構築しているもの
「最小サイト・サンプルの処理」に必要なアセット・パックには、ビデオ・プラス・サンプルというビデオ・アセットが含まれており、スラグの'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などのビデオ・フィールド・プロパティの状態変数を作成します。
ホーム・アナウンスメントを変更するだけで、スラグの「video-plus-sample」があるアセットのビデオ・データを取得し、これを状態変数に格納します。
異なるCSSパターンを適用するには、ホーム・ページのクラス名を「home」に変更します。
iframeとKalturaのソースURLを使用して、ビデオのHTMLのセクションを追加します。
Oracle Content ManagementのVideo Plusアセットは、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内で実行されます。しかし、カバーの下では、ビデオの内容はKalturaプラットフォームで変換され、その後Kalturaから配信されます。これにより、ビデオを中央のOracle Content Managementアセット・ハブの一部として管理し、それらをサイトおよびエクスペリエンスの一部として含め、それらのビデオをすべてのチャネルに最適化された方法で配信できるようになります。
Oracle Content ManagementのVideo Plusアセットの詳細は、ドキュメンテーションを参照してください。
Oracle Content Managementと反応するVideo Plusアセットの使用
F50502-01
2020年11月
Copyright © 2021, Oracle and/or its affiliates.
原本著者: Oracle Corporation