Playback settings

Available in Classic and VPC

Explains how to configure player playback options.

Playback operation

Autostart (auto playback)

The playback source starts automatically.

const player = new ncplayer("player", {
  autostart: true, // Autoplay (false: Disable autoplay)
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

Autoplay works only when one or more of the following conditions are met:

• When muted or when the volume is set to 0
• When a user's input such as click, touch, or key press occurs
• When set to whitelist page in the settings
• When iframe that supports autoplay and the relevant document are set

muted (mute)

When the player is played for the first time, it starts in muted mode.

const player = new ncplayer("player", {
  muted: true, // Muted on first play (false: Not muted)
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

repeat (repeated playback)

The video plays repeatedly. If there are multiple playlists, playback returns to the first video after the last one finishes.

const player = new ncplayer("player", {
  repeat: true, // Repeat (false: Disable repeat)
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

setStartTime (set the initial release date)

Set VOD so that all users watch the same section simultaneously, like a live broadcast.

const player = new ncplayer("player", {
  autoPause: true,
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
  setStartTime: "2023-02-08 06:07:00+00:00", // Set initial release date
});

Playback control

playbackRate (playback rate)

Adjust the playback speed. If not specified, the default value is 1.0.

const player = new ncplayer("player", {
  muted: true,
  playbackRate: 0.5, // Playback speed control (default: 1.0)
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

playRateSetting (playback rate control UI)

Provide a UI that allows users to set the playback speed.

const player = new ncplayer("player", {
  muted: true,
  playRateSetting: [0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0],
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

lowLatencyMode (ultra-low latency mode)

Apply a player optimized for Low Latency HLS. This is the officially supported mode for Low Latency HLS of the Live Station service.

const player = new ncplayer("player", {
  playlist: [
    {
      file: "https://example.com/live/index.m3u8",
    },
  ],
  lowLatencyMode: true, // use LL-HLS (false: LL-HLS not used)
});

Interface display

aspectRatio (interface ratio)

This property sets the aspect ratio of the player component. Supports "16/9", "4/3", "1/1", "9/16", and "auto" etc.

const player = new ncplayer("player", {
  aspectRatio: "16/9", // Set the aspect ratio
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

objectFit (Full screen)

This property sets how the video fits the component. Supports contain, cover, fill, scale-down, and stretch.

const player = new ncplayer("player", {
  objectFit: "cover", // Specifies how the video is displayed
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
    },
  ],
});

Subtitle settings (vtt)

This property links a subtitle file in vtt format. In this playlist item, you specify subtitle information in the vtt array.

const player = new ncplayer("player", {
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
      poster: "https://example.com/poster.jpg",
      vtt: [
        {
          file: "https://example.com/subtitle_ko.vtt",
          label: "Korean",
          language: "ko",
          default: true, // Default subtitle settings
        },
        {
          file: "https://example.com/subtitle_en.vtt",
          label: "English",
          language: "en",
        },
      ],
    },
  ],
});

Metadata settings (description)

This property sets whether to display metadata such as the video title, channel name, and profile image. The configured metadata is displayed at the top of the player.

const player = new ncplayer("player", {
  playlist: [
    {
      file: "https://example.com/video/master.m3u8",
      poster: "https://example.com/poster.jpg",
      description: {
        title: "Video title",
        profile_name: "Channel name",
        profile_image: "https://example.com/profile.png",
        created_at: "2026.01.01",
      },
    },
  ],
  autostart: true,
  muted: true,
});