---
title: "プレイヤー UX"
slug: "vpe-react-player-ux"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-react-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に関連するオプションを設定する方法について説明します。
参考
- オプションを設定するプロパティに関する説明は、プレイヤー設定をご参照ください。
- ご利用中の料金プランによって、設定可能なオプションが異なる場合があります。
## startMutedInfoNotVisible(ミュート状態を表示)
ミュート状態を表示できます。
```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 動画(MP4)
export function App() {
return (
);
}
```
## seekingPreview(シークバーにサムネイルを表示)
セクションを移動する際にサムネイル画像が表示されます。
参考
- Standard料金プランでのみご利用いただけます。
- VODでのみサポートします。
```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 動画(VOD)
export function App() {
return (
);
}
```
## autoPause(ブラウザ無効化時に自動停止)
タブが無効になると、自動的に再生が停止します。
参考
- Standard料金プランでのみご利用いただけます。
- モバイルでは動作しません。
- Webapp/Webview環境では動作しません。
```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 動画(VOD)
export function App() {
return (
);
}
```
## keyboardShortcut(キーボードショートカットキー)
キーボードショートカットキーの使用有無を設定します。
参考
Standard料金プランでのみご利用いただけます。
**デフォルトショートカットキー**
| キー | 機能 |
| --- | --- |
| Space | 再生 / 一時停止 |
| ← → | 5秒前 / 後に移動 |
| ↑ ↓ | ボリュームを5%調整 |
| M | ミュート |
| F | フルスクリーン |
```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 動画(MP4)
export function App() {
return (
);
}
```
## touchGestures(タッチジェスチャー)
タッチジェスチャーの使用有無を設定します。
参考
Standard料金プランでのみご利用いただけます。
```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 動画(MP4)
export function App() {
return (
);
}
```
## visibleWatermark/watermarkText(テキストウォーターマーク)
ウォーターマークを有効にしたり、表示するテキストを設定します。
参考
- Standard料金プランでのみご利用いただけます。
- このオプションは、コンソール設定を通じてのみ適用されます。
- コード内で値を変更することはできません(スクリプトコードでのみ確認可能)。
```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 動画(MP4)
export function App() {
return (
);
}
```
## watermarkConfig(テキストウォーターマークの詳細設定)
ウォーターマークの移動、位置、透明度などを設定します。
**ランダム移動**
```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 動画(MP4) - ランダム移動
export function App() {
return (
);
}
```
**固定位置**
```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 動画(MP4) - 固定位置
export function App() {
return (
);
}
```
## iosFullscreenNativeMode(iOSウェブ全画面表示方式)
iOS Safariのネイティブ全画面表示方式を使用します。
参考
- Standard料金プランでのみご利用いただけます。
- iOS Safariでのみ動作します。
- Playerバージョン 1.1.5以降でサポートします。
- デフォルト値は `true`です。
```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// 動画(MP4)
export function App() {
return (
);
}
```
## カスタムボタン
`options.icon`を使用すると、プレイヤーコントロールバーのデフォルトアイコンを希望する画像や Reactコンポーネントに置き換えることができます。指定されていないアイコンは、デフォルトの Material Designアイコンが維持されます。
参考
UMD環境(静的 HTML/PHP/JSP)では Reactコンポーネントを使用できず、SVGまたは PNG画像のパス(string)のみ使用可能です。
### IconOverridesのタイプ
各キーに `string` または `ReactNode`を渡すことができます。
```
type IconOverrides = {
bigPlay?: string | ReactNode; // 大型再生ボタンのアイコン
play?: string | ReactNode; // 再生アイコン
pause?: string | ReactNode; // 一時停止アイコン
prev?: string | ReactNode; // 前のトラックアイコン
next?: string | ReactNode; // 次のトラックアイコン
replay?: string | ReactNode; // リプレイアイコン
subtitle?: string | ReactNode; // 字幕オンアイコン
subtitleOff?: string | ReactNode; // 字幕オフアイコン
fullscreen?: string | ReactNode; // 全画面表示アイコン
fullscreenExit?: string | ReactNode; // 全画面表示解除アイコン
volumeFull?: string | ReactNode; // ボリューム最大アイコン
volumeMute?: string | ReactNode; // ミュートアイコン
volumeMid?: string | ReactNode; // ボリューム中間アイコン
pip?: string | ReactNode; // PIPアイコン
setting?: string | ReactNode; // 設定アイコン
};
```
### 値タイプ
| タイプ | 例 | レンダリング方式 |
| --- | --- | --- |
| string | `"/icons/play.svg"` | `<img src={url}>`でレンダリング |
| ReactNode | `<FaPlay/>` | Reactコンポーネント/JSXをそのままレンダリング |
| 未指定 | - | デフォルト Material Designアイコンを使用 |
### Reactコンポーネントでのアイコン置き換え
カスタム SVGコンポーネントや `react-icons` などのアイコンライブラリを活用して、JSXでアイコンを置き換えることができます。
```
"use client";
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
// カスタム SVGコンポーネントを定義
function PlayIcon() {
return (
);
}
function PauseIcon() {
return (
);
}
function FullscreenIcon() {
return (
);
}
export default function CustomIconPlayer() {
return (
,
pause: ,
bigPlay: ,
fullscreen: ,
fullscreenExit: ,
setting: ,
volumeFull: ,
volumeMute: ,
volumeMid: ,
},
}}
/>
);
}
```
`app/player/page.tsx`
### 画像パスでアイコンを置き換え
SVGまたは PNGファイルのパスを文字列として渡すと、`<img>` タグとしてレンダリングされます。Reactおよび UMD環境の両方で利用可能です。
```
"use client";
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
export default function SvgUrlIconPlayer() {
return (
);
}
```
### 併用
画像のパスと Reactコンポーネントを併用できます。必要なアイコンのみ指定すると、残りはデフォルトアイコンが維持されます。
```
"use client";
import Hls from "hls.js";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";
import { FaPlay, FaPause } from "react-icons/fa";
export default function MixedIconPlayer() {
return (
,
pause: ,
// イメージパス
bigPlay: "/icons/big-play.svg",
fullscreen: "/icons/fullscreen.svg",
fullscreenExit: "/icons/fullscreen-exit.svg",
},
}}
/>
);
}
```
`app/player/page.tsx`