Playback settings

Available in Classic and VPC

Explains how to configure player playback options.

Supported platforms: Android iOS

Playback source

Playlist default settings

Sets the video to play. mp4, hls, and dash formats are supported for playback sources.

<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
  }}
/>

Multiple video playback

You can deliver multiple playback sources with this playlist property to enable continuous playback. You can also override the multiple video playback feature and configure a dynamic playlist for the next video.

<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
        poster: 'https://CDNdomain/example_image_01.png',
      },
      {
        file: 'https://CDNdomain/example_video_02.mp4',
        poster: 'https://CDNdomain/example_image_02.png'
      },
      {
        file: 'https://CDNdomain/example_video_03.mp4/index.m3u8',
        poster: 'https://CDNdomain/example_image_03.png'
      },
    ],
  }}
/>

Dynamic playlist composition

You can dynamically add the next video to play after the current video finishes.

const playerRef = useRef(null);

return (
  <>
    <VpePlayer
      ref={playerRef}
      options={{
        playlist: [
          {
            file: 'https://CDNdomain/example_video_01.mp4',
            poster: 'https://CDNdomain/example_image_01.png',
          },
        ],
      }}
    />

    <TouchableOpacity onPress={() => {
      playerRef.current.addNextSource({
        file: 'https://CDNdomain/example_video_02.mp4',
        poster: 'https://CDNdomain/example_image_02.png'
      });
    }}>
      Add the next video
    </TouchableOpacity>

    <TouchableOpacity onPress={() => {
      playerRef.current.addPrevSource({
        file: 'https://CDNdomain/example_video_02.mp4',
        poster: 'https://CDNdomain/example_image_02.png'
      });
    }}>
      Add the previous video
    </TouchableOpacity>
  </>
);

Playback operation

Autostart (auto playback)

The playback source starts automatically.

<VpePlayer
  options={{
    autostart: true, // Autoplay (false: Disable autoplay)
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
  }}
/>

autoPause (auto pause)

When the app switches to the background, playback automatically stops.

<VpePlayer
  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.

<VpePlayer
  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.

<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
    repeat: true, // Repeat (false: Disable repeat)
  }}
/>

setStartTime (set the initial release date)

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

<VpePlayer
  options={{
    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. The default value is 1.0, and you can set a smaller value for slower playback or a larger value for faster playback.

<VpePlayer
  options={{
    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.

<VpePlayer
  options={{
    playRateSetting: [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0], // 0.5-2.0 x speeds
    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.

<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
      },
    ],
    lowLatencyMode: true, // use LL-HLS (false: LL-HLS not used)
  }}
/>

Subtitle settings (vtt)

This property links a subtitle file in vtt format. In this playlist item, you specify subtitle information in the vtt array.

<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
        vtt: [
          {
            id: 'ko',
            file: 'https://vpe.sgrsoft.com/ncp_overview_script_kr_v2.vtt',
            label: 'Korean',
            default: true,
          },
          {
            id: 'en',
            file: 'https://vpe.sgrsoft.com/ncp_overview_script_en_v2.vtt',
            label: 'English',
          },
        ],
      },
    ],
  }}
/>

Metadata settings (description)

This property sets whether to display metadata at the top of the player. Metadata is displayed in the top right corner in full screen mode.

<VpePlayer
  options={{
    playlist: [
      {
        file: 'https://CDNdomain/example_video_01.mp4',
        description: {
          title: "Introduction to NAVER Cloud",
          created_at: "2023.01.01",
          profile_name: "NAVER Cloud",
          profile_image: "https://CDNdomain/example_image_profile.png",
        },
      },
    ],
  }}
/>