재생관련 옵션
이 페이지에서는 플레이어를 실행하는데 설정하는 옵션을 다루고 있습니다.
기본 설정 - playlist
재생할 영상을 설정합니다. 재생 소스는 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
autostart 속성으로 플레이어의 재생 소스를 자동 재생할 수 있습니다.
<VpePlayer
...
options={{
autostart: true, // 자동 재생(false: 자동 재생 안 함)
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4'
},
],
}}
...
/>autoPause
autoPause 속성으로 앱이 백그라운드로 전환될시 플레이어의 재생 소스를 자동 정지할 수 있습니다.
<VpePlayer
...
options={{
autoPause: true, // 자동 정지(false: 자동 정지 안 함)
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4'
},
],
}}
...
/>muted
muted 속성으로 플레이어를 처음 재생 시 음소거 상태로 재생할 수 있습니다.
<VpePlayer
...
options={{
muted: true, // 처음 재생 시 음소거(false: 음소거 안 함)
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4'
},
],
}}
...
/>playbackRate
playbackRate 속성으로 재생 속도를 조절할 수 있습니다. 재생 속도를 지정하지 않은 경우에는 기본값으로 1.0이 적용됩니다. 1.0보다 작은 수를 입력하여 재생 속도를 느리게 설정하거나 높은 수를 입력하여 재생 속도를 빠르게 설정할 수 있습니다.
<VpePlayer
...
options={{
playbackRate: 0.5, // 재생 속도 조절(기본값: 1.0)
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4'
},
],
}}
...
/>playRateSetting
playRateSetting 속성으로 사용자가 재생 속도를 직접 설정할 수 있도록 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
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 사용 안 함)
}}
...
/>repeat
repeat 속성으로 영상을 반복 재생할 수 있습니다.
<VpePlayer
...
options={{
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4'
},
],
repeat: true, // 반복 재생(false: 반복 재생 안 함)
}}
...
/>setStartTime
setStartTime 속성으로 라이브 방송처럼 VOD를 모든 사용자가 동시에 동일 구간을 시청하도록 설정할 수 있습니다.
<VpePlayer
...
options={{
playlist: [
{
file: 'https://CDN도메인/example_video_01.mp4'
},
],
setStartTime: "2023-02-08 06:07:00+00:00", // 최초 공개일 설정
}}
...
/>자막 설정
playlist.vtt 속성을 이용하여 자막을 제공할 수 있습니다. 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',
},
]
},
]
}}
...
/>메타데이터 설정
플레이어 상단에 메타데이터 표시 여부를 설정할 수 있습니다. 풀스크린때 오른쪽 상단에 메타데이터가 표시됩니다.
<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",
},
},
]
}}
...
/>