VPE 2.0 React overview

Available in Classic and VPC

Video Player Enhancement V2 (or VPE 2.0) is the next-generation web video player SDK provided by NAVER Cloud. The SDK supports a JSON-based layout system along with custom component insertion capabilities, and it delivers extensive compatibility with diverse streaming protocols.

Key features

The key features that VPE 2.0 React provides include the following:

1. JSON layout system: You can declaratively define the control bar, button placement, and layout components using JSON objects.
2. Custom components: You can insert React components or HTML elements directly into the player.
3. HLS and DASH streaming: You can integrate hls.js and dash.js through external injection to optimize bundle size.
4. Layouts by device: You can create independent layouts for desktop, mobile, and Full screen environments.
5. Override default behavior: You can intercept default actions such as play, pause, and seek to implement custom logic.
6. DRM support: Supports Widevine, FairPlay, and PlayReady to protect content securely.

SDK package contents

VPE 2.0 React provides the following SDK packages:

Supported environments

VPE 2.0 React supports the following environments:

Quick start

Install the package via npm to begin integration right away.

npm i @sgrsoft/vpe-react-sdk hls.js dashjs

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