Web 환경

Classic/VPC 환경에서 이용 가능합니다.

Web 환경에서는 웹 환경에서 Video Player Enhancement의 플레이어를 적용하는 방법과 플레이어 옵션을 설정하는 방법을 설명합니다.

플레이어 적용

웹 페이지에 플레이어를 적용하는 방법은 다음과 같습니다.

1. 네이버 클라우드 플랫폼 콘솔의 Region 메뉴와 Platform 메뉴에서 이용 중인 환경을 클릭해 주십시오.
2. Services > Media > Video Player Enhancement 메뉴를 차례대로 클릭해 주십시오.
3. Video Player Management 메뉴를 클릭해 주십시오.
4. 플레이어 목록에서 웹 환경에 적용할 플레이어의 [SDK 주소] 버튼을 클릭해 주십시오.
5. 플레이어를 적용할 서비스 환경을 선택한 후 SDK 주소의 [복사] 버튼을 클릭해 주십시오.
   • 해당 플레이어의 SDK 주소가 클립보드에 복사됩니다.
6. 복사한 SDK 주소를 다음과 같이 웹 페이지의 HTML에 추가해 주십시오.

   <script src="플레이어의 SDK 주소"></script>
   

플레이어 설정

플레이어의 옵션은 네이버 클라우드 플랫폼 콘솔에서 손쉽게 미리 설정할 수 있으며(플레이어 설정 참고), 각각의 속성을 설정하여 플레이어를 커스터마이징할 수도 있습니다.
플레이어의 기본 구조는 다음과 같습니다.

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", // 설정
   }
});

Picture In Picture 기능의 재정의(Override)

제공되는 PIP 기능을 웹사이트 내 플로팅 플레이어 기능으로 변경할 수 있습니다. 예제는 다음과 같습니다.

// 동영상(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()
            }
        }
    }
});

플로팅 플레이어 UI 숨김

PIP 기능을 플로팅 플레이어로 변경한 경우, 플로팅 플레이어의 컨트롤 UI 표시 여부를 설정할 수 있습니다.
해당 기능은 플로팅 플레이어 구현 시 반드시 고려해야 할 메소드이며, controlBarActive/controlBarDeactive 메소드와 별개로 uiHidden 메소드를 사용하여 모든 UI를 숨기거나 uiVisible 메소드를 사용하여 모든 UI를 표시하도록 설정할 수 있습니다.
예제는 다음과 같습니다.

// 동영상(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();

Playlist

재생 소스 설정에 대한 속성 정보는 다음과 같습니다.

Method

Video Player Enhancement 서비스는 영상을 재생하고 다양한 기능을 구현할 수 있는 여러 가지 메소드를 제공합니다.

플레이어를 생성하고 재생하는 스크립트는 다음과 같습니다.

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

지원하는 Method

Video Player Enhancement 서비스에서 지원하는 메소드는 다음과 같습니다.

이벤트

Video Player Enhancement 서비스는 사용자를 위한 여러 가지 이벤트를 제공하며, 메타데이터 클릭 시 발생시킬 이벤트를 설정할 수 있습니다.

이벤트는 다음과 같이 수신할 수 있습니다.

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);
})

지원하는 이벤트

Video Player Enhancement 서비스에서 지원하는 이벤트는 다음과 같습니다.

timeupdate 스크립트
timeupdate 이벤트에 대한 스크립트 및 각 속성에 대한 설명은 다음과 같습니다.

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)
})

prevTrack 스크립트
prevTrack 이벤트에 대한 스크립트 및 각 속성에 대한 설명은 다음과 같습니다.

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);
})

nextTrack 스크립트
nextTrack 이벤트에 대한 스크립트 및 각 속성에 대한 설명은 다음과 같습니다.

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);
})