Classic/VPC 환경에서 이용 가능합니다.
참고
- 옵션을 설정하는 속성에 대한 설명은 옵션 레퍼런스를 참고해 주십시오.
- 이용 중인 요금제에 따라 설정 가능한 옵션이 다를 수 있습니다.
재생 동작
autostart (자동 재생)
재생 소스를 자동으로 시작합니다.
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 동영상(MP4)
export function App() {
return (
<VpePlayer
accessKey="YOUR_ACCESS_KEY"
hls={Hls}
dashjs={dashjs}
platform="pub"
options={{
autostart: true, // 자동 재생(false: 자동 재생 안 함)
playlist: [
{
file: "https://CDN도메인/example_video_01.mp4",
},
],
}}
/>
);
}
자동 재생은 다음 조건 중 하나 이상을 만족할 때만 동작합니다.
- 음소거이거나 볼륨이 0인 경우
- 클릭, 터치, 키 입력 등 사용자의 입력이 발생한 경우
- 환경 설정에서 화이트리스트 페이지로 설정된 경우
- 자동 재생을 지원하는 iframe과 해당 문서가 설정된 경우
autoPause (자동 정지)
탭 전환 또는 창 최소화 시 자동으로 재생을 정지합니다.
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 동영상(MP4)
export function App() {
return (
<VpePlayer
accessKey="YOUR_ACCESS_KEY"
hls={Hls}
dashjs={dashjs}
platform="pub"
options={{
autoPause: true, // 자동 정지(false: 자동 정지 안 함)
playlist: [
{
file: "https://CDN도메인/example_video_01.mp4",
},
],
}}
/>
);
}
muted (음소거)
플레이어를 처음 재생 시 음소거 상태로 재생합니다.
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 동영상(MP4)
export function App() {
return (
<VpePlayer
accessKey="YOUR_ACCESS_KEY"
hls={Hls}
dashjs={dashjs}
platform="pub"
options={{
muted: true, // 처음 재생 시 음소거(false: 음소거 안 함)
playlist: [
{
file: "https://CDN도메인/example_video_01.mp4",
},
],
}}
/>
);
}
repeat (반복 재생)
영상을 반복 재생합니다.
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 동영상(MP4)
export function App() {
return (
<VpePlayer
accessKey="YOUR_ACCESS_KEY"
hls={Hls}
dashjs={dashjs}
platform="pub"
options={{
repeat: true, // 반복 재생(false: 반복 재생 안 함)
playlist: [
{
file: "https://CDN도메인/example_video_01.mp4",
},
],
}}
/>
);
}
setStartTime (최초 공개일 설정)
라이브 방송처럼 VOD를 모든 사용자가 동시에 동일 구간을 시청하도록 설정합니다.
참고
Standard 요금제에서만 사용할 수 있습니다.
- VOD에만 적용됩니다.
- 날짜 포맷은 UTC 형식을 지원합니다.
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 동영상(MP4)
export function App() {
return (
<VpePlayer
accessKey="YOUR_ACCESS_KEY"
hls={Hls}
dashjs={dashjs}
platform="pub"
options={{
autoPause: true,
playlist: [
{
file: "https://CDN도메인/example_video_01.mp4",
},
],
setStartTime: "2023-02-08 06:07:00+00:00", // 최초 공개일 설정
}}
/>
);
}
재생 제어
playbackRate (재생 속도)
재생 속도를 조절합니다. 미지정 시 기본값은 1.0입니다.
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 동영상(MP4)
export function App() {
return (
<VpePlayer
accessKey="YOUR_ACCESS_KEY"
hls={Hls}
dashjs={dashjs}
platform="pub"
options={{
muted: true,
playbackRate: 0.5, // 재생 속도 조절(기본값: 1.0)
playlist: [
{
file: "https://CDN도메인/example_video_01.mp4",
},
],
}}
/>
);
}
playRateSetting (재생 속도 조절 UI)
사용자가 재생 속도를 설정할 수 있도록 UI를 제공합니다.
참고
Standard 요금제에서만 사용할 수 있습니다.
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 동영상(MP4)
export function App() {
return (
<VpePlayer
accessKey="YOUR_ACCESS_KEY"
hls={Hls}
dashjs={dashjs}
platform="pub"
options={{
muted: true,
playRateSetting: [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
playlist: [
{
file: "https://CDN도메인/example_video_01.mp4",
},
],
}}
/>
);
}
lowLatencyMode (초저지연 모드)
Low Latency HLS에 최적화된 플레이어를 적용합니다. Live Station 서비스의 Low Latency HLS를 공식 지원하는 모드입니다.
참고
Standard 요금제에서만 사용할 수 있습니다.
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 동영상(HLS)
export function App() {
return (
<VpePlayer
accessKey="YOUR_ACCESS_KEY"
hls={Hls}
dashjs={dashjs}
platform="pub"
options={{
playlist: [
{
file: "https://CDN도메인/example_video_01.mp4/index.m3u8",
},
],
lowLatencyMode: true, // LL-HLS 사용(false: LL-HLS 사용 안 함)
}}
/>
);
}
OTT 설정
OTT 서비스에 필요한 인트로/오프닝/엔딩 스킵, 연령 등급 표시, 콘텐츠 경고 기능을 playlist 아이템 단위로 설정합니다.
참고
자세한 사용 방법은 OTT 특화 기능 문서를 참조해 주십시오.
인트로/오프닝/ 엔딩 스킵
각 구간의 시작 시점과 지속 시간을 설정하면 해당 시점에 스킵 버튼이 자동으로 표시됩니다.
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
export function App() {
return (
<VpePlayer
accessKey="YOUR_ACCESS_KEY"
hls={Hls}
options={{
autostart: true,
muted: true,
playlist: [
{
file: "https://CDN도메인/episode_01.m3u8",
intro: {
start: "00:00:00", // HH:MM:SS 형식
duration: 5, // 초 단위
},
opening: {
start: "00:00:05",
duration: 90,
},
ending: {
start: "00:45:00",
duration: 60,
},
},
],
}}
/>
);
}
ageRating (연령 등급 표시)
재생 시작 시 연령 등급 오버레이를 표시합니다.
지원 값: "all" "12" "15" "19"
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
export function App() {
return (
<VpePlayer
accessKey="YOUR_ACCESS_KEY"
hls={Hls}
options={{
autostart: true,
muted: true,
playlist: [
{
file: "https://CDN도메인/episode_01.m3u8",
description: {
title: "드라마 시즌1 EP.01",
},
ageRating: "15", // 15세 이상 관람가
},
],
}}
/>
);
}
contentWarnings (콘텐츠 경고)
콘텐츠에 포함된 민감한 요소(폭력성, 선정성 등)를 시청자에게 안내하는 경고 오버레이를 표시합니다.
권장 키: "sexuality" "violence" "language" "drugs" "horror" "imitation" "provocative"
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
export function App() {
return (
<VpePlayer
accessKey="YOUR_ACCESS_KEY"
hls={Hls}
options={{
autostart: true,
muted: true,
playlist: [
{
file: "https://CDN도메인/episode_01.m3u8",
contentWarnings: ["violence", "language"],
},
],
}}
/>
);
}