Playback options

Available in Classic and VPC

This page describes the configuration options for launching the player.

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.

<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
                  },
              },
          ]
        }}
    ...
/>