Ncloud Video Player Enhancement 사용 가이드

Ncloud (네이버 클라우드) Video Player Enhancement 사용 가이드입니다

Tip: 기술문서 사이트가 리뉴얼 되었습니다.

개요

Ncloud(네이버 클라우드) [Video Player Enhancement]는 웹/앱에서 비디오 또는 오디오와 같은 미디어 재생을 위한 서비스로, Live Station, VOD Station과 연동을 통해, 다양한 디바이스 환경에서 시청자에게 최고 품질의 경험을 제공합니다.

특징

Video Player Enhancement 서비스의 특징은 다음과 같습니다.

Live Station & VOD Station과 손쉽게 연동 가능
HTML5 표준 : HTML5 표준에 맞게 제작된 SaaS 기반의 서비스로 별도의 APP 설치 없이 모든 디바이스 및 OS Browser에서 재생 가능
사용자가 직접 커스터마이징 : Console 에서 UI & UX 패널 제공하여 고객이 직접 커스터마이징을 할 수 있음 (유료 버전)
개발 시간 단축 : 스크립트 코드 예제를 통해 플레이어를 웹페이지 내 손쉽게 임베디드가 가능하며 완성된 코드 제공을 통해 개발 시간을 단축 시킬 수 있음

제공 기능

VOD Station이 제공하는 기능은 다음과 같은 것들이 있습니다.

다양한 재생 옵션 설정을 위한 기능
콘텐츠 보안: MultiDRM (FairPlay, Widevine, PlayReady) 및 Visible Watermark 기능 제공
모바일 SDK: Native SDK 제공 (AOS - Kotlin, iOS - Swift)
커스터마이징: 콘솔에 UI/UX 설정을 위한 기능 제공
CMAF LL-HLS 지원

사전 준비 사항

[Video Player Enhancement]을 테스트 하기 위해 [VOD Station]에 스트리밍 가능한 영상 파일을 미리 등록해 두겠습니다.

[VOD Station] 사용 방법은 아래 가이드 문서에서 확인할 수 있습니다.

⁃ VOD Station 생성 가이드

서비스 위치

Ncloud Console에서 [Video Player Enhancement] 서비스 위치는 아래와 같이 [Media] - [Video Player Enhancement]에 있습니다.

Ncloud (네이버 클라우드) Video Player Enhancement 사용 가이드

서비스 신청

[Video Player Enhancement] 서비스를 사용하기 위해서는 먼저 [서비스 신청] 버튼을 클릭해 서비스를 신청해야 합니다.

서비스 선택

[Video Player Enhancement] 서비스는 무료 서비스인 Basic 버전과 유료 서비스인 Standard 버전이 있습니다. 각각이 제공하는 기능이 다르므로 잘 살펴보고 선택하시면 됩니다.

주의: 서비스를 유료로 신청 또는 무료에서 유료로 전환 후에는 다시 무료로 전환이 불가합니다.

서비스 신청이 끝났으면 플레이어를 생성해야 합니다.

플레이어 생성

플레이어 생성 화면에서는 현재 계약된 정보가 표시되며, 무료인 경우 [유료 전환] 버튼도 확인할 수 있습니다.

기본 설정

기본 설정에서는 플레이어를 사용할 [사이트 도메인] 또는 [앱 패키지 ID]를 입력해야 합니다.

⁃ 사이트 도메인은 플레이어가 노출될 사이트 도메인에 대한 유효성을 확인하기 위함입니다.
⁃ 등록된 도메인이 아닐 경우 플레이어가 동작하지 않습니다.
⁃ 사이트 도메인은 5개까지 입력 가능합니다.
⁃ 5개 이상 입력이 필요할 경우 네이버 클라우드 영업팀에 별도 문의 부탁 드립니다.

플레이어 옵션

플레이어가 생성되면 플레이어 옵션 미리보기를 할 수 있습니다.

미리보기

미리 보기 화면에서 플레이어의 기본 스크립트를 확인할 수 있는데 [복사] 버튼을 클릭해서 스크립트를 가져옵니다.

플레이어 스크립트 기본 템플릿

위에서 복사해 온 플레이어 스크립트는 기본적으로 다음과 같은 형태로 구성되어 있습니다.

<script type="text/javascript" src="https://player.vpe.naverncp.com/ncplayer.js?access_key={Access Key}"></script>

<div id="video"></div>

