---
title: "Playback options"
slug: "vpe-play-option"
updated: 2026-09-17T09:22:39Z
published: 2026-09-17T09:22:39Z
canonical: "guide.ncloud-docs.com/vpe-play-option"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Playback options

Available in Classic and VPC

This page describes the configuration options for launching the player.

              Note

              

This applies to both Android and iOS.

## Default settings

Describes the player's playback source settings.

### playlist

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

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

### Multiple video playback

Use the playlist property to play multiple videos consecutively by passing multiple playback sources. You can also override the multiple video playback feature and configure a dynamic playlist for the next video.

```
<VpePlayer
    ...
    options={{
          playlist: [ //Playback source
              { 
                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

Provides a feature to dynamically add the next video after playback completes. For example, you can configure recommended videos to be displayed with thumbnails as follows:

```
const playerRef = useRef(null);
       
return (
      <VpePlayer
          ...
          ref={playerRef}
          options={{
                playlist: [ //Playback source
                    { 
                      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 next video</TouchableOpacity>
        
      <TouchableOpacity onPress={()=>{
        playerRef.current.addPrevSource({
            file: 'https://CDNdomain/example_video_02.mp4',
                      poster: 'https://CDNdomain/example_image_02.png' 
        })
        }}>Add previous video</TouchableOpacity>
        
)
```

## Playback settings

Describes the player’s playback options.

### autostart

Use the autostart property to automatically play the playback source. The example is as follows:

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

### autoPause

Use the autoPause property to pause automatically when the app goes to the background.

              Caution

              

The Picture-in-Picture feature is only enabled when autoPause is set to true.

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

### muted

Use the muted property to start playback in a muted state. The example is as follows:

```
<VpePlayer
    ...
    options={{
          playbackRate: 0.5, // Playback speed control (default: 1.0)
          playlist: [ //Playback source
              {
                  file: 'https://CDNdomain/example_video_01.mp4'
              },
          ],
        }}
    ...
/>
```

### playRateSetting

You can use the playRateSetting property to provide a UI that allows the user to set the playback speed.

```
<VpePlayer
    ...
    options={{
          playRateSetting: [0.5,0.75,1.0,1.25,1.5,1.75,2.0], // Supports 0.5-2.0x speeds
          playlist: [ //Playback source
              {
                  file: 'https://CDNdomain/example_video_01.mp4'
              },
          ],
        }}
    ...
/>>
```

### repeat

Use the repeat property to repeatedly play the video. The example is as follows:

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

### setStartTime

Use the setStartTime property to allow all users to watch the same segment of VOD simultaneously, like a live broadcasting.

```
<VpePlayer
    ...
    options={{
          playlist: [ //Playback source
              {
                  file: 'https://CDNdomain/example_video_01.mp4'
              },
          ],
          setStartTime:"2023-02-08 06:07:00+00:00", // Set initial release date
        }}
    ...
/>
```

### Subtitle settings

Use the playlist.vtt property to provide subtitles. Supports VTT captions (subtitles) and allows providing multiple subtitles in an array format. The following example provides Korean and English subtitles:

```
<VpePlayer
    ...
    options={{
          playlist: [ //Playback source
              {
                  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

Set whether to display metadata at the top of the player. In full screen mode, metadata appears in the top-right corner.

```
<VpePlayer
    ...
    options={{
          playlist: [ //Playback source
              {
                  file: 'https://CDNdomain/example_video_01.mp4',
                  description:{
                        "title": "Introduction to NAVER Cloud", // Title
                        "created_at": "2023.01.01", // Uploaded date
                        "profile_name": "NAVER Cloud", // Uploader nickname or channel name
                        "profile_image": "https://CDNdomain/example_image_profile.png", // Profile image or channel image
                  },
              },
          ]
        }}
    ...
/>
```