Video Player 사용 가이드
  • PDF

Video Player 사용 가이드

  • PDF

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

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_ko

  • 고객의 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

  • 창 크기가 변경될 때 발생하는 이벤트
주의

Internet Explorer 11을 비롯한 ES6를 지원하지 않는 구형 브라우저의 경우에는 위에 예제가 정상적으로 동작하지 않을 수 있습니다. 이 경우에는 이벤트 처리 구문을 아래와 같이 수정하여 사용하여야 합니다.

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

ES6를 지원하는 브라우저는 아래 링크를 참고해 주세요.
https://www.w3schools.com/Js/js_es6.asp

Error Code

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

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

이 문서가 도움이 되었습니까?