Getting started

네이버 클라우드 플랫폼의 Video Player를 사용하기 위해서는 아래와 같은 환경이 필요합니다.

  • Internet Explorer 11 이상의 브라우져
  • 외부와의 통신이 가능한 환경

사용 전 준비 사항

  1. 먼저 비디오 플레이어를 사용하기 위해서는 네이버 클라우드 플랫폼의 Console > Media > Video Player 메뉴로 이동하여 플레이어를 생성해야 합니다. player 생성에 대한 설명은 Video Player Console 설명서를 참고하세요.
  2. 콘솔에서 지정한 Object Storageplayer library 파일이 생성됩니다. 사용 중인 스토리지가 없거나 새로운 스토리지에 저장하기를 원한다면, 미리 Object Storage 상품에서 Bucket을 생성하여 주세요. 자세한 Bucket 생성 방법은 Object Storage 설명서를 참고하세요.

플레이어 적용하기

  1. 생성된 player library URL을 아래와 같이 HTML 파일의 <head></head> 부분에 추가합니다.

    • 생성된 player의 라이브러리 URL은 아래 화면에서 확인이 가능합니다.

      videoplayer_guide_01

    • 고객의 HTML 에 아래 코드를 삽입하여 주세요.

<script src="player 목록의 Player Library URL"></script>

[참고] CDN+ 를 사용하면, player library를 더욱 빠르고 안전하게 호스팅할 수 있습니다.

<script src="CDN+ 주소"></script>

player library 를 고객에 서버에서 직접 호스팅 하려고 하는 경우, 아래와 같이 추가할 수도 있습니다. (단, 동영상을 재생하기 위해서는 외부와의 통신이 가능한 환경이여야 합니다.)

<script>
  import ncplayer from 'public/player 파일명';
</script>

player 설정하기

Configuration

Video Player에는 구성 가능한 여러 옵션이 있습니다.

Video Player 콘솔에서 player를 생성할 때 설정한 정보가 기본적으로 적용되지만, 사용자가 직접 옵션을 전달하여 player 옵션을 구성할 수도 있습니다.

player는 기본적으로 아래와 같은 구조를 가집니다. 첫번째 파라미터에는 player를 표시할 HTMLElementclassName이나 id 정보를 전달하고, 두번째 파라미터에는 player의 옵션정보를 전달합니다.

new ncplayer('myElement', {
  playlist: "http://example.com/myVideo.mp4"
});

상세옵션

PROPERTY DESCRIPTION DEFAULT
playliststring/array 재생하고자 하는 video 정보입니다. 단일 경로 또는, 여러 경로를 전달합니다. -
autostartboolean player 시작시, video를 자동으로 재생합니다. 브라우져의 자동재생정책을 따릅니다. false
muteboolean player 시작시, video를 자동으로 음소거 상태로 만듭니다. false
controlsboolean player 를 제어하기 위한 컨트롤을 표시할 지 결정합니다. true
autoPauseboolean 창이 전환 되거나 최소화 되어 player가 보이지 않게 되는경우, 자동으로 player를 정지상태로 만듭니다. false
aspectRatiostring player의 가로X세로 비율을 지정합니다. "width:height" 형식으로 전달해야 합니다. -
widthnumber player의 가로 사이즈를 고정시킵니다. -
heightnumber player의 세로 사이즈를 고정시킵니다. -
playbackRatenumber video 의 재생속도를 조절 합니다. 1.0보다 낮으면 느려지고, 1.0보다 높으면 빠르게 재생됩니다. 1.0
repeatboolean video 를 반복재생 시킬지 결정합니다. false
aboutobject 마우스 우클릭 하였을 때, 표시되는 바로가기 정보를 수정합니다. -

playerlist

PROPERTY DESCRIPTION DEFAULT
filestring 재생하고자 하는 video 경로입니다. -
sourcesarray video에 여러가지 해상도를 제공하는 경우 사용합니다. 아래와 같은 속성을 가집니다.
filestring 해상도별 video 파일 경로입니다.
labelstring 해상도 조절 컨트롤에 표시되는 텍스트입니다.
defaultboolean 기본 해상도로 적용합니다.
-
captionsarray video의 자막 정보를 설정합니다. 아래와 같은 속성을 가집니다.
filestring 언어별 자막 파일 경로입니다.
labelstring 자막 설정 컨트롤에 표시되는 텍스트입니다.
languagestring 자막 언어정보를 설정합니다. 예) ko, en, ja, zh
defaultboolean 기본 자막으로 적용합니다.
-
posterstring video 를 재생하기 전에 표시할 이미지 입니다. -
titlestring 비디오의 제목입니다. -

about

PROPERTY DESCRIPTION DEFAULT
linkstring 바로가기 클릭 시, 이동할 URL 입니다. 항상 새 창으로 열립니다. www.ncloud.com
textstring 바로가기 메뉴에 표시할 텍스트 입니다. 네이버 클라우드 플랫폼

