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

Prev Next

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のユースケース

<!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オプション</title>

  <!-- hls.js / dash.jsを VPEスクリプトよりも先にロード -->
  <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://CDNドメイン/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>

カスタムボタン

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のユースケース

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>VPE Player - カスタムアイコン</title>

  <!-- hls.js / dash.jsを VPEスクリプトよりも先にロード -->
  <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>
事業者登録番号: 129-86-31394 通信販売業申告番号:第2009-京畿城南-0510号
代表取締役: キム・ユウォン アドレス: 13561 京畿道 城南市 盆唐区 仏亭路6 グリーンファクトリー, 17~26F お客様センターの代表電話: 1544-5876
© NAVER Cloud Corp. All Rights Reserved.