---
title: "プレイヤー UX"
slug: "vpe-rn-player-ux"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-rn-player-ux"
stale: true
---

> ## 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.

# プレイヤー UX

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

プレイヤー UXを構成・設定するオプションをご案内します。

## touchGestures(タッチジェスチャー)

`touchGestures` プロパティでモバイル UIのタッチジェスチャー機能を有効化できます。

```
<VpePlayer
  options={{
    playlist: [
      { file: 'https://CDNドメイン/example_video_01.mp4' },
    ],
    touchGestures: true, // タッチジェスチャーを使用する(デフォルト)(false: タッチジェスチャーを使用しない)
  }}
/>
```

## watermarkText(テキストウォーターマーク)

`watermarkText` プロパティで視聴者を追跡できるウォーターマークを、希望するテキスト(ユーザー ID+サイト名など)に設定します。

              参照

              

この機能を使用するには、コンソールでそのプレイヤーのウォーターマーク設定を有効にする必要があります。ウォーターマークテキストは、スクリプトを介してのみ追加できます。

```
<VpePlayer
  options={{
    playlist: [
      { file: 'https://CDNドメイン/example_video_01.mp4' },
    ],
    visibleWatermark: true,
    watermarkText: 'UserId@SiteDomain',
  }}
/>
```

## watermarkConfig(テキストウォーターマークの詳細設定)

テキストウォーターマークを使用する場合、ウォーターマークのランダム位置を有効化するかどうかに応じて詳細オプションを設定できます。ウォーターマークの詳細オプションは、NAVERクラウドプラットフォームコンソールでも設定できます。

**ランダム位置の有効化**

```
<VpePlayer
  options={{
    playlist: [
      { file: 'https://CDNドメイン/example_video_01.mp4' },
    ],
    visibleWatermark: true,
    watermarkText: 'UserId@SiteDomain',
    watermarkConfig: {
      randPosition: true,          // ウォーターマークのランダム位置を有効化(デフォルト)
      randPositionInterVal: 5000,  // ランダム変更の間隔(デフォルト値: 3000ms)
    },
  }}
/>
```

**ランダム位置の無効化**

```
<VpePlayer
  options={{
    playlist: [
      { file: 'https://CDNドメイン/example_video_01.mp4' },
    ],
    visibleWatermark: true,
    watermarkText: 'UserId@SiteDomain',
    watermarkConfig: {
      randPosition: false, // ウォーターマークの位置を固定
      x: 10,               // 横位置(%)
      y: 2,                // 縦位置(%)
      opacity: 0.4,        // 透明度(0.1~1)
    },
  }}
/>
```

## 全画面表示モード

全画面表示をモーダル(Modal)やカスタムフルスクリーンの中から選択して開発できます。モーダル方式はカスタマイズできませんが、基本的な動作が行われます。カスタム全画面表示は安全領域や動作などを直接コントロールできます。

**モーダル型全画面表示**

```
<VpePlayer
  options={{
    playlist: [
      { file: 'https://CDNドメイン/example_video_01.mp4' },
    ],
    modalFullscreen: true, // true: モーダル全画面表示, false: カスタム全画面表示
  }}
/>
```

**カスタム全画面表示**

```
import { View, StatusBar, ScrollView, Text } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { VpePlayer } from 'vpe-react-native';
import React, { useRef, useState } from 'react';
import { useNavigation } from '@react-navigation/native';

export default function App() {
  const navigation = useNavigation();
  const [isFullScreen, setIsFullScreen] = useState(false);
  const playerRef = useRef(null);

  return (
    <SafeAreaProvider>
      <SafeAreaView edges={isFullScreen ? ['none'] : ['top', 'left', 'right']} />
      <StatusBar barStyle={'dark-content'} hidden={isFullScreen} />

      <VpePlayer
        ref={playerRef}
        devTestAppId={'com.vpereactnative.example'}
        accessKey={'YOUR_ACCESS_KEY'}
        platform={'pub'}
        events={{
          fullScreen: (data) => {
            setIsFullScreen(data.isFullScreen);
          },
        }}
        options={{
          playlist: [
            { file: 'https://CDNドメイン/example_video_01.mp4' },
          ],
          aspectRatio: '16/9',
          objectFit: 'contain',
          modalFullscreen: false, // カスタム全画面表示
        }}
      />

      {!isFullScreen && (
        <ScrollView style={{ backgroundColor: '#ffffff' }}>
          <View style={{ padding: 10 }}>
            <Text>カスタム全画面表示実装のデモ</Text>
          </View>
        </ScrollView>
      )}
    </SafeAreaProvider>
  );
}
```

## カスタムアイコン

サポートプラットフォーム: `Android` `iOS`

VPE React Native SDKは、コントロールバーのすべてのデフォルトアイコンをユーザー定義アイコン(JSX、リモート画像 URL、ローカル require画像、関数型レンダラー)に置き換えることができる IconOverridesシステムを提供します。

              参考

              

従来の `props.icon`は廃止され、`options.icon`に引き継がれます。

### 値タイプ

- ReactNode: JSXに直接転送
- string: リモート画像 URL → 内部で `&lt;Image source={{uri}}/&gt;` レンダリング
- number: `require(&apos;./icon.png&apos;)` 結果 → ローカル画像
- () => ReactNode: 動的レンダリング用の関数型

### 使用可能なキー

以下のキーは、Control Barのデフォルトコントロールコンポーネントが参照するアイコン名です。

| キー | 説明 |
| --- | --- |
| bigPlay | 中央大型再生ボタン |
| play | 再生 |
| pause | 一時停止 |
| replay | 再生終了後の再視聴 |
| prev | 前のトラック |
| next | 次のトラック |
| subtitle | 字幕 ON |
| subtitleOff | 字幕 OFF |
| fullscreen | 全画面表示開始 |
| fullscreenExit | 全画面表示終了 |
| volumeFull | 音量最大 |
| volumeMid | 音量中間 |
| volumeMute | ミュート |
| setting | 設定 |
| back | 戻る |
| share | 共有 |
| skipForward | 10秒進む |
| skipBack | 10秒戻る |

### JSXに置き換え

```
import { VpePlayer } from 'vpe-react-native';
import { PlayIcon, PauseIcon } from 'phosphor-react-native';

export default function MyPlayer() {
  return (
    <VpePlayer
      accessKey={'YOUR_ACCESS_KEY'}
      options={{
        playlist: [{ file: 'https://CDNドメイン/master.m3u8' }],
        icon: {
          play: <PlayIcon size={28} color="#ffffff" weight="fill" />,
          pause: <PauseIcon size={28} color="#ffffff" weight="fill" />,
        },
      }}
    />
  );
}
```

### 画像に置き換え

```
<VpePlayer
  accessKey={'YOUR_ACCESS_KEY'}
  options={{
    playlist: [{ file: 'https://CDNドメイン/master.m3u8' }],
    icon: {
      play: 'https://example.com/icons/play.png', // リモート画像 URL(string)
      pause: require('./assets/pause.png'),        // ローカル画像(require → number)
      fullscreen: () => <MyFullscreenIcon />,      // 関数型レンダラー
    },
  }}
/>
```