Playback settings

Available in Classic and VPC

Playback operation

Autostart (auto playback)

The playback source starts automatically.

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        autostart: true, // Autoplay (false: Disable autoplay)
        playlist: [
          {
            file: "https://CDNdomain/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

Autoplay works only when one or more of the following conditions are met:

• When muted or when the volume is set to 0
• When a user's input such as click, touch, or key press occurs
• When set to whitelist page in the settings
• When iframe that supports autoplay and the relevant document are set

autoPause (auto pause)

Playback automatically stops when switching tabs or minimizing the window.

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        autoPause: true, // Auto pause (false: No auto pause)
        playlist: [
          {
            file: "https://CDNdomain/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

muted (mute)

When the player is played for the first time, it starts in muted mode.

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        muted: true, // Muted on first play (false: Not muted)
        playlist: [
          {
            file: "https://CDNdomain/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

repeat (repeated playback)

The video plays repeatedly.

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        repeat: true, // Repeat (false: Disable repeat)
        playlist: [
          {
            file: "https://CDNdomain/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

setStartTime (set the initial release date)

Set VOD so that all users watch the same section simultaneously, like a live broadcast.

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        autoPause: true,
        playlist: [
          {
            file: "https://CDNdomain/example_video_01.mp4",
          },
        ],
        setStartTime: "2023-02-08 06:07:00+00:00", // Set initial release date
      }}
    />
  );
}

Playback control

playbackRate (playback rate)

Adjust the playback speed. If not specified, the default value is 1.0.

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        muted: true,
        playbackRate: 0.5, // Playback speed control (default: 1.0)
        playlist: [
          {
            file: "https://CDNdomain/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

playRateSetting (playback rate control UI)

Provide a UI that allows users to set the playback speed.

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (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://CDNdomain/example_video_01.mp4",
          },
        ],
      }}
    />
  );
}

lowLatencyMode (ultra-low latency mode)

Apply a player optimized for Low Latency HLS. This is the officially supported mode for Low Latency HLS of the Live Station service.

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (HLS)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        playlist: [
          {
            file: "https://CDNdomain/example_video_01.mp4/index.m3u8",
          },
        ],
        lowLatencyMode: true, // use LL-HLS (false: LL-HLS not used)
      }}
    />
  );
}

OTT settings

Configure features such as intro/opening/ending skip, age rating display, and content warnings on the playlist item basis for OTT services.

Configure intro, opening, and ending skip

When you set the start time and duration of each section, a skip button is automatically displayed at that point.

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://CDNdomain/episode_01.m3u8",
            intro: {
              start: "00:00:00", // HH:MM:SS format
              duration: 5,       // in seconds
            },
            opening: {
              start: "00:00:05",
              duration: 90,
            },
            ending: {
              start: "00:45:00",
              duration: 60,
            },
          },
        ],
      }}
    />
  );
}

ageRating (age rating indication)

Display an age rating overlay at the start of playback.
Supported values: "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://CDNdomain/episode_01.m3u8",
            description: {
              title: "Drama season 1 EP. 01",
            },
            ageRating: "15", // Ages 15 and up
          },
        ],
      }}
    />
  );
}

contentWarnings (content warning)

Display a warning overlay that informs viewers of sensitive elements in the content (such as violence or sexual themes).
Recommended key: "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://CDNdomain/episode_01.m3u8",
            contentWarnings: ["violence", "language"],
          },
        ],
      }}
    />
  );
}