이벤트

VPE 플레이어에서 발생하는 이벤트를 수신하여 커스텀 로직을 구현할 수 있습니다.

이벤트 리스닝

React에서는 onEvent Props를 사용합니다.

"use client";

import Hls from "hls.js";
import { VpePlayer, type PlayerHandle } from "@sgrsoft/vpe-react-sdk";
import { useRef, useEffect } from "react";

export default function PlayerPage() {
     //이벤트 수신
     const handleEvent = useCallback((evt: any) => {
                switch (evt.type) {
                    case "ready":
                        console.log("ready", "플레이어가 로드되었습니다.");
                        break;
                    case "error":
                        break;
                    case "adStart":
                        console.log("adStart", "광고 시작");
                        break;
                    case "adComplete":
                        console.log("adComplete", "광고 완료");
                        break;
                    case "adSkip":
                        console.log("adSkip", "광고 스킵");
                        break;
                    case "adError":
                        console.log("adError", evt.data?.message);
                        break;
                    // NAM 광고 이벤트
                    case "adBreakStart":
                        console.log("adBreakStart", "NAM 광고 구간 시작");
                        break;
                    case "adBreakEnd":
                        console.log("adBreakEnd", "NAM 광고 구간 종료");
                        break;
                    case "adStarted":
                        console.log("adStarted", "NAM 광고 재생");
                        break;
                    case "adSkipped":
                        console.log("adSkipped", "NAM 광고 스킵");
                        break;
                }
            }, []);

    const playerRef = useRef<PlayerHandle>(null);



    return (
        <VpePlayer
            ref={playerRef}
            hls={Hls}
            accessKey="YOUR_ACCESS_KEY"
            onEvent={handleEvent}
            options={{
                playlist: [{
                    file: "https://example.com/video/master.m3u8",
                }],
            }}
        />
    );
}

재생 이벤트

이벤트설명
ready플레이어가 준비되었을때 발생
play재생이 시작될 때 발생
pause일시정지될 때 발생
ended영상이 끝까지 재생되었을 때 발생
timeupdate재생 시간이 업데이트될 때 주기적으로 발생
seeking탐색(시크)이 시작될 때 발생
seeked탐색(시크)이 완료될 때 발생
ratechange재생 속도가 변경될 때 발생
volumechange볼륨이 변경될 때 발생
loadedmetadata미디어 메타데이터가 로드되었을 때 발생
canplay재생 가능한 상태가 되었을 때 발생

UI 이벤트

이벤트설명
fullscreenchange전체화면 상태가 변경될 때 발생
controlbaractive컨트롤 바가 활성화될 때 발생
controlbarhide컨트롤 바가 숨겨질 때 발생

에러 이벤트

이벤트설명
error재생 에러가 발생했을 때 발생
hlserrorHLS 관련 에러가 발생했을 때 발생
dasherrorDASH 관련 에러가 발생했을 때 발생

광고 이벤트 (IMA)

이벤트설명
adStart광고 재생이 시작될 때 발생
adComplete광고 재생이 완료될 때 발생
adSkip사용자가 광고를 스킵했을 때 발생
adError광고 로드/재생 에러가 발생했을 때 발생

광고 이벤트 (NAM)

이벤트설명
adBreakStart광고 구간 시작 (콘텐츠 일시정지)
adBreakEnd광고 구간 종료 (콘텐츠 재생 재개)
adLoaded광고 로드 완료
adStarted개별 광고 재생 시작
adComplete개별 광고 재생 완료
adSkipped사용자가 광고 스킵
adError광고 로드/재생 에러 (event.data.message에 상세 메시지)

UMD 이벤트 리스닝

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

    player.on("play", function() {
        console.log("재생 시작");
    });

    player.on("adStart", function() {
        console.log("광고 시작");
    });

    player.on("adComplete", function() {
        console.log("광고 완료");
    });

    player.on("adSkip", function() {
        console.log("광고 스킵");
    });

    player.on("adError", function(e) {
        console.log("광고 에러", e.data?.message);
    });

    // NAM 광고 이벤트
    player.on("adBreakStart", function() {
        console.log("NAM 광고 구간 시작");
    });

    player.on("adBreakEnd", function() {
        console.log("NAM 광고 구간 종료");
    });

    player.on("error", function(e) {
        console.error("에러 발생:", e);
    });
</script>
React
메서드One Click Multi DRM