JSON 객체 하나로 컨트롤바, 버튼 배치, 영역 구성을 선언적으로 정의합니다. 코드 변경 없이 레이아웃을 교체할 수 있습니다.
플레이어 내부에 React 컴포넌트 또는 HTML 요소를 직접 삽입하여 고객사 고유의 UI와 인터랙션을 구현할 수 있습니다.
SDK 용량 68% 감소(1.7MB → 550.39KB, gzip: 170.39KB)로 브라우저 리소스 여유를 확보하여 2K/4K 고해상도 영상을 안정적으로 재생합니다.
재생, 일시정지, 탐색 등 플레이어 기본 동작을 가로채어 커스텀 로직을 주입할 수 있습니다. 광고 삽입, 인증 체크 등에 활용 가능합니다.
Google IMA SDK 기반 Pre-roll 광고를 지원합니다. VAST/VMAP 태그 URL로 광고를 쉽게 연결할 수 있습니다.
Widevine, PlayReady 등 멀티 DRM 환경을 지원하여 다양한 디바이스에서 안전한 콘텐츠 보호가 가능합니다.
Signed URL 기반 접근 제어로 CDN 콘텐츠를 안전하게 제공할 수 있습니다.
재생 중 토큰 갱신을 지원하여 세션 만료 없이 안정적으로 시청을 이어갈 수 있습니다.
런타임에 layout 객체만 교체하면 리마운트 없이 UI가 즉시 전환됩니다. 상황별 UI 분기를 별도 빌드 없이 처리할 수 있습니다.
hls.js, dash.js를 외부 주입 방식으로 지원합니다. 번들에 포함되지 않아 트리셰이킹이 가능하고, 필요한 프로토콜만 로드됩니다.
pc, mobile, fullscreen 각 환경에 별도 레이아웃을 지정할 수 있습니다. 미디어 쿼리 없이 디바이스에 최적화된 UI를 제공합니다.
llms.txt를 프롬프트에 전달하면 AI가 플레이어 세팅 코드를 자동 생성합니다. 보일러플레이트 작성 시간을 절약할 수 있습니다.
npm i @sgrsoft/vpe-react-sdkhttps://player.vpe.naverncp.com/v2/ncplayer.js코드 에디터 또는 LLM에 아래 프롬프트를 입력하면 자동으로 플레이어 코드를 생성합니다.
https://player.vpe.naverncp.com/v2/llms.txt 을 읽고 React 예제 코드 생성해줘V2에서 달라진 점
"use client";
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
export default function Player() {
return (
<div style={{ maxWidth: "800px", margin: "0 auto" }}>
<VpePlayer
hls={Hls}
accessKey="YOUR_ACCESS_KEY"
options={{
playlist: [
{
file: "https://example.com/video/master.m3u8",
poster: "https://example.com/poster.jpg",
},
],
autostart: true,
muted: true,
aspectRatio: "16/9",
}}
/>
</div>
);
}npm i @sgrsoft/vpe-react-sdk hls.js 설치 후 사용