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.

Player UX

Prev Next

Available in Classic and VPC

It explains how to modify the script code to configure UX-related options.

Note
  • For descriptions of properties to set options, see player settings.
  • The available options may vary depending on your subscription plan.

startMutedInfoNotVisible (display mute status)

You can display the mute status.

// Video (MP4)
const player = new ncplayer("video1", {
  autostart: true,
  muted: true,
  startMutedInfoNotVisible: true,
  playlist: [
    {
      file: "https://CDNdomain/example_video_01.mp4",
    },
  ],
});

seekingPreview (thumbnail preview)

Thumbnails are provided during section navigation.

Note
  • Available only with the standard plan.
  • Available only in VODs.
// Video (VOD)
const player = new ncplayer("video1", {
  seekingPreview: true,
  playlist: [
    {
      file: "https://CDNdomain/example_video_01.mp4",
    },
  ],
});

autoPause (auto-pause when browser is inactive.)

Playback automatically pauses when the tab becomes inactive.

Note
  • Available only with the standard plan.
  • It does not work on mobile.
  • In webapp/webview environments, it does not work.
// Video (VOD)
const player = new ncplayer("video1", {
  autoPause: true,
  playlist: [
    {
      file: "https://CDNdomain/example_video_01.mp4",
    },
  ],
});

keyboardShortcut (keyboard shortcuts)

You can configure whether keyboard shortcuts are enabled.

Note

Available only with the standard plan.

Default shortcut

Key Feature
Space Play/pause
← → Jump back/forward 5 seconds
↑ ↓ Volume adjusted by 5%
M Mute
F Full screen 
// Video (MP4)
const player = new ncplayer("video1", {
  keyboardShortcut: true,
  playlist: [
    {
      file: "https://CDNdomain/example_video_01.mp4",
    },
  ],
});

touchGestures (touch gestures)

You can configure whether touch gestures are enabled.

Note

Available only with the standard plan.

// Video (MP4)
const player = new ncplayer("video1", {
  touchGestures: true,
  playlist: [
    {
      file: "https://CDNdomain/example_video_01.mp4",
    },
  ],
});

visibleWatermark/watermarkText (text watermark)

You can enable the watermark or configure the display text.

Note
  • Available only with the standard plan.
  • This option can only be applied through console settings.
  • Values cannot be changed in code. (They can only be checked within script code.)
// Video (MP4)
const player = new ncplayer("video1", {
  visibleWatermark: true,
  watermarkText: "Sample watermark",
  playlist: [
    {
      file: "https://CDNdomain/example_video_01.mp4",
    },
  ],
});

watermarkConfig (detailed settings for text watermark)

You can configure watermark movement, position, transparency, and related options.

// Video (MP4) - random movement
const player = new ncplayer("video1", {
  watermarkConfig: {
    randPosition: true,          // Watermark random movement option
    randPositionInterVal: 5000, // Random movement interval (ms)
    opacity: 0.4,                // Watermark transparency
  },
  playlist: [
    {
      file: "https://CDNdomain/example_video_01.mp4",
    },
  ],
});

// Video (MP4) - fixed position
const player = new ncplayer("video1", {
  watermarkConfig: {
    randPosition: false, // Watermark random movement option
    x: 10,               // Top-left X coordinate (%)
    y: 10,               // Top-left Y coordinate (%)
    opacity: 0.4,        // Watermark transparency
  },
  playlist: [
    {
      file: "https://CDNdomain/example_video_01.mp4",
    },
  ],
});

iosFullscreenNativeMode (iOS web Full screen mode)

It uses the native Full screen mode of iOS Safari.

Note
  • Available only with the basic/standard plan.
  • It works only in iOS Safari.
  • It is supported in player version 1.1.5 or later.
  • The default value is true.
// Video (MP4)
const player = new ncplayer("video1", {
  iosFullscreenNativeMode: true,
  playlist: [
    {
      file: "https://CDNdomain/example_video_01.mp4",
    },
  ],
});

Full UMD example

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>VPE Player - UX option</title>

  <!-- Load hls.js/dash.js before the VPE script -->
  <script src="https://player.vpe.naverncp.com/lib/js/hls.min.js"></script>
  <script src="https://player.vpe.naverncp.com/lib/js/dash.all.min.js"></script>
  <script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key=YOUR_ACCESS_KEY"></script>
</head>
<body>
  <div id="video1" style="max-width: 800px; margin: 0 auto;"></div>

  <script>
    const player = new ncplayer("video1", {
      playlist: [
        {
          file: "https://CDNdomain/example_video_01.mp4",
        },
      ],
      autostart: true,
      muted: true,
      startMutedInfoNotVisible: true,
      autoPause: true,
      keyboardShortcut: true,
      touchGestures: true,
      seekingPreview: true,
      iosFullscreenNativeMode: true,
      visibleWatermark: true,
      watermarkText: "Sample watermark",
      watermarkConfig: {
        randPosition: true,
        randPositionInterVal: 5000,
        opacity: 0.4,
      },
    });
  </script>
</body>
</html>

Custom button

By using options.icon, you can replace the default icons in the player control bar with your own images. Icons that are not specified will continue to use the default Material Design icons.

Note

In a UMD environment (static HTML/PHP/JSP), only SVG or PNG image paths (as strings) are supported. To use React components (JSX) for icons, make sure you are working with the React SDK.

Available icon keys

bigPlay play pause prev next replay subtitle subtitleOff fullscreen fullscreenExit volumeFull volumeMute volumeMid pip setting

Value type

Type Examples Rendering mode
string (URL) /icons/play.svg Rendering with <img src="...">
Not assigned - Use default material design icons

Replace icons with image paths

If you pass an SVG or PNG file path as a string, it will be rendered with an <img> tag. If you specify only the icons you need, the rest will remain as the default icons.

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",
  },
});

Use of external SVG URL

You can also use an SVG API such as Iconify to provide icons via external URLs.

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",
  },
});

Full HTML example

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>VPE Player - custom icon</title>

  <!-- Load hls.js/dash.js before the VPE script -->
  <script src="https://player.vpe.naverncp.com/lib/js/hls.min.js"></script>
  <script src="https://player.vpe.naverncp.com/lib/js/dash.all.min.js"></script>
  <script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key=YOUR_ACCESS_KEY"></script>
</head>
<body>
  <div id="video" style="max-width: 800px; margin: 0 auto;"></div>

  <script>
    const player = new ncplayer("video", {
      playlist: [
        {
          file: "https://CDN_DOMAIN/example.m3u8",
          poster: "https://CDN_DOMAIN/poster.jpg",
        },
      ],
      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",
        setting: "/icons/setting.svg",
        volumeFull: "/icons/volume.svg",
        volumeMute: "/icons/volume-mute.svg",
      },
    });
  </script>
</body>
</html>
Business Registration Number: 129-86-31394 E-commerce Permit Number:No. 2009-GyeonggiSeongnam-0510
CEO: Kim Yuwon Address: NAVER Green Factory 17th–26th Floors, Buljeong-ro 6, Bundang-gu, Seongnam-si, Gyeonggi-do 13561, Republic of Korea. Customer Support Number: 1544-5876
© NAVER Cloud Corp. All Rights Reserved.