Video Player Enhancement V2
플레이어를 넘어 프론트엔드 전체를 다루는 SDK.
Web · Mobile · TV에서 동일한 API로 동작합니다.
React, React Native, UMD 환경에서
DRM, 커스텀 UI, 반응형 레이아웃을 지원합니다.
주요 기능
JSON 레이아웃 시스템
JSON으로 컨트롤바를 선언적으로 구성. PC/모바일/전체화면 × VOD/Live 분기와 런타임 머지·전환까지 지원합니다.
커스텀 컴포넌트 삽입
플레이어 내부에 React 컴포넌트나 HTML 요소를 직접 배치해 고객사 고유의 UI와 인터랙션을 구현할 수 있습니다.
기본 동작 오버라이드
재생·일시정지·탐색 등 기본 동작을 가로채 커스텀 로직을 주입. 광고 삽입, 인증 체크 등에 활용할 수 있습니다.
HLS & DASH 외부 주입
hls.js, dash.js를 외부 주입 방식으로 연결. 번들에 포함하지 않아 필요한 프로토콜만 트리셰이킹·로드합니다.
멀티 DRM 지원
Widevine, PlayReady, FairPlay를 통합 지원해 다양한 디바이스에서 안전한 콘텐츠 보호를 제공합니다.
Signed URL & 토큰 갱신
CDN Signed URL 기반 접근 제어 + 재생 중 토큰 실시간 갱신으로 세션 만료 없이 안정적인 시청을 보장합니다.
Google IMA Pre-roll 광고
Google IMA SDK 기반 Pre-roll 광고를 지원합니다. VAST/VMAP 태그 URL로 광고를 빠르게 연결할 수 있습니다.
경량 SDK (120KB gzip)
V1 대비 약 93% 감소(1.7MB → 120KB gzip). 브라우저 리소스 여유로 2K/4K 영상도 안정적으로 재생합니다.
LLM 코드 생성
llms.txt를 LLM 프롬프트에 전달하면 플레이어 세팅 코드를 자동 생성. 보일러플레이트 작성 시간을 절약합니다.
지원 런타임
하나의 SDK · 5개 런타임 — Web, Mobile, TV, iOS Native에서 동일하게 동작합니다
SDK Packages
npm에 배포된 VPE V2 패키지 — UMD 환경은 CDN script로 제공됩니다
Quick Start
3분 안에 첫 플레이어 띄우기 — 환경을 선택하세요
1. 설치
npm i @sgrsoft/vpe-react-sdk hls.js2. 최소 코드
"use client";
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
export default function Page() {
return (
<VpePlayer
hls={Hls}
accessKey="YOUR_ACCESS_KEY"
options={{
playlist: [{ file: "https://CDN/example.m3u8" }],
}}
/>
);
}3. 다음 단계
React 개발자 가이드LLM으로 더 빠르게
코드 에디터 / LLM 채팅에 아래 프롬프트를 입력하면 환경에 맞는 코드가 자동 생성됩니다.
https://developer.vpe.naverncp.com/llms.txt 을 읽고 React 예제 코드 생성해줘V1 vs V2
V2에서 달라진 점
Code Examples
자주 쓰는 시나리오별 코드 스니펫
HLS / DASH 스트림 한 줄 설정
"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://CDN/master.m3u8",
poster: "https://CDN/poster.jpg",
},
],
autostart: true,
muted: true,
aspectRatio: "16/9",
}}
/>
);
}
Naver Cloud Platform 기반 SaaS 비디오 플레이어
콘솔에서 직접 플레이어를 만들고, Analytics·DRM·CDN까지 NCP 인프라로 한 번에
콘솔 기반 플레이어 관리
콘솔에서 Player를 생성·관리하고 UI 옵션을 시각적으로 편집
Media Analytics
시청·재생·에러 데이터를 자동 수집해 상세한 분석 리포트 제공
One Click Multi DRM
Widevine · PlayReady · FairPlay를 단일 토큰으로 통합 지원
NCP CDN · Signed URL
Naver Cloud CDN과 연동된 보안 스트리밍 환경을 즉시 사용
요금제
무료로 시작하고, 트래픽이 늘면 Standard로 업그레이드
Basic
Free소규모 / 테스트 용도
- Player 1개 생성
- 월 5,000건 플레이어 호출
- HLS · MP4 · DASH · LL-HLS 지원
Standard
ProductionVAT 별도 · 상용 서비스 권장
- Player N개 생성
- 월 250,000건 호출 포함 (초과 시 건당 1원)
- Media Analytics 포함 (1,000건 무료)
- One Click Multi DRM 연동 (별도 과금)