기본 사용법

Classic/VPC 환경에서 이용 가능합니다.

React/Next.js 환경에서 VPE 플레이어를 사용하는 방법을 설명합니다.

React/Next.js

VpePlayer 컴포넌트를 import하고 필수 props를 전달합니다.

app/player/page.tsx

"use client";
import Hls from "hls.js";
import { VpePlayer, type PlayerHandle } from "@sgrsoft/vpe-react-sdk";
import { useRef } from "react";

export default function PlayerPage() {
  const playerRef = useRef<PlayerHandle>(null);

  return (
    <div style={{ maxWidth: "800px", margin: "0 auto" }}>
      <VpePlayer
        ref={playerRef}
        hls={Hls}
        accessKey="YOUR_ACCESS_KEY"
        options={{
          playlist: [
            {
              file: "https://example.com/video/master.m3u8",
              poster: "https://example.com/poster.jpg",
              description: {
                title: "영상 제목",
                profile_name: "채널명",
              },
            },
          ],
          autostart: true,
          muted: true,
          aspectRatio: "16/9",
        }}
      />
    </div>
  );
}

필수 Props

선택 Props

레이아웃 커스텀

layout prop으로 플레이어 UI를 커스터마이징할 수 있습니다. 레이아웃은 pc, mobile, fullscreen 환경별로 독립 정의됩니다.

{
  "pc": {
    "vod": {
      "order": ["top", "upper", "center", "lower", "bottom"],
      "top": [
        { "items": ["MetaDesc"] },
        { "wrapper": "Blank", "items": [], "align": "left" },
        { "items": ["ShareBtn"] }
      ],
      "center": [
        { "items": ["BigPlayBtn"], "align": "center" }
      ],
      "bottom": [
        { "items": ["ProgressBar"] },
        { "items": ["PlayBtn", "VolumeBtn", "TimeDisplay"], "align": "left" },
        { "items": ["SettingBtn", "PIPBtn", "FullscreenBtn"], "align": "right" }
      ]
    }
  }
}

레이아웃 JSON은 UI Editor에서 시각적으로 편집할 수도 있습니다.