기본 사용법

UMD(CDN) 환경에서 VPE 플레이어 인스턴스를 생성하고 기본 옵션을 설정하는 방법을 설명합니다.

ncplayer 인스턴스 생성

new ncplayer()로 플레이어 인스턴스를 생성합니다. 첫 번째 인자는 플레이어를 렌더링할 HTML 요소의 id이고, 두 번째 인자는 옵션 객체입니다.

const player = new ncplayer("player", {
    playlist: [
        {
            file: "https://example.com/video/master.m3u8",
        },
    ],
});

playlist 설정

playlist는 재생할 미디어 목록을 배열로 전달합니다. 각 항목에는 file(영상 URL)과 poster(썸네일)를 지정할 수 있습니다.

const player = new ncplayer("player", {
    playlist: [
        {
            file: "https://example.com/video/master.m3u8",
            poster: "https://example.com/poster.jpg",
            description: {
                title: "영상 제목",
                profile_name: "채널명",
                profile_image: "https://example.com/profile.png",
                created_at: "2026.01.01",
            },
        },
    ],
});

자동 재생 및 음소거

autostart로 자동 재생을 설정하고, muted로 초기 음소거 상태를 지정합니다.

주의: 브라우저 자동 재생 정책으로 인해 autostart: true 사용 시 muted: true를 함께 설정해야 정상 동작합니다.

const player = new ncplayer("player", {
    playlist: [
        {
            file: "https://example.com/video/master.m3u8",
        },
    ],
    autostart: true,
    muted: true,
});

기본 옵션 예제

화면 비율, 자동 재생, 음소거 등 기본 옵션을 함께 설정하는 예제입니다.

const player = new ncplayer("player", {
    playlist: [
        {
            file: "https://example.com/video/master.m3u8",
            poster: "https://example.com/poster.jpg",
        },
    ],
    autostart: true,
    muted: true,
    aspectRatio: "16/9",
    controls: true,
});

여러 영상 재생

playlist 배열에 여러 항목을 추가하면 플레이리스트 기능을 사용할 수 있습니다. 이전/다음 버튼으로 영상을 전환할 수 있습니다.

const player = new ncplayer("player", {
    playlist: [
        {
            file: "https://example.com/video/first.m3u8",
            poster: "https://example.com/poster1.jpg",
            description: {
                title: "첫 번째 영상",
                profile_name: "채널명",
            },
        },
        {
            file: "https://example.com/video/second.m3u8",
            poster: "https://example.com/poster2.jpg",
            description: {
                title: "두 번째 영상",
                profile_name: "채널명",
            },
        },
        {
            file: "https://example.com/video/third.m3u8",
            poster: "https://example.com/poster3.jpg",
            description: {
                title: "세 번째 영상",
                profile_name: "채널명",
            },
        },
    ],
    autostart: true,
    muted: true,
    aspectRatio: "16/9",
});

전체 HTML 예제

스크립트 로드부터 플레이어 생성까지 포함한 완전한 예제입니다.

index.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="player" style="max-width: 800px; margin: 0 auto;"></div>

    <script>
        const player = new ncplayer("player", {
            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",
        });
    </script>
</body>
</html>