Web 환경

new ncplayer("HTMLElement id" , {
    playlist:[                
        { file:"http://example.com/myVideo.mp4" } // 재생 소스
    ]
});

// 동영상(MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDN도메인/example_video_01.mp4',
            poster: 'https://CDN도메인/example_image_01.png',
        }
    ],
    controlBtn:{
    play:true,
    fullscreen:true,
    volume:true,
    times:true,
    pictureInPicture:true,
    setting:true,
    subtitle:true,
},

icon:{
        bigPlay:"https://CDN도메인/icon/play-circle-fill.svg", // 자동 재생 전 큰 플레이 버튼
        play:"https://CDN도메인/icon/play-fill.svg", // 재생
        use:"https://CDN도메인/icon/pause-fill.svg", // 일시 정지
        prev:"https://CDN도메인/icon/skip-back-fill.svg", // 이전 영상
        next:"https://CDN도메인/icon/skip-forward-fill.svg", // 다음 영상
        replay:"https://CDN도메인/icon/arrow-clockwise-fill.svg", // 다시 보기
        subtitle:"https://CDN도메인/icon/closed-captioning-fill.svg", // 자막 활성화
        subtitleOff:"https://CDN도메인/icon/closed-captioning.svg", // 자막 비활성화
        fullscreen:"https://CDN도메인/icon/corners-out.svg", // 전체 화면 전환
        fullscreenExit:"https://CDN도메인/icon/corners-in.svg", // 전체 화면 종료
        volumeFull:"https://CDN도메인/icon/speaker-simple-high-fill.svg", // 볼륨 최대
        volumeMute:"https://CDN도메인/icon/speaker-simple-x-fill.svg", // 볼륨 0, 음소거
        volumeMid:"https://CDN도메인/icon/speaker-simple-low-fill.svg", // 볼륨 중간
        pip:"https://CDN도메인/icon/picture-in-picture-fill.svg", // PIP
        setting:"https://CDN도메인/icon/gear-fill.svg", // 설정
   }
});

// 동영상(MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDN도메인/example_video_01.mp4',
            poster: 'https://CDN도메인/example_image_01.png',
        }
    ],
    override:{
        pip:{
            on(){
                window.player.uiHidden(); // 플레이어의 모든 UI 숨김
                // 고객사 플로팅 플레이어 실행 코드 작성
                // <예시> floatingModeStart()
            },
            off(){
                window.player.uiVisible(); // 플레이어의 모든 UI 표시
                // 고객사 플로팅 플레이어 종료 코드 작성
                // <예시> floatingModeStop()
            }
        }
    }
});

// 동영상(MP4)
const player = new ncplayer('video', {
    playlist: [
        { 
            file: 'https://CDN도메인/example_video_01.mp4',
            poster: 'https://CDN도메인/example_image_01.png',
        }
    ]
});


// 컨트롤바 UI 숨김
player.uiHidden();

// 컨트롤바 UI 표시
player.uiVisible();

let player = new ncplayer('myElement', {
    playlist: [
        { 
            file:"http://example.com/myVideo.mp4",
            poster:"http://example.com/myVideoThumb.png" 
        }
    ]
});
player.play();

let player = new ncplayer('myElement', {
    playlist: [
        { 
            file:"http://example.com/myVideo.mp4",
            poster:"http://example.com/myVideoThumb.png" 
        }
    ]
});

player.on('play',(e)=>{
    console.log('Play 되었습니다.',e);
})

let player = new ncplayer('myElement', {
    playlist: [
        { 
            file:"http://example.com/myVideo.mp4",
            poster:"http://example.com/myVideoThumb.png" 
        }
    ]
});

player.on('timeupdate',(data)=>{
    console.log('영상 전체 길이 (duration) : ',data.duration);
    console.log('현재 재생 위치 (currentTime) : ',data.currentTime);
    console.log('현재 재생 퍼센트 (percent) : ',data.percent);
    console.log('누적 재생 시간 (viewingTime) : ',data.viewingTime);
    console.log('재생소스 타입 (sourceType) : ',data.sourceType); // 재생소스 타입(vod, live)
})

let player = new ncplayer('myElement', {
    playlist: [
        { 
            file:"http://example.com/myVideo.mp4",
            poster:"http://example.com/myVideoThumb.png" 
        },
        { 
            file:"http://example.com/myVideo2.mp4",
            poster:"http://example.com/myVideoThumb2.png" 
        }
    ]
});

player.on('prevTrack',(data)=>{
    console.log('prevTrack' , data);
})

let player = new ncplayer('myElement', {
    playlist: [
        { 
            file:"http://example.com/myVideo.mp4",
            poster:"http://example.com/myVideoThumb.png" 
        },
        { 
            file:"http://example.com/myVideo2.mp4",
            poster:"http://example.com/myVideoThumb2.png" 
        }
    ]
});

player.on('nextTrack',(data)=>{
    console.log('nextTrack' , data);
})