커스텀 버튼

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

참고: UMD 환경(정적 HTML/PHP/JSP)에서는 SVG/PNG 이미지 경로(string)만 사용 가능합니다. React 컴포넌트(JSX)를 사용하려면 React SDK를 사용하세요.

사용 가능한 아이콘 키

bigPlayplaypauseprevnextreplaysubtitlesubtitleOfffullscreenfullscreenExitvolumeFullvolumeMutevolumeMidpipsetting

값 유형

유형	예시	렌더링 방식
string (URL)	"/icons/play.svg"	`<img src="...">`로 렌더링
미지정	-	기본 Material Design 아이콘 사용

이미지 경로로 아이콘 교체

SVG 또는 PNG 파일 경로를 문자열로 전달하면 <img> 태그로 렌더링됩니다. 필요한 아이콘만 지정하면 나머지는 기본 아이콘이 유지됩니다.

const player = new ncplayer("video", {
    playlist: [
        { file: "https://CDN_DOMAIN/example.m3u8" },
    ],
    autostart: true,
    muted: true,
    icon: {
        play: "/icons/play.svg",
        pause: "/icons/pause.svg",
        bigPlay: "/icons/big-play.svg",
        fullscreen: "/icons/fullscreen.svg",
        fullscreenExit: "/icons/fullscreen-exit.svg",
    },
});

외부 SVG URL 활용

Iconify 등의 SVG API를 활용하여 외부 URL로 아이콘을 제공할 수도 있습니다.

const player = new ncplayer("video", {
    playlist: [
        { file: "https://CDN_DOMAIN/example.m3u8" },
    ],
    autostart: true,
    muted: true,
    icon: {
        play: "https://api.iconify.design/mdi/play-circle-outline.svg?color=%23ffffff&width=24&height=24",
        pause: "https://api.iconify.design/mdi/pause-circle-outline.svg?color=%23ffffff&width=24&height=24",
        bigPlay: "https://api.iconify.design/mdi/play-circle-outline.svg?color=%23ffffff&width=48&height=48",
        fullscreen: "https://api.iconify.design/mdi/arrow-expand-all.svg?color=%23ffffff&width=24&height=24",
        fullscreenExit: "https://api.iconify.design/mdi/arrow-collapse-all.svg?color=%23ffffff&width=24&height=24",
        setting: "https://api.iconify.design/mdi/cog-outline.svg?color=%23ffffff&width=24&height=24",
        volumeFull: "https://api.iconify.design/mdi/volume-high.svg?color=%23ffffff&width=24&height=24",
        volumeMute: "https://api.iconify.design/mdi/volume-off.svg?color=%23ffffff&width=24&height=24",
        volumeMid: "https://api.iconify.design/mdi/volume-medium.svg?color=%23ffffff&width=24&height=24",
        pip: "https://api.iconify.design/mdi/picture-in-picture-bottom-right.svg?color=%23ffffff&width=24&height=24",
    },
});

전체 HTML 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VPE Player - 커스텀 아이콘</title>
    <script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key=YOUR_ACCESS_KEY"></script>
</head>
<body>
    <div id="video" style="max-width: 800px; margin: 0 auto;"></div>

    <script>
        const player = new ncplayer("video", {
            playlist: [
                {
                    file: "https://CDN_DOMAIN/example.m3u8",
                    poster: "https://CDN_DOMAIN/poster.jpg",
                },
            ],
            autostart: true,
            muted: true,
            icon: {
                play: "/icons/play.svg",
                pause: "/icons/pause.svg",
                bigPlay: "/icons/big-play.svg",
                fullscreen: "/icons/fullscreen.svg",
                fullscreenExit: "/icons/fullscreen-exit.svg",
                setting: "/icons/setting.svg",
                volumeFull: "/icons/volume.svg",
                volumeMute: "/icons/volume-mute.svg",
            },
        });
    </script>
</body>
</html>