The latest service changes have not yet been reflected in this content. We will update the content as soon as possible. Please refer to the Korean version for information on the latest updates.
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"],
},
],
}}
/>
);
}