Playback settings

Available in Classic and VPC

Provide instructions on how to configure playback-related options in the player.

Default settings - playlist

Sets the video to play. MP4, HLS, and dash formats are supported for playback sources.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
        }],
    }}
    onBack={() => navigation.goBack()}
/>

Multiple video playback

You can deliver multiple playback sources with this playlist property to enable continuous playback.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [
            {
                file: 'https://example.com/video1.m3u8',
                poster: 'https://example.com/poster1.jpg',
                description: { title: 'First video' },
            },
            {
                file: 'https://example.com/video2.m3u8',
                description: { title: 'Second video' },
            },
        ],
        autostart: true,
    }}
    onBack={() => navigation.goBack()}
/>

Dynamic playlist composition

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

const playerRef = useRef<PlayerHandle>(null);

// Add a single video
playerRef.current?.addNextSource({
    file: 'https://example.com/new_video.m3u8',
    description: { title: 'New video' },
});

// Add multiple videos simultaneously
playerRef.current?.addPrevSource([
    { file: 'https://example.com/video_1.mp4' },
    { file: 'https://example.com/video_2.mp4' },
]);

autostart

You can automatically play a video with this autostart property. The default value is true.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        autostart: true,
        playlist: [{ file: 'https://example.com/video.m3u8' }],
    }}
    onBack={() => navigation.goBack()}
/>

muted

With this muted property, you can start playback muted.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        muted: true,
        playlist: [{ file: 'https://example.com/video.m3u8' }],
    }}
    onBack={() => navigation.goBack()}
/>

playRateSetting

With this playRateSetting property, you can provide a UI that allows users to select playback speed.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playRateSetting: [0.5, 0.75, 1, 1.5, 2],
        playlist: [{ file: 'https://example.com/video.m3u8' }],
    }}
    onBack={() => navigation.goBack()}
/>

repeat

You can play a video on repeat with repeat property.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        repeat: true,
        playlist: [{ file: 'https://example.com/video.m3u8' }],
    }}
    onBack={() => navigation.goBack()}
/>

Subtitle settings

Subtitles can be provided with the playlist.vtt property. Supports VTT and SMI formats, and automatically decodes EUC-KR encoding in SMI files.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
            vtt: [
                { id: 'ko', file: 'https://example.com/ko.vtt', label: 'Korean', default: true },
                { id: 'en', file: 'https://example.com/en.vtt', label: 'English' },
                { id: 'ja', file: 'https://example.com/ja.smi', label: '日本語' },
            ],
        }],
    }}
    onBack={() => navigation.goBack()}
/>

lowLatencyMode (live)

With the lowLatencyMode property, you can enable LL-HLS low latency mode. Live streams are automatically detected.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        lowLatencyMode: true,
        playlist: [{
            file: 'https://example.com/live.m3u8',
            description: { title: 'Live broadcasting' },
        }],
    }}
    onBack={() => navigation.goBack()}
/>

When detected as live, it operates as follows.

• Display a red dot and "Live" at TimeBtn.
• Hide playback speed menu
• Disable SeekBar seeking

Platform-specific behavior of lowLatencyMode

When lowLatencyMode is enabled, the platform-specific behavior is as follows:

If playback lags more than 5 seconds, it automatically returns to the live edge.

Metadata settings

With this playlist.description property, you can display the video's metadata.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{
            file: 'https://example.com/video.m3u8',
            description: {
                title: 'Introduction to NAVER Cloud',
                created_at: '2024.01.01',
                profile_name: 'NAVER Cloud',
                profile_image: 'https://example.com/profile.png',
            },
        }],
    }}
    onBack={() => navigation.goBack()}
/>

Watermark

With the visibleWatermark property, you can display a watermark.

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{
        playlist: [{ file: 'https://example.com/video.m3u8' }],
        visibleWatermark: true,
        watermarkText: 'SAMPLE@example.com',
        watermarkConfig: {
            randPosition: true,
            randPositionInterVal: 5000,
            opacity: 0.4,
        },
    }}
    onBack={() => navigation.goBack()}
/>