--- title: "プレイヤー UX" slug: "vpe-umd-player-ux" updated: 2026-09-17T09:22:05Z published: 2026-09-17T09:22:05Z canonical: "guide.ncloud-docs.com/vpe-umd-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(ミュート状態を表示) ミュート状態を表示できます。 ``` // 動画(MP4) const player = new ncplayer("video1", { autostart: true, muted: true, startMutedInfoNotVisible: true, playlist: [ { file: "https://CDNドメイン/example_video_01.mp4", }, ], }); ``` ## seekingPreview(シークバーにサムネイルを表示) セクションを移動する際にサムネイル画像が表示されます。 参考 - Standard料金プランでのみご利用いただけます。 - VODでのみサポートします。 ``` // 動画(VOD) const player = new ncplayer("video1", { seekingPreview: true, playlist: [ { file: "https://CDNドメイン/example_video_01.mp4", }, ], }); ``` ## autoPause(ブラウザ無効化時に自動停止) タブが無効になると、自動的に再生が停止します。 参考 - Standard料金プランでのみご利用いただけます。 - モバイルでは動作しません。 - Webapp/Webview環境では動作しません。 ``` // 動画(VOD) const player = new ncplayer("video1", { autoPause: true, playlist: [ { file: "https://CDNドメイン/example_video_01.mp4", }, ], }); ``` ## keyboardShortcut(キーボードショートカットキー) キーボードショートカットキーの使用有無を設定します。 参考 Standard料金プランでのみご利用いただけます。 **デフォルトショートカットキー** | キー | 機能 | | --- | --- | | Space | 再生 / 一時停止 | | ← → | 5秒前 / 後に移動 | | ↑ ↓ | ボリュームを5%調整 | | M | ミュート | | F | フルスクリーン | ``` // 動画(MP4) const player = new ncplayer("video1", { keyboardShortcut: true, playlist: [ { file: "https://CDNドメイン/example_video_01.mp4", }, ], }); ``` ## touchGestures(タッチジェスチャー) タッチジェスチャーの使用有無を設定します。 参考 Standard料金プランでのみご利用いただけます。 ``` // 動画(MP4) const player = new ncplayer("video1", { touchGestures: true, playlist: [ { file: "https://CDNドメイン/example_video_01.mp4", }, ], }); ``` ## visibleWatermark/watermarkText(テキストウォーターマーク) ウォーターマークを有効にしたり、表示するテキストを設定します。 参考 - Standard料金プランでのみご利用いただけます。 - このオプションは、コンソール設定を通じてのみ適用されます。 - コード内で値を変更することはできません(スクリプトコードでのみ確認可能)。 ``` // 動画(MP4) const player = new ncplayer("video1", { visibleWatermark: true, watermarkText: "Sample watermark", playlist: [ { file: "https://CDNドメイン/example_video_01.mp4", }, ], }); ``` ## watermarkConfig(テキストウォーターマークの詳細設定) ウォーターマークの移動、位置、透明度などを設定します。 ``` // 動画(MP4) - ランダム移動 const player = new ncplayer("video1", { watermarkConfig: { randPosition: true, // ウォーターマークのランダム移動有無 randPositionInterVal: 5000, // ランダム移動間隔(ms) opacity: 0.4, // ウォーターマークの透明度 }, playlist: [ { file: "https://CDNドメイン/example_video_01.mp4", }, ], }); ``` ``` // 動画(MP4) - 固定位置 const player = new ncplayer("video1", { watermarkConfig: { randPosition: false, // ウォーターマークのランダム移動有無 x: 10, // 左上の x座標(%単位) y: 10, // 左上の y座標(%単位) opacity: 0.4, // ウォーターマークの透明度 }, playlist: [ { file: "https://CDNドメイン/example_video_01.mp4", }, ], }); ``` ## iosFullscreenNativeMode(iOSウェブ全画面表示方式) iOS Safariのネイティブ全画面表示方式を使用します。 参考 - Basic/Standard料金プランでのみご利用いただけます。 - iOS Safariでのみ動作します。 - Playerバージョン 1.1.5以降でサポートします。 - デフォルト値は `true`です。 ``` // 動画(MP4) const player = new ncplayer("video1", { iosFullscreenNativeMode: true, playlist: [ { file: "https://CDNドメイン/example_video_01.mp4", }, ], }); ``` ## 全 UMDのユースケース ``` VPE Player - UXオプション
``` ## カスタムボタン `options.icon`を使用すると、プレイヤーコントロールバーのデフォルトアイコンを希望する画像に置き換えることができます。指定されていないアイコンは、デフォルトの Material Designアイコンが維持されます。 参考 UMD環境(静的 HTML/PHP/JSP)では、SVGまたは PNG画像のパス(string)のみ使用可能です。Reactコンポーネント(JSX)を使用するには、React SDKをご利用ください。 ### 使用可能なアイコンキー `bigPlay` `play` `pause` `prev` `next` `replay` `subtitle` `subtitleOff` `fullscreen` `fullscreenExit` `volumeFull` `volumeMute` `volumeMid` `pip` `setting` ### 値タイプ | タイプ | 例 | レンダリング方式 | | --- | --- | --- | | string (URL) | `/icons/play.svg` | `<img src="...">`でレンダリング | | 未指定 | - | デフォルト Material Designアイコンを使用 | ### 画像パスでアイコンを置き換え SVGまたは PNGファイルのパスを文字列として渡すと、`<img>` タグとしてレンダリングされます。必要なアイコンのみ指定すると、残りはデフォルトアイコンが維持されます。 ``` const player = new ncplayer("video", { playlist: [ { file: "https://CDN_DOMAIN/example.m3u8", }, ], autostart: true, muted: true, icon: { play: "/icons/play.svg", pause: "/icons/pause.svg", bigPlay: "/icons/big-play.svg", fullscreen: "/icons/fullscreen.svg", fullscreenExit: "/icons/fullscreen-exit.svg", }, }); ``` ### 外部 SVG URLの活用 Iconifyなどの SVG APIを活用して、外部 URLからアイコンを提供することも可能です。 ``` const player = new ncplayer("video", { playlist: [ { file: "https://CDN_DOMAIN/example.m3u8", }, ], autostart: true, muted: true, icon: { play: "https://api.iconify.design/mdi/play-circle-outline.svg?color=%23ffffff&width=24&height=24", pause: "https://api.iconify.design/mdi/pause-circle-outline.svg?color=%23ffffff&width=24&height=24", bigPlay: "https://api.iconify.design/mdi/play-circle-outline.svg?color=%23ffffff&width=48&height=48", fullscreen: "https://api.iconify.design/mdi/arrow-expand-all.svg?color=%23ffffff&width=24&height=24", fullscreenExit: "https://api.iconify.design/mdi/arrow-collapse-all.svg?color=%23ffffff&width=24&height=24", setting: "https://api.iconify.design/mdi/cog-outline.svg?color=%23ffffff&width=24&height=24", volumeFull: "https://api.iconify.design/mdi/volume-high.svg?color=%23ffffff&width=24&height=24", volumeMute: "https://api.iconify.design/mdi/volume-off.svg?color=%23ffffff&width=24&height=24", volumeMid: "https://api.iconify.design/mdi/volume-medium.svg?color=%23ffffff&width=24&height=24", pip: "https://api.iconify.design/mdi/picture-in-picture-bottom-right.svg?color=%23ffffff&width=24&height=24", }, }); ``` ### 全 HTMLのユースケース ``` VPE Player - カスタムアイコン
```