VPE 2.0 React 개요

Classic/VPC 환경에서 이용 가능합니다.

Video Player Enhancement V2(VPE 2.0)는 네이버클라우드에서 제공하는 차세대 웹 비디오 플레이어 SDK입니다. JSON 기반 레이아웃 시스템과 커스텀 컴포넌트 삽입 기능을 지원하며, 다양한 스트리밍 프로토콜과의 호환성을 제공합니다.

주요 기능

VPE 2.0 React에서 제공하는 주요 기능은 다음과 같습니다.

1. JSON 레이아웃 시스템: 컨트롤바, 버튼 배치, 영역 구성을 JSON 객체로 선언적으로 정의할 수 있습니다.
2. 커스텀 컴포넌트: React 컴포넌트 또는 HTML 요소를 플레이어 내부에 직접 삽입할 수 있습니다.
3. HLS 및 DASH 스트리밍: hls.js, dash.js를 외부 주입 방식으로 연동하여 번들 크기를 최적화합니다.
4. 디바이스별 레이아웃: PC, 모바일, 전체화면 환경별로 독립적인 레이아웃을 구성할 수 있습니다.
5. 기본 동작 오버라이드: 재생, 일시정지, 탐색 등 기본 동작을 가로채어 커스텀 로직을 적용할 수 있습니다.
6. DRM 지원: Widevine, FairPlay, PlayReady를 지원하여 콘텐츠를 안전하게 보호합니다.

SDK 패키지 구성

VPE 2.0 React에서 제공하는 SDK 패키지는 다음과 같습니다.

지원 환경

VPE 2.0 React에서 지원하는 환경은 다음과 같습니다.

빠른 시작

npm으로 설치한 후 바로 사용할 수 있습니다.

npm i @sgrsoft/vpe-react-sdk hls.js

"use client";

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export default function Player() {
    return (
        <VpePlayer
            hls={Hls}
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [{
                    file: "<https://example.com/video/master.m3u8>",
                }],
                autostart: true,
                muted: true,
            }}
        />
    );
}