Method

Video Player에는 video를 재생하기위한 여러가지 methods를 제공합니다.

methods 를 호출하려면, 반드시 ncplayer 객체가 만들어진 상태여야 합니다.

아래 예제코드는 player를 생성하고, 재생시키는 코드입니다.

var player = new ncplayer('myElement', {
  playlist: "http://example.com/myVideo.mp4"
});

player.play();

지원하는 Methods

ncplayer.play()
  • video를 재생합니다.
ncplayer.pause()
  • video를 정지합니다.
ncplayer.firstTrack()
  • 첫번째 video를 재생합니다.
ncplayer.prevTrack()
  • 다음 video가 있는 경우, 다음 video를 재생합니다.
ncplayer.nextTrack()
  • 이전 video가 있는 경우, 이전 video를 재생합니다.
ncplayer.mute(state)
  • 음소거를 적용/해제 합니다.
ATTRIBUTE DESCRIPTION
stateboolean statetrue이면, 음소거가 적용됩니다.
ncplayer.autostart(state)
  • 자동재생을 적용/해제 합니다.
ATTRIBUTE DESCRIPTION
stateboolean statetrue이면, 자동재생이 적용됩니다.
ncplayer.volume(value)
  • video 의 볼륨을 설정합니다.
ATTRIBUTE DESCRIPTION
valuenumber 0 - 1사이에 볼륨값을 설정합니다.
ncplayer.currentTime(value)
  • 현재 재생중인 video의 시간을 변경합니다.
ATTRIBUTE DESCRIPTION
valuenumber 현재 재생중인 video의 재생시간을 설정한 값으로 변경합니다. 초 단위로 시간을 설정합니다. 예) 3분 20초 -> 200
ncplayer.fullscreen(state)
  • 전체화면 모드로 변경합니다.
ATTRIBUTE DESCRIPTION
stateboolean statetrue이면, 전체화면 모드로 변경됩니다.
ncplayer.playbackRate(value)
  • 재생속도를 변경합니다.
ATTRIBUTE DESCRIPTION
valuenumber video의 재생속도를 변경합니다. 1 보다 크면 빠르게 1 보다 작으면 느려집니다.
ncplayer.on(type, listner)
  • 이벤트를 수신합니다.
ATTRIBUTE DESCRIPTION
typestring 수신할 이벤트 명입니다. 이벤트 목록은 여기를 참고하세요.
listnerfunction 이벤트가 발생하면 호출 시킬 function을 전달합니다.

Event

Video Player에는 사용자를 위한 여러가지 events를 제공합니다. 이러한 events는 아래와 같은 형식으로 수신할 수 있습니다.

ncplayer.on('play', (e) => {
  console.log(e); // play!!
});

지원하는 Events

play
  • video 재생요청이 성공하였을 때 발생하는 이벤트
pause
  • video가 일시정지 되었을 때 발생하는 이벤트
canplay
  • 재생을 시작할 수 있을 만큼 video가 충분히 load 되었을 때 발생하는 이벤트
error
  • 에러가 발생하였을 때 발생하는 이벤트
playing
  • 실제 video가 재생이 시작될 때 발생하는 이벤트
ended
  • 재생이 끝까지 완료되었을 떄 발생하는 이벤트
seeking
  • seek 동작을 시작할 때 발생하는 이벤트
seeked
  • seek 동작이 완료되었을 때 발생하는 이벤트
wating
  • 버퍼링이 발생하였을 때, 발생하는 이벤트
progress
  • video를 download 중일때 350ms(오차 200ms) 마다 주기적으로 발생하는 이벤트
timeupdate
  • 현재 재생시간이 변경될 떄 발생하는 이벤트
volumechange
  • volume 값이 변경될 때 발생하는 이벤트
blur
  • player가 화면에서 노출되지 않는 상태일 떄 발생하는 이벤트
windowresize
  • 창 크기가 변경될 때 발생하는 이벤트

Error Code

Video Player에서 제공하는 에러 리스트 입니다.

ERROR NO ERROR CODE ERROR DESCRIPTION
E0001 ACCESS DENIED 동영상을 재생할 수 없음 / 잘못된 접근입니다. 잘못된 옵션값이 전달되는 경우 발생합니다.
E0002 NOT AUTHORIZED 인증 실패 / 동영상을 재생할 권한이 없습니다. 잘못된 요청으로 플레이어 인증이 실패하는 경우 발생합니다.
E0003 NETWORK ERROR 인증 실패 / 네트워크 연결이 원활하지 않습니다. 네트워크 문제로 플레이어 인증이 실패하는 경우 발생합니다.
E0004 CANNOT PLAY VIDEO 동영상을 재생할 수 없음 / 동영상을 재생할 수 없습니다. 영상파일 재생에 실패하는 경우 발생합니다.

""에 대한 건이 검색되었습니다.

    ""에 대한 검색 결과가 없습니다.

    처리중...