---
title: "プレイヤー UX"
slug: "vpe-example-ux"
updated: 2026-09-17T09:28:48Z
published: 2026-09-17T09:28:48Z
canonical: "guide.ncloud-docs.com/vpe-example-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では、スクリプトコードを変更してプレイヤー UXに関するオプションを設定する方法を説明します。

              参考

              

- オプションを設定するプロパティに関する説明は、[プレイヤー設定](/docs/ja/vpe-web#%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4%EC%84%A4%EC%A0%95)をご参照ください。
- 利用中の料金プランに応じて設定できるオプションが異なります。

## ミュート状態の表示有無

`startMutedInfoNotVisible`プロパティでミュート状態 UIを表示できます。 ![vpe-example-ux_muted_ko](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/vpe-example-ux_muted_ja.png?sv=2026-02-06&spr=https&st=2026-10-30T22%3A48%3A06Z&se=2026-10-30T23%3A48%3A06Z&sr=c&sp=r&sig=hV7Jc7R0dTy5ENx02RdR8cASZE%2F%2BtSCf47xnVQCkPPw%3D)

ユースケースは次の通りです。

```
// 動画(MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
    },
  ],
	startMutedInfoNotVisible: true, // ミュート状態 UIを表示しない(false(デフォルト): ミュート状態 UIを表示する)
});
```

## 区間移動のプレビュー

`seekingPreview` プロパティでコントロールバーの動画シークスライダの上にその区間のプレビューを表示するように設定します。

              参考

              

- このオプションは Standard料金プランを利用中の場合のみ設定できます。
- この機能は VOD専用機能で、LIVEでは無効になります。

![vpe-example-ux_preview_ko](https://cdn.document360.io/6998976f-9d95-4df8-b847-d375892b92c2/Images/Documentation/vpe-example-ux_preview_ja.png?sv=2026-02-06&spr=https&st=2026-10-30T22%3A48%3A06Z&se=2026-10-30T23%3A48%3A06Z&sr=c&sp=r&sig=hV7Jc7R0dTy5ENx02RdR8cASZE%2F%2BtSCf47xnVQCkPPw%3D)

ユースケースは次の通りです。

```
// 動画(MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
    },
  ],
	seekingPreview: true, // シークスライダのプレビューを表示する(デフォルト)(false: プレビューを表示しない)
});
```

## ブラウザ無効化時の自動停止

autoPauseブラウザタブが無効になっていると、映像を自動的に停止します。

              参考

              

- 一部のモバイル環境では動作しません。
- ウェブアプリ/ウェブビューの環境では autoPause機能が動作しません。
- このオプションは Standard料金プランを利用中の場合のみ設定できます。

ユースケースは次の通りです。

```
// 動画(MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDNドメイン/example_video_01.mp4',
            poster: 'https://CDNドメイン/example_image_01.png',          
        }
    ],
    autoPause:true // ブラウザ無効化時に自動停止
});
```

## キーボードショートカットキー

`keyboardShortcut` プロパティでキーボードショートカットキー機能を有効化できます。

              参考

              

このオプションは Standard料金プランを利用中の場合のみ設定できます。

ユースケースは次の通りです。

```
// 動画(MP4)
new ncplayer('video1', {
autostart: true,
playlist: [
{
file: 'https://CDNドメイン/example_video_01.mp4',
},
],
keyboardShortcut: true, // キーボードショートカットキーを使用する(デフォルト)(false: キーボードショートカットキーを使用しない)
});
```

キーボードショートカットキー機能は次の通りです。

| ショートカット | 機能 |
| --- | --- |
| 左/右矢印 | 動画スキップ |
| 上/下矢印 | ボリュームコントロール |
| F | フルスクリーン |
| M | ミュート |
| Space | 再生/停止 |

## タッチジェスチャー

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

              参考

              

このオプションは Standard料金プランを利用中の場合のみ設定できます。

ユースケースは次の通りです。

```
// 動画(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
    },
  ],
	touchGestures: true // タッチジェスチャーを使用(デフォルト)(false: タッチジェスチャを使用しない)
});
```

## テキストウォーターマーク

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

              参考

              

- この機能を使用するには、コンソールでそのプレイヤーのウォーターマーク設定を有効にする必要があります。ウォーターマークの有効化に関する詳細は、[プレイヤー設定](/docs/ja/vpe-player#%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4UX)をご参照ください。
- このオプションは Standard料金プランを利用中の場合のみ設定できます。
- ウォーターマークテキストは、スクリプトを介してのみ追加できます。

ユースケースは次の通りです。

```
// 動画(MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDNドメイン/example_video_01.mp4',
        },
    ],
    visibleWatermark:true, // テキストウォーターマークを使用する(false(デフォルト): テキストウォーターマークを使用しない)
    watermarkText:'UserId@SiteDomain', // ウォーターマークテキスト、例) 視聴者を追跡できるユーザー ID+サイト名
});
```

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

テキストウォーターマークを使用する場合、ウォーターマークのランダム位置を有効化有無に応じて詳細オプションを設定できます。

              参考

              

ウォーターマークの詳細オプションは、NAVERクラウドプラットフォームコンソールでも設定できます。詳細は、[プレイヤー設定](/docs/ja/vpe-player#%ED%94%8C%EB%A0%88%EC%9D%B4%EC%96%B4UX)をご参照ください。

ランダム位置の有効化と無効化のユースケースは、次の通りです。

- ランダム位置の有効化

```
// 動画(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
    },
  ],
  visibleWatermark:true, // コンソールでのみ設定可能(false(デフォルト): テキストウォーターマークを使用しない)
  watermarkText:'UserId@SiteDomain', // 例) 視聴者を追跡できるユーザー ID+サイト名
  watermarkConfig:{
      randPosition: true, // ウォーターマークのランダム位置を有効化(デフォルト)
      randPositionInterVal: 5000, // ウォーターマーク位置のランダム変更時間、デフォルト値: 3000(3秒)
  }
});
```
- ランダム位置の無効化

```
// 動画(MP4)
new ncplayer('video1', {
  playlist: [
    {
      file: 'https://CDNドメイン/example_video_01.mp4',
    },
  ],
  visibleWatermark:true, // コンソールでのみ設定可能(false(デフォルト): テキストウォーターマークを使用しない)
  watermarkText:'UserId@SiteDomain', // 例) 視聴者を追跡できるユーザー ID+サイト名
  watermarkConfig:{
      randPosition: false, // ウォーターマークの位置を固定
      x: 10, // 横位置%
      y: 2,  // 縦位置%
      opacity: 0.4 //透明度0.1 ~ 1
  }
});
```

## IOSウェブフルスクリーン方式

iosFullscreenNativeModeプロパティで iOSモバイル Safariに対応する新しい Fullscreenモードを設定できます。

              参考

              

- このオプションは iOSモバイル Safariのみで動作するオプションです。
- プレイヤー1.1.5から当該オプションを使用できます。
- iosFullscreenNativeModeのデフォルト値は true(iOS Native Fullscreen)です。
- Basic/Standardの料金プランを両方サポートする機能です。

ユースケースは次の通りです

```
// 動画(MP4)
new ncplayer('video1', {
    playlist: [
        {
            file: 'https://CDNドメイン/example_video_01.mp4',
            poster: 'https://CDNドメイン/example_image_01.png',          
        }
    ],
    iosFullscreenNativeMode:false // true : iOS Native Fullscreen / false : HTML Fullscreenモード使用
});
```