Oracle Content Management를 통해 Gatsby의 Video Plus 자산 사용

소개

이 자습서에서는 Oracle Content Management를 헤드리스 CMS 및 JavaScript에서 콘텐츠 전달을 위해 SDK(소프트웨어 개발 키트)를 활용하는 최소 사이트 샘플에 Video Plus(Kaltura) 비디오를 추가합니다. 이 Gatsby 샘플은 GitHub에서 사용할 수 있습니다.

모든 비디오 관리, 협업 및 워크플로우는 Oracle Content Management 내에서 수행됩니다. 하지만 표지 아래에서 비디오 내용은 Kaltura 플랫폼에서 변환된 다음 Kaltura에서 전달됩니다. 이를 통해 중앙 Oracle Content Management 자산 허브의 일부로 비디오를 관리하고 사이트 및 경험의 일부로 포함시키며 모든 채널에 최적화된 방식으로 비디오를 제공할 수 있습니다.

Oracle Content Management(partnerID 및 entryID)에서 비디오 속성을 가져온 다음 altura의 API를 호출하여 Oracle Content Management의 비디오 자산을 포함하는 다음 최소 사이트 샘플의 홈 배너로 스트리밍 URL을 읽어 들이는 Kaltura의 API를 호출합니다.

필요 조건

이 튜토리얼을 계속하기 전에 먼저 다음 정보를 읽는 것이 좋습니다.

• Oracle Content Management의 비디오
• 개츠비의 비디오

이 자습서를 따르려면 다음이 필요합니다.

• Oracle Content Management 가입
• 콘텐츠 관리자 롤이 있는 Oracle Content Management 계정
• Kaltura 비디오를 추가할 Gatsby minimum site를 완전히 설정합니다.

최소 사이트에서 Video Plus(Kaltura) 요소를 설정하는 방법

우리가 구축하고 있는 것

Gatsby minimum site sample에 필요한 asset pack에는 슬러그 'video-plus-sample'이 있는 Video Plus Sample이라는 비디오 자산이 포함되어 있습니다. 이 자습서에서는 이 비디오를 최소 사이트의 홈 발표 배너에 추가합니다. 이 코드 부분은 GitHub 저장소에서 사용할 수 없지만 이 자습서에서는 모든 코드를 제공하고 Kaltura를 사용하여 해당 비디오를 샘플에 추가하는 방법을 검토합니다.

다음은 자습서의 이 섹션 끝에 있는 홈 페이지입니다.

[연락처] 및 [사람] 페이지는 이전과 동일하게 표시됩니다.

gatsby-node.js 업데이트

다음은 gatsby-node.js 파일에 추가된 항목입니다.

GraphQL 초기 질의 외에 질의 추가:

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

비디오 속성을 가져오기 위한 질의 처리:

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

'홈' 페이지의 페이지 컨텍스트로 비디오 속성 경로 지정:

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

시작 시 gatsby-node.js는 Gatsby Source OCE 플러그인을 실행하고 사용하여 콘텐츠 저장소에서 데이터를 가져옵니다. 슬러그 'video-plus-sample'의 자산과 연관된 메타데이터를 얻기 위해 videoData 질의를 추가합니다. 특히 Kaltura의 API를 호출하고 Kaltura에서 제공된 렌더링된 비디오를 가져오려면 entryID 및 partnerID이 필요합니다. 그런 다음 질의가 수행된 후 advancedVideoInfo에서 이러한 속성에 대한 요청을 처리합니다. 마지막으로 이러한 등록 정보를 홈 페이지의 createPage 함수 컨텍스트(비디오가 표시될 위치)로 전달합니다.

pageTemplate.jsx 업데이트

다음은 pageTemplate.jsx 파일에 추가된 것입니다.

전달된 페이지 컨텍스트 처리:

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

videoDataResult가 있는지 여부를 필터링하여 <Banner> 태그에 추가합니다.

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

이 pageTemplate.jsx를 사용하여 createPage 메소드 컨텍스트에서 gatsby-node.js의 videoDataResult를 전달한 후에는 먼저 페이지 생성 상단에 있는 videoDataResult를 사용합니다. 그런 다음 배너의 경우 videoDataResult가 정의되었는지 여부를 확인해야 합니다. 정의된 경우 배너의 비디오 등록 정보는 videoDataResult일 뿐이며, 그렇지 않으면 null입니다.

Banner.jsx 업데이트

다음은 Banner.jsx 파일에 추가된 것입니다.

배너에 'video' 등록 정보 추가:

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

비디오 섹션의 HTML 추가:

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

배너 propTypes에 비디오 속성 추가:

video: PropTypes.string.isRequired,

먼저 배너 구성요소에 비디오 속성을 추가합니다. 그런 다음 비디오 속성을 처리했거나 pageTemplate.jsx의 기능이 없으므로 null인지 여부를 알 수 있습니다. Null이 아니면 슬러그 'video-plus-sample'과 연관된 유효한 비디오 자산이 있고 사이트에 해당 HTML을 추가하는 홈 공고를 처리한다는 사실을 알고 있습니다. 마지막으로 배너 propTypes에 비디오 속성을 추가합니다.

Oracle Content Management의 Video Plus 자산은 Kaltura에서 제공하는 고급 비디오 처리 기능을 지원합니다. Kaltura의 서버를 사용하여 이러한 비디오를 렌더링하려면 각 비디오에 대해 고유한 entryID 및 partnerID이 필요합니다. 이러한 ID는 특정 URL의 패턴에 둘 때 Kaltura 비디오의 엔드포인트 소스를 만드는 데 도움이 됩니다. Kaltura의 API 호출을 사용하여 스트리밍 URL을 얻는 방법에 대한 자세한 내용은 Kaltura documentation를 참조하십시오.

CSS 갱신

style.css를 변경하려면 다음과 같은 컨텐츠 스타일 지정을 변경해야 합니다.

• 파일 중간에 주요 발표 섹션에 추가되었습니다.

  .announcement .video {
        margin: 6vw auto;
        display: block;
        height: 23vw;
        width: 40vw;
      }

  위의 CSS 스타일은 홈 발표의 왼쪽에 비디오가 있는 경우 비디오의 크기가 동적으로 iframe을 구성합니다.

결론

이 자습서에서는 최소 사이트 샘플에 Kaltura 비디오를 추가했습니다. 이를 위해 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를 통해 Gatsby의 Video Plus 자산 사용

F50492-01

2021년 12월

Copyright © 2021, Oracle and/or its affiliates.

주 저자: Oracle Corporation