Video Player Enhancement V2

Web, Mobile, TV를 지원하는 크로스플랫폼 비디오 플레이어 SDK.
JSON 레이아웃, 스트리밍 프로토콜, 반응형 디자인을 지원합니다.

옵션 테스트

주요 기능

JSON 레이아웃 시스템

JSON 객체 하나로 컨트롤바, 버튼 배치, 영역 구성을 선언적으로 정의합니다. 코드 변경 없이 레이아웃을 교체할 수 있습니다.

커스텀 컴포넌트 삽입

플레이어 내부에 React 컴포넌트 또는 HTML 요소를 직접 삽입하여 고객사 고유의 UI와 인터랙션을 구현할 수 있습니다.

4K 재생 지원

SDK 용량 90% 감소(1.7MB → gzip 170.39KB)로 브라우저 리소스 여유를 확보하여 2K/4K 고해상도 영상을 안정적으로 재생합니다.

기본 동작 오버라이드

재생, 일시정지, 탐색 등 플레이어 기본 동작을 가로채어 커스텀 로직을 주입할 수 있습니다. 광고 삽입, 인증 체크 등에 활용 가능합니다.

Pre-roll 광고 연동

Google IMA SDK 기반 Pre-roll 광고를 지원합니다. VAST/VMAP 태그 URL로 광고를 쉽게 연결할 수 있습니다.

멀티 DRM 지원

Widevine, PlayReady 등 멀티 DRM 환경을 지원하여 다양한 디바이스에서 안전한 콘텐츠 보호가 가능합니다.

CDN Signed URL 지원

Signed URL 기반 접근 제어로 CDN 콘텐츠를 안전하게 제공할 수 있습니다.

Signed Token 실시간 업데이트

재생 중 토큰 갱신을 지원하여 세션 만료 없이 안정적으로 시청을 이어갈 수 있습니다.

실시간 레이아웃 전환

런타임에 layout 객체만 교체하면 리마운트 없이 UI가 즉시 전환됩니다. 상황별 UI 분기를 별도 빌드 없이 처리할 수 있습니다.

HLS & DASH 스트리밍

hls.js, dash.js를 외부 주입 방식으로 지원합니다. 번들에 포함되지 않아 트리셰이킹이 가능하고, 필요한 프로토콜만 로드됩니다.

디바이스별 독립 레이아웃

pc, mobile, fullscreen 각 환경에 별도 레이아웃을 지정할 수 있습니다. 미디어 쿼리 없이 디바이스에 최적화된 UI를 제공합니다.

LLM 코드 생성

llms.txt를 프롬프트에 전달하면 AI가 플레이어 세팅 코드를 자동 생성합니다. 보일러플레이트 작성 시간을 절약할 수 있습니다.

Quick Start

1. Install

npm i @sgrsoft/vpe-react-sdk

2. UMD CDN Install

https://player.vpe.naverncp.com/v2/ncplayer.js

3. LLM 코드 생성

코드 에디터 또는 LLM에 아래 프롬프트를 입력하면 자동으로 플레이어 코드를 생성합니다.

https://developer.vpe.naverncp.com/llms.txt 을 읽고 React 예제 코드 생성해줘

V1 vs V2

V2에서 달라진 점

V1
V2
SDK 용량 (원본)
1.7 MB
SDK 용량 (gzip)
170.39 KB 원본: 550.39 KB
V1
V2
gzip 기준 90% 축소
고해상도 재생
리소스 부담으로 제한적
고해상도 재생
2K / 4K 재생 능력 확보
리소스 사용량 절감으로 고해상도 안정 재생
UI 커스터마이징
고정된 레이아웃
UI 커스터마이징
JSON 기반 커스텀 레이아웃
플레이어 UI를 자유롭게 편집 가능
프레임워크 통합
UMD 스크립트 방식
프레임워크 통합
React / Next.js 라이브러리
소스 유지보수성 및 성능 향상, UMD 방식도 지원
고객사 UI 삽입
지원하지 않음
고객사 UI 삽입
커스텀 UI 삽입 및 동작
React: 컴포넌트 방식 / UMD: HTML 방식으로 고객 UI를 플레이어에 통합

Code Examples

"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 설치 후 사용

NCloud

네이버클라우드플랫폼에서 제공하는 플레이어 서비스

커스터마이징할 수 있는 우수한 성능의 SaaS 기반 비디오 플레이어 서비스. 별도 설치 없이 HTML5 표준으로 모든 디바이스에서 재생할 수 있습니다.

고품질 시청 경험

다양한 비트레이트를 지원하여 최적의 서비스를 제공

HTML5 표준

SaaS 기반으로 별도 설치 없이 모든 브라우저에서 재생

UI 커스터마이징

콘솔에서 직접 플레이어 UI를 조작하고 커스터마이징

개발 시간 단축

코드 예제와 SDK로 플레이어를 빠르게 임베드

미디어 애널리틱스

통계 데이터와 오류 로그로 상세한 분석 환경 제공

요금제

Free

Basic

무료
  • Player 1개 생성
  • 월 5,000건 플레이어 호출
  • HLS, MP4, DASH, LL-HLS 지원
Pro

Standard

910,000 원/월

VAT 별도

  • N개 Player 생성
  • 월 250,000건 호출 포함, 초과 시 건당 1원
  • Media Analytics 포함 (1,000건 무료)
  • DRM 서비스 연동 (별도 과금)