<script>
  let player = new ncplayer('video',{		
    playlist:[
      {
       file:"{재생 파일 URL}",
        poster:"{썸네일 이미지 URL}"    
      }		
    ],		
  });
</script>

플레이어 샘플 예제

[VOD Station]에 등록한 스트리밍 파일을 이용한 샘플 스크립트 예제는 다음과 같습니다.

⁃ VOD Station 생성 가이드

<script type="text/javascript" src="https://player.vpe.naverncp.com/ncplayer.js?access_key=1b***d7"></script>

<div id="video"></div>

<script>
  let player = new ncplayer('video',{
    autostart: true,
    muted: true,			
    aspectRatio: '16/9',
    repeat: true,
    playlist:[
      {
        file:"https://fv***47.cdn.ntruss.com/hls/OS***E8_/test-category/VOD-Station_***_30fps.mp4/index.m3u8",
        poster:"https://kr***08.cdn.ntruss.com/test-category/VOD-Station_02.jpg",				
      }			
    ],		
  });
</script>

플레이어 실행 화면

위 스크립트로 생성한 플레이어를 실행하면 아래와 같이 영상이 플레이 되는 것을 확인할 수 있습니다.

음소거 옵션: autostart: true 상태에서 muted 옵션과 관계없이 무조건 음소거 상태로 나타나는 경우가 많은데, 이것은 웹브라우저의 자체 정책으로 인해 영상의 자동재생이 차단되는 것을 막기 위해 음소거 상태로 플레이됩니다.

플레이어 상세 옵션

프로퍼티	유형	설명	기본값	옵션값	라이선스	필수여부
*playlist	array	플레이리스트	없음		무료	O
autostart	boolean	자동재생여부	TRUE		무료	X
muted	boolean	음소거	FALSE		무료	X
keyboardShortcut	boolean	키보드 단축키	TRUE		무료	X
controls	boolean	컨트롤바 사용 여부	TRUE		무료	X
ui	string	UI 설정	all	all, mobile , pc	무료	X
**controlBtn	array	컨트롤바 버튼 on/off			유료	X
progressBarColor	string	컨트롤바 컬러	#4299f5		유료	X
controlActiveTime	number	컨트롤바 활성 시간(ms)	3000		유료	X
startMutedInfoNotVisible	boolean	음소거 알림	FALSE		유료	X
aspectRatio	string	화면비	16/9	16/9 , 4/3 , 1/1 , 9/16 , 21/9	무료	X
objectFit	string	영상 화면 맞춤	contain	contain , cover , fill	무료	X
playRateSetting	array	배속 선택 옵션	[0.5,0.75,1,1.5,2]		유료	X
seekingPreview	boolean	영상 구간 이동 미리보기	TRUE		유료	X
autoPause	boolean	탭 비활성화 시 자동멈춤	FALSE		무료	X
repeat	boolean	영상 반복	FALSE		무료	X
touchGestures	boolean	터치 제스처	TRUE		유료	X
descriptionNotVisible	boolean	영상 메타 데이터	FALSE		유료	X
lang	string	UI 언어설정	auto	auto , ko , en , ja , zh	무료	X
lowLatencyMode	boolean	CMAF LL-HLS	FALSE		유료	X

*playlist 상세 속성

프로퍼티

유형

설명

기본값

옵션값

라이선스

필수여부

file

string

재생하고자 하는 video 정보

sources

array

video에 여러가지 해상도를 제공하는 경우 사용

file	string	해상도별 video 파일 경로
label	string	해상도 조절 컨트롤에 표시되는 텍스트
default	boolean	기본 해상도로 적용

file로 대체 가능

무료

poster

string

video 재생 전 표시할 이미지

없음

무료

description

array

Player 상단에 표시할 메타데이터

title	string	제목 표시
created_at	string	날짜 표시
profile_name	string	채널명 or 업로더 닉네임
profile_image	string	채널이미지 or 업로더 프로필 이미지
callback	function	메타데이터 클릭시 발생시킬 이벤트

없음

유료

**controlBtn 상세 속성

프로퍼티	유형	설명	기본값
play	boolean	플레이버튼	TRUE
fullscreen	boolean	전체화면 전환	TRUE
volume	boolean	볼륨컨트롤	TRUE
times	boolean	시간정보 UI	TRUE
pictureInPicture	boolean	미니플레이어	TRUE
setting	boolean	세팅 버튼	TRUE