Oracle Content Management를 통해 반응하는 Video Plus 자산 사용
소개
이 자습서에서는 Oracle Content Management를 헤드리스 CMS 및 JavaScript에서 콘텐츠 전달을 위해 SDK(소프트웨어 개발 키트)를 활용하는 React minimum site sample에 Video Plus(Kaltura) 비디오를 추가합니다. 이 반응 샘플은 GitHub에서 사용할 수 있습니다.
모든 비디오 관리, 협업 및 워크플로우는 Oracle Content Management 내에서 수행됩니다. 하지만 표지 아래에서 비디오 내용은 Kaltura 플랫폼에서 변환된 다음 Kaltura에서 전달됩니다. 이를 통해 중앙 Oracle Content Management 자산 허브의 일부로 비디오를 관리하고 사이트 및 경험의 일부로 포함시키며 모든 채널에 최적화된 방식으로 비디오를 제공할 수 있습니다.
Oracle Content Management(partnerID 및 entryID)에서 비디오 속성을 가져온 다음 altura의 API를 호출하여 Oracle Content Management에서 비디오 자산을 포함하는 다음 React minimum site sample의 홈 배너로 스트리밍 URL을 검색하도록 Kaltura의 API를 호출합니다.
필요 조건
이 튜토리얼을 계속하기 전에 먼저 다음 정보를 읽는 것이 좋습니다.
이 자습서를 따르려면 다음이 필요합니다.
- Oracle Content Management 가입
- 콘텐츠 관리자 롤이 있는 Oracle Content Management 계정
- Kaltura 비디오를 추가할 최소 대응 사이트를 완전히 설정합니다.
최소 사이트에서 Video Plus(Kaltura) 요소를 설정하는 방법
우리가 구축하고 있는 것
정확한 사이트 샘플에 필요한 자산 팩에는 슬러그 'video-plus-sample'이 있는 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 documentation를 참조하십시오.
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 비디오를 React minimum site sample에 추가했습니다. 이를 위해 Oracle Content Management의 최소 사이트 저장소에 있는 비디오에 대한 entryID 및 partnerID을 가져와야 했습니다. 이러한 속성은 고급 비디오 정보에서 찾을 수 있으며 Kaltura의 API에서 iframe을 사용하여 사이트에 포함할 스트리밍 URL을 생성하는 데 사용할 수 있습니다. 일부 추가 CSS 스타일링은 배너 섹션에 제대로 배율을 조정하고 비디오를 배치하는 데 사용되었습니다.
모든 비디오 관리, 협업 및 워크플로우는 Oracle Content Management 내에서 수행됩니다. 하지만 표지 아래에서 비디오 내용은 Kaltura 플랫폼에서 변환된 다음 Kaltura에서 전달됩니다. 이를 통해 중앙 Oracle Content Management 자산 허브의 일부로 비디오를 관리하고 사이트 및 경험의 일부로 포함시키며 모든 채널에 최적화된 방식으로 비디오를 제공할 수 있습니다.
Oracle Content Management의 Video Plus 자산에 대한 자세한 내용은 문서에서 확인할 수 있습니다.
Oracle Content Management를 통해 반응하는 Video Plus 자산 사용
F50498-01
2021년 12월
Copyright © 2021, Oracle and/or its affiliates.
주 저자: Oracle Corporation