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="player 목록의 Player SDK URL"></script>
   

플레이어 설정

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

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

플레이어 옵션

커스터마이징할 수 있는 옵션은 다음과 같습니다.

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 스크립트

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

각 속성에 대한 설명은 다음과 같습니다.

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

각 속성에 대한 설명은 다음과 같습니다.

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

각 속성에 대한 설명은 다음과 같습니다.