エラー対応

Classic/VPC環境で利用できます。

TV SDKでカスタムエラー UIを設定する方法をご案内します。

errorOverride

デフォルトのエラー UIの代わりに、カスタムエラー UIをレンダリングできます。errorOverride propにレンダー関数、Reactコンポーネント、または ReactNodeを渡します。

PlayerErrorInfo

カスタムエラー UIに渡されるエラー情報オブジェクトのタイプは、次の通りです。

type PlayerErrorInfo = {
    errorCode: string | null;
    errorMessage: string | null;
    errorTitle: string | null;
};

方法1: レンダー関数

errorOverrideにレンダー関数を渡すと、エラー情報を受け取って UIを直接構築できます。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{ playlist: [{ file: 'https://example.com/video.m3u8' }] }}
    errorOverride={(info) => (
        <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: '#000',
        }}>
            <Text style={{ color: '#fff', fontSize: 18 }}>
                エラー: {info.errorCode}
            </Text>
            <Text style={{ color: '#aaa', fontSize: 14, marginTop: 8 }}>
                {info.errorMessage}
            </Text>
        </View>
    )}
    onBack={() => navigation.goBack()}
/>

方法2: Reactコンポーネント

errorOverrideに Reactコンポーネントを渡すことができます。コンポーネント PlayerErrorInfoを propsとして受け取ります。

function MyErrorComponent({ errorCode, errorMessage }: PlayerErrorInfo) {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ color: '#fff' }}>エラー: {errorCode}</Text>
            <Text style={{ color: '#aaa' }}>{errorMessage}</Text>
        </View>
    );
}

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

方法3: ReactNode

errorOverrideに静的な ReactNodeを直接渡すことができます。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{ playlist: [{ file: 'https://example.com/video.m3u8' }] }}
    errorOverride={
        <Text style={{ color: '#fff' }}>再生できない動画です</Text>
    }
    onBack={() => navigation.goBack()}
/>

イベントによるエラー検出

onEventの error イベントでもエラーを検出できます。

<VpePlayer
    accessKey="YOUR_ACCESS_KEY"
    options={{ playlist: [{ file: 'https://example.com/video.m3u8' }] }}
    onEvent={(event) => {
        if (event.type === 'error') {
            console.log('エラー発生:', event.data);
        }
    }}
    onBack={() => navigation.goBack()}
/>

よくある問題

Q.再生できません。

accessKeyが有効か確認
playlistに fileが含まれているか確認
ストリーム URLにアクセスできるか確認

Q.DRMの再生に失敗します。

DRMはシミュレータやエミュレータでは動作しないため、実デバイスでのテストが必須
Android TVは Widevine、tvOSは FairPlayを確認

Q.IMAの広告が表示されません。

ネイティブビルドフラグを確認(tvOS: $RNVideoUseGoogleIMA = true、Android: RNVideo_useExoplayerIMA=true)
フラグ変更後、アプリの再ビルドが必須

Q.Android TVで D-padが動作しません。

エミュレータ config.iniで hw.keyboard = yes を確認
変更後、エミュレータを再起動

Documentation Index