VPE 2.0 소개

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

주요 기능

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

SDK 패키지 구성

지원 환경

빠른 시작

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,
            }}
        />
    );
}