VPE 2.0 React の概要

Classic/VPC環境で利用できます。

Video Player Enhancement V2(VPE 2.0)は、NAVERクラウドが提供する次世代ウェブビデオプレイヤー SDKです。JSONベースのレイアウトシステムとカスタムコンポーネントの挿入機能をサポートしており、様々なストリーミングプロトコルとの互換性を提供します。

主な機能

VPE 2.0 Reactが提供する主な機能は次の通りです。

1. JSONレイアウトシステム: コントロールバー、ボタンの配置、領域の構成を、JSONオブジェクトとして宣言的に定義できます。
2. カスタムコンポーネント: Reactコンポーネントや HTML要素を、プレイヤー内に直接挿入できます。
3. HLSおよび DASHストリーミング: hls.js、dash.jsを外部組込方式で連携させ、バンドルのサイズを最適化します。
4. デバイス別レイアウト: PC、モバイル、全画面表示といった環境ごとに、独立したレイアウトを構成できます。
5. 基本動作のオーバーライド: 再生、一時停止、検索などの基本動作をインターセプトして、カスタムロジックを適用できます。
6. DRMをサポート: Widevine、FairPlay、PlayReadyをサポートし、コンテンツを安全に保護します。

SDKパッケージ構成

VPE 2.0 Reactが提供する SDKパッケージは次の通りです。

サポート環境

VPE 2.0 Reactがサポートする環境は次の通りです。

クイックスタート

npmでインストールした後、すぐに使用できます。

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