Classic/VPC 환경에서 이용 가능합니다.
플레이어 재생과 관련된 옵션을 설정하는 방법을 설명합니다.
지원 플랫폼: Android iOS
재생 소스
플레이리스트 기본 설정
재생할 영상을 설정합니다. 재생 소스는 mp4, hls, dash 형식을 지원합니다.
<VpePlayer
options={{
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
},
],
}}
/>
여러 영상 재생
playlist 속성으로 여러 개의 재생 소스를 전달하여 연속 재생할 수 있습니다. 또한 여러 영상 재생 기능을 재정의(Override)할 수 있으며, 다음 재생할 영상을 동적 플레이리스트로 구성할 수 있습니다.
<VpePlayer
options={{
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
poster: 'https://CDN도메인/example_image_01.png',
},
{
file: 'https://CDN도메인/example_video_02.mp4',
poster: 'https://CDN도메인/example_image_02.png',
},
{
file: 'https://CDN도메인/example_video_03.mp4/index.m3u8',
poster: 'https://CDN도메인/example_image_03.png',
},
],
}}
/>
동적 플레이리스트 구성
영상 재생이 완료된 후 다음에 재생할 영상을 동적으로 추가할 수 있습니다.
const playerRef = useRef(null);
return (
<>
<VpePlayer
ref={playerRef}
options={{
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
poster: 'https://CDN도메인/example_image_01.png',
},
],
}}
/>
<TouchableOpacity onPress={() => {
playerRef.current.addNextSource({
file: 'https://CDN도메인/example_video_02.mp4',
poster: 'https://CDN도메인/example_image_02.png',
});
}}>
다음 영상 추가
</TouchableOpacity>
<TouchableOpacity onPress={() => {
playerRef.current.addPrevSource({
file: 'https://CDN도메인/example_video_02.mp4',
poster: 'https://CDN도메인/example_image_02.png',
});
}}>
이전 영상 추가
</TouchableOpacity>
</>
);
재생 동작
autostart (자동 재생)
재생 소스를 자동으로 시작합니다.
<VpePlayer
options={{
autostart: true, // 자동 재생(false: 자동 재생 안 함)
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
},
],
}}
/>
autoPause (자동 정지)
앱이 백그라운드로 전환될 시 자동으로 재생을 정지합니다.
autoPause: true가 되어야 Picture in Picture 기능이 활성화됩니다.
<VpePlayer
options={{
autoPause: true, // 자동 정지(false: 자동 정지 안 함)
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
},
],
}}
/>
muted (음소거)
플레이어를 처음 재생 시 음소거 상태로 재생합니다.
<VpePlayer
options={{
muted: true, // 처음 재생 시 음소거(false: 음소거 안 함)
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
},
],
}}
/>
repeat (반복 재생)
영상을 반복 재생합니다.
<VpePlayer
options={{
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
},
],
repeat: true, // 반복 재생(false: 반복 재생 안 함)
}}
/>
setStartTime (최초 공개일 설정)
라이브 방송처럼 VOD를 모든 사용자가 동시에 동일 구간을 시청하도록 설정합니다.
<VpePlayer
options={{
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
},
],
setStartTime: "2023-02-08 06:07:00+00:00", // 최초 공개일 설정
}}
/>
재생 제어
playbackRate (재생 속도)
재생 속도를 조절합니다. 기본값은 1.0이며, 이보다 작은 값으로 느리게, 큰 값으로 빠르게 설정할 수 있습니다.
<VpePlayer
options={{
playbackRate: 0.5, // 재생 속도 조절(기본값: 1.0)
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
},
],
}}
/>
playRateSetting (재생 속도 조절 UI)
사용자가 재생 속도를 설정할 수 있도록 UI를 제공합니다.
<VpePlayer
options={{
playRateSetting: [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0], // 0.5배속 ~ 2배속
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
},
],
}}
/>
lowLatencyMode (초저지연 모드)
Low Latency HLS에 최적화된 플레이어를 적용합니다. Live Station 서비스의 Low Latency HLS를 공식 지원하는 모드입니다.
<VpePlayer
options={{
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
},
],
lowLatencyMode: true, // LL-HLS 사용(false: LL-HLS 사용 안 함)
}}
/>
자막 설정 (vtt)
VTT 형식의 자막 파일을 연결합니다. playlist 항목의 vtt 배열에 자막 정보를 지정합니다.
<VpePlayer
options={{
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
vtt: [
{
id: 'ko',
file: 'https://vpe.sgrsoft.com/ncp_overview_script_kr_v2.vtt',
label: '한국어',
default: true,
},
{
id: 'en',
file: 'https://vpe.sgrsoft.com/ncp_overview_script_en_v2.vtt',
label: 'English',
},
],
},
],
}}
/>
메타데이터 설정 (description)
플레이어 상단에 메타데이터 표시 여부를 설정합니다. 풀스크린 시 오른쪽 상단에 메타데이터가 표시됩니다.
<VpePlayer
options={{
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4',
description: {
title: "네이버클라우드 소개",
created_at: "2023.01.01",
profile_name: "네이버클라우드",
profile_image: "https://CDN도메인/example_image_profile.png",
},
},
],
}}
/>