메서드

ncplayer 인스턴스의 메서드를 사용하여 플레이어를 프로그래밍 방식으로 제어할 수 있습니다.

기본 사용법

new ncplayer()가 반환하는 인스턴스를 변수에 저장한 후, 해당 변수를 통해 메서드를 호출합니다.

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

// 재생
player.play();

// 일시정지
player.pause();

// 30초 위치로 이동
player.seek(30);

재생 제어

메서드	설명
play()	영상을 재생합니다.
pause()	영상을 일시정지합니다.
seek(time: number)	지정한 시간(초)으로 이동합니다.
stop()	영상을 정지하고 처음으로 돌아갑니다.
getDuration()	영상의 전체 길이(초)를 반환합니다.
getCurrentTime()	현재 재생 위치(초)를 반환합니다.

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

// 재생
player.play();

// 일시정지
player.pause();

// 30초 위치로 이동
player.seek(30);

// 정지 (처음으로 돌아감)
player.stop();

// 현재 재생 위치 확인
const currentTime = player.getCurrentTime();
console.log("현재 위치:", currentTime, "초");

// 전체 길이 확인
const duration = player.getDuration();
console.log("전체 길이:", duration, "초");

볼륨 제어

메서드	설명
setVolume(vol: number)	볼륨을 설정합니다. (0~1)
getVolume()	현재 볼륨 값을 반환합니다.
setMuted(muted: boolean)	음소거 상태를 설정합니다.
getMuted()	음소거 상태를 반환합니다.

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

// 볼륨 설정 (0~1)
player.setVolume(0.8);

// 현재 볼륨 확인
const vol = player.getVolume();
console.log("현재 볼륨:", vol);

// 음소거
player.setMuted(true);

// 음소거 해제
player.setMuted(false);

// 음소거 상태 확인
const isMuted = player.getMuted();
console.log("음소거:", isMuted);

UI 제어

메서드	설명
enterFullscreen()	전체 화면 모드로 전환합니다.
exitFullscreen()	전체 화면 모드를 해제합니다.
pip()	Picture in Picture 모드를 토글합니다.
controlBarActive()	컨트롤 바를 활성화(표시)합니다.
layout(layout: object)	레이아웃을 동적으로 변경합니다.

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

// 전체화면 진입
player.enterFullscreen();

// 전체화면 해제
player.exitFullscreen();

// PIP 모드 토글
player.pip();

// 컨트롤 바 활성화
player.controlBarActive();

레이아웃 실시간 변경

layout() 메서드로 레이아웃을 런타임에 변경할 수 있습니다. 리마운트 없이 UI가 즉시 전환됩니다.

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

// 레이아웃 실시간 변경
player.layout({
    bottom: [
        { items: ["PlayBtn", "TimeBtn", "FullscreenBtn"], wrapper: "Group" },
    ],
});

토큰 제어

메서드	설명
tokenChange(token: string)	재생 중 Secure Token을 교체합니다.

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

// 재생 중 토큰 교체
player.tokenChange("token=st=...~exp=...~acl=...");

전체 HTML 예제

버튼을 통해 플레이어를 제어하는 완전한 예제입니다.

methods.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 Methods</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>

    <div style="margin-top: 16px; text-align: center;">
        <button onclick="player.play()">재생</button>
        <button onclick="player.pause()">일시정지</button>
        <button onclick="player.seek(30)">30초로 이동</button>
        <button onclick="player.setVolume(0.5)">볼륨 50%</button>
        <button onclick="player.setMuted(true)">음소거</button>
        <button onclick="player.enterFullscreen()">전체화면</button>
        <button onclick="player.pip()">PIP</button>
    </div>

    <script>
        const player = new ncplayer("player", {
            playlist: [
                {
                    file: "https://example.com/video/master.m3u8",
                    poster: "https://example.com/poster.jpg",
                },
            ],
            aspectRatio: "16/9",
        });
    </script>
</body>
</html>