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.

VPE 2.0 React Native overview

Prev Next

Available in Classic and VPC

This guide explains how to use the Video Player Enhancement V2 React Native SDK. You can find the Demo app on GitHub.

React Native component

You can stream various video files such as m3u8, mpd, and mp4 within your React Native application.

  • ExoPlayer for Android
  • AVPlayer for iOS, tvOS, and visionOS
  • Windows UWP for Windows
  • Support for side-loaded subtitles
  • Support for DRM content
  • Support for Picture-in-Picture (PiP)
  • SaaS-based UI control and customization
  • JSON-based layout-driven ControlBar system (PC/mobile/Full screen × VOD/Live)
  • Support for IconOverrides (replace control icons with JSX, images, or functions)
  • Provides i18n support for Korean, English, Japanese, and Chinese

Key features

VPE 2.0 React Native provides the following key features:

  1. React Native support: Provides a video player optimized for React Native environments.
  2. NAVER Cloud Platform optimization: You can integrate with all media services on NAVER Cloud Platform.
  3. DRM support: You can play back content protected by DRM.

Language support

Supports the following languages based on the device language settings.

KO | EN (default) | JA | ZH

React Native video-based player

Built on React Native video library v6.x and requires the react-native >= 0.68.2 environment.

import { VpePlayer } from 'vpe-react-native';

const VideoPlayer = () => {
    return (
        <VpePlayer
            accessKey={'VPE ACCESS KEY'}
            platform={'pub'}
            options={{
                playlist: [
                    {
                        file: 'https://example.com/video/master.m3u8'
                    }
                ],
                autostart: true,
                muted: true,
                aspectRatio: '16/9',
            }}
        />
    )
}