TV SDK overview

Available in Classic and VPC

The Video Player Enhancement TV SDK is a React Native video player SDK for Android TV, Apple TV (tvOS), and Fire TV.

TV-specific component

@sgrsoft/vpe-reactnative-tv-sdk is a TV-specific video player SDK built on react-native-tvos. It provides the same API as the Web SDK (vpe-react-sdk), allowing you to build a consistent development experience across platforms.

Key features

The TV SDK provides the following main features:

• Native playback for HLS/DASH/MP4 (ExoPlayer/AVPlayer)
• DRM support (Widevine + FairPlay)
• IMA ads (Google Interactive Media Ads)
• Playlist (automatic playback of the next item)
• Subtitles (VTT/SMI with automatic EUC-KR decoding)
• Declarative layout customization
• Live streaming with Low Latency HLS (LL-HLS)
• Multilingual (ko/en/ja)
• Resume playback (onExit + initialPosition)
• D-pad/remote control navigation
• Interface capture prevention

Differences from the web SDK

The main differences between the web SDK and the TV SDK are as follows:

Language support

The SDK detects the device language settings to support Korean (ko), English (en), and Japanese (ja).

Version compatibility

The following table shows the version compatibility for the TV SDK.

Quick start

You can quickly configure the player with the following sample code.

import React, { useRef } from 'react';
import { View, StyleSheet } from 'react-native';
import { VpePlayer } from '@sgrsoft/vpe-reactnative-tv-sdk';
import type { PlayerHandle } from '@sgrsoft/vpe-reactnative-tv-sdk';

export default function PlayerScreen() {
    const playerRef = useRef<PlayerHandle>(null);

    return (
        <View style={styles.container}>
            <VpePlayer
                ref={playerRef}
                accessKey="YOUR_ACCESS_KEY"
                options={{
                    playlist: [{
                        file: 'https://example.com/video.m3u8',
                        description: { title: 'Video title' },
                    }],
                    autostart: true,
                }}
                onBack={() => {
                    // Handle back action
                }}
                onEvent={(event) => {
                    if (event.type === 'ready') {
                        console.log('Player ready');
                    }
                }}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: { flex: 1, backgroundColor: '#000' },
});