커스텀 버튼

options.icon을 사용하면 플레이어 컨트롤바의 기본 아이콘을 원하는 이미지나 React 컴포넌트로 교체할 수 있습니다. 지정하지 않은 아이콘은 기본 Material Design 아이콘이 유지됩니다.

인터랙티브 데모

아래 버튼으로 아이콘 모드를 전환하여 차이를 확인해 보세요.

IconOverrides 타입

각 키에 string 또는 ReactNode를 전달할 수 있습니다.

type IconOverrides = {
    bigPlay?: string | ReactNode;       // 큰 재생 버튼 아이콘
    play?: string | ReactNode;          // 재생 아이콘
    pause?: string | ReactNode;         // 일시정지 아이콘
    prev?: string | ReactNode;          // 이전 트랙 아이콘
    next?: string | ReactNode;          // 다음 트랙 아이콘
    replay?: string | ReactNode;        // 다시 재생 아이콘
    subtitle?: string | ReactNode;      // 자막 켜기 아이콘
    subtitleOff?: string | ReactNode;   // 자막 끄기 아이콘
    fullscreen?: string | ReactNode;    // 전체화면 아이콘
    fullscreenExit?: string | ReactNode;// 전체화면 해제 아이콘
    volumeFull?: string | ReactNode;    // 볼륨 최대 아이콘
    volumeMute?: string | ReactNode;    // 음소거 아이콘
    volumeMid?: string | ReactNode;     // 볼륨 중간 아이콘
    pip?: string | ReactNode;           // PIP 아이콘
    setting?: string | ReactNode;       // 설정 아이콘
};

값 유형

유형	예시	렌더링 방식
string	"/icons/play.svg"	`<img src={url}>`로 렌더링
ReactNode	<FaPlay />	React 컴포넌트/JSX를 그대로 렌더링
미지정	-	기본 Material Design 아이콘 사용

사용 가능한 아이콘 키

bigPlayplaypauseprevnextreplaysubtitlesubtitleOfffullscreenfullscreenExitvolumeFullvolumeMutevolumeMidpipsetting

React 컴포넌트로 아이콘 교체

커스텀 SVG 컴포넌트나 react-icons 등의 아이콘 라이브러리를 활용하여 JSX로 아이콘을 교체할 수 있습니다.

app/player/page.tsx

"use client";

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

// 커스텀 SVG 컴포넌트 정의
function PlayIcon() {
    return (
        <svg viewBox="0 0 24 24" width="1.5em" height="1.5em" fill="#ffffff">
            <polygon points="6,3 20,12 6,21" />
        </svg>
    );
}

function PauseIcon() {
    return (
        <svg viewBox="0 0 24 24" width="1.5em" height="1.5em" fill="#ffffff">
            <rect x="5" y="3" width="4" height="18" />
            <rect x="15" y="3" width="4" height="18" />
        </svg>
    );
}

function FullscreenIcon() {
    return (
        <svg viewBox="0 0 24 24" width="1.5em" height="1.5em" fill="none" stroke="#ffffff" strokeWidth="2">
            <polyline points="15,3 21,3 21,9" />
            <polyline points="9,21 3,21 3,15" />
            <polyline points="21,15 21,21 15,21" />
            <polyline points="3,9 3,3 9,3" />
        </svg>
    );
}

export default function CustomIconPlayer() {
    return (
        <VpePlayer
            hls={Hls}
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [
                    { file: "https://example.com/video/master.m3u8" },
                ],
                autostart: true,
                muted: true,
                aspectRatio: "16/9",
                icon: {
                    play: <PlayIcon />,
                    pause: <PauseIcon />,
                    bigPlay: <PlayIcon />,
                    fullscreen: <FullscreenIcon />,
                    fullscreenExit: <FullscreenExitIcon />,
                    setting: <SettingIcon />,
                    volumeFull: <VolumeIcon />,
                    volumeMute: <VolumeMuteIcon />,
                    volumeMid: <VolumeIcon />,
                },
            }}
        />
    );
}

이미지 경로로 아이콘 교체

SVG 또는 PNG 파일 경로를 문자열로 전달하면 <img> 태그로 렌더링됩니다. React와 UMD 환경 모두에서 사용 가능합니다.

"use client";

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

export default function SvgUrlIconPlayer() {
    return (
        <VpePlayer
            hls={Hls}
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [
                    { file: "https://example.com/video/master.m3u8" },
                ],
                autostart: true,
                muted: true,
                aspectRatio: "16/9",
                icon: {
                    play: "/icons/play.svg",
                    pause: "/icons/pause.svg",
                    bigPlay: "/icons/big-play.svg",
                    fullscreen: "/icons/fullscreen.svg",
                    fullscreenExit: "/icons/fullscreen-exit.svg",
                },
            }}
        />
    );
}

혼합 사용

이미지 경로와 React 컴포넌트를 함께 사용할 수 있습니다. 필요한 아이콘만 지정하면 나머지는 기본 아이콘이 유지됩니다.

app/player/page.tsx

"use client";

import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
import { FaPlay, FaPause } from "react-icons/fa";

export default function MixedIconPlayer() {
    return (
        <VpePlayer
            hls={Hls}
            accessKey="YOUR_ACCESS_KEY"
            options={{
                playlist: [
                    { file: "https://example.com/video/master.m3u8" },
                ],
                autostart: true,
                muted: true,
                aspectRatio: "16/9",
                icon: {
                    // React 컴포넌트
                    play: <FaPlay style={{ fontSize: "1.2rem", color: "#fff" }} />,
                    pause: <FaPause style={{ fontSize: "1.2rem", color: "#fff" }} />,
                    // 이미지 경로
                    bigPlay: "/icons/big-play.svg",
                    fullscreen: "/icons/fullscreen.svg",
                    fullscreenExit: "/icons/fullscreen-exit.svg",
                },
            }}
        />
    );
}

참고: UMD 환경(정적 HTML/PHP/JSP)에서는 React 컴포넌트를 사용할 수 없으므로, SVG/PNG 이미지 경로(string)만 사용 가능합니다.