VPE 2.0 React prerequisites

Available in Classic and VPC

Supported environments

The VPE player requires the platform value to distinguish playback environments. The following two platform values are available:

• pub: Public cloud environment
• gov: Government cloud environment

Example

React example

Pass platform as a prop to the VpePlayer component.

"use client";

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

export default function PlayerPage() {
    return (
        <VpePlayer
            accessKey="YOUR_ACCESS_KEY"
            platform="pub"
            hls={Hls}
            dashjs={dashjs}
            options={{
                playlist: [
                    {
                        file: "https://CDN_DOMAIN/example_video_01.mp4",
                        poster: "https://CDN_DOMAIN/example_video_01.png",
                    },
                ],
            }}
        />
    );
}

UMD example

In UMD, do not use the platform props. Use the CDN script endpoint to distinguish between public and government cloud environments.

Public

<script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key={YOUR_ACCESS_KEY}"></script>

Government

<script src="https://player.vpe.gov-ntruss.com/v2/ncplayer.js?access_key={YOUR_ACCESS_KEY}"></script>

<script>
    const player = new ncplayer("player", {
        playlist: [
            { file: "https://CDN_DOMAIN/example_video_01.mp4" },
        ],
    });
</script>

Install packages

In a React or Next.js project, install the VPE SDK using npm or pnpm.

When you use npm:

npm i @sgrsoft/vpe-react-sdk

When you use pnpm:

pnpm add @sgrsoft/vpe-react-sdk

Peer dependencies

Install the libraries required for the streaming protocols you use. The SDK does not bundle these libraries, so you only need to install the ones required for your protocols.

# HLS streaming (required)
npm i hls.js

# DASH streaming (optional)
npm i dashjs

Next.js settings

When you use VPE with Next.js, you need the "use client" directive. VPE components use browser APIs, so you must render them as client components.

"use client";

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

export default function PlayerPage() {
    return (
        <div style={{ maxWidth: "800px", margin: "0 auto" }}>
            <VpePlayer
                hls={Hls}
                accessKey="YOUR_ACCESS_KEY"
                options={{
                    playlist: [{
                        file: "https://example.com/video/master.m3u8",
                    }],
                    autostart: true,
                    muted: true,
                    aspectRatio: "16/9",
                }}
            />
        </div>
    );
}

Use DASH streaming

To use the DASH protocol, dynamically import dashjs and pass it to the player.

"use client";

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

export default function PlayerPage() {
    const [dashjs, setDashjs] = useState(null);

    useEffect(() => {
        import("dashjs").then((mod) => {
            setDashjs(mod.default ?? mod);
        });
    }, []);

    return (
        <VpePlayer
            hls={Hls}
            dashjs={dashjs}
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [{
                    file: "<https://example.com/video/stream.mpd>",
                }],
            }}
        />
    );
}

LLM-based code generation

This guide helps you quickly get started with VPE player configuration. Provide llms.txt as a prompt so the AI can generate Next.js-based sample code.

Concepts

llms.txt is a summary document containing the core usage rules of the VPE player. Providing this file to the LLM first helps you prevent the omission of essential options, and recommended configurations when the model generates code.

Select an LLM

Copy and paste the prompt below into the LLM you are using (e.g., ChatGPT, Claude, Copilot, Cursor, etc.):

Enter the prompt

Read https://developer.vpe.naverncp.com/llms.txt and generate React sample code.

Guide

• You must replace the accessKey and playlist URL within the response code to match your project environment.
• If you use HLS, check whether hls.js injection is required.
• If the response is too long, you can also ask, "Summarize only the relevant sections."