基本的な使い方

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で視覚的に編集することもできます。