---
title: "プレイヤー UXのオプション"
slug: "vpe-player-ux-option"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-player-ux-option"
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のタッチジェスチャー機能を有効化します。
```
```
## テキストウォーターマーク
watermarkTextプロパティで視聴者を追跡できるウォーターマークを希望するテキスト(ユーザー ID+サイト名など)に設定します。 この機能を使用するには、コンソールでそのプレイヤーのウォーターマーク設定を有効にする必要があります。ウォーターマークの有効化に関する詳細は、プレイヤー設定をご参照ください。 ウォーターマークテキストは、スクリプトを介してのみ追加できます。
[Video Player Enhancementオプションガイド - プレイヤー設定](/docs/ja/vpe-player)
```
```
## テキストウォーターマークの詳細設定
テキストウォーターマークを使用する場合、ウォーターマークのランダム位置を有効化有無に応じて詳細オプションを設定できます。 ウォーターマークの詳細オプションは、NAVERクラウドプラットフォームコンソールでも設定できます。詳細は、プレイヤー設定をご参照ください。 ランダム位置の有効化と無効化のユースケースは、次の通りです。
## ランダム位置の有効化
```
```
## ランダム位置の無効化
```
```
## フルスクリーンモード
フルスクリーンをモーダル(Modal)やカスタムフルスクリーンの中から選択して開発できます。 モーダル方式のフルスクリーンはカスタムできませんが、基本的な動作が行われます。 カスタムフルスクリーンは安全領域や動作などを直接コントロールできます。
## モーダル型フルスクリーン
```
```
## カスタムフルスクリーン
```
import { View, StatusBar, ScrollView, TouchableOpacity, 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 (
{
setIsFullScreen(data.isFullScreen);
},
}}
options={{
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4'
},
],
aspectRatio: '16/9',
objectFit: 'contain',
modalFullscreen: false, // カスタムフルスクリーン
}}
/>
{!isFullScreen && (
カスタムフルスクリーン実現のデモ
react-native-safe-area-context利用のユースケース
)}
);
}
```