OTT-specific features

Available in Classic and VPC

You can use features that OTT services commonly require, such as skip intro, opening, and ending, age rating display, and content warnings. Configure each feature at the playlist item level.

Skip intro, opening, and ending

When you specify the intro, opening, and ending segment for each playlist item, the player automatically displays the skip button at the configured time.

Option

Configure all skip options at the playlist[] item level.

Each segment object includes the following fields:

Type definition

// Playlist item structure
{
  file: "string",
  poster: "string",
  // ... Other properties

  // OTT skip segment
  intro: { start: "HH:MM:SS", duration: number },
  opening: { start: "HH:MM:SS", duration: number },
  ending: { start: "HH:MM:SS", duration: number },
}

Basic usage example

const player = new ncplayer("player", {
  autostart: true,
  muted: true,
  playlist: [
    {
      file: "https://CDN_DOMAIN/episode_01.m3u8",
      poster: "https://CDN_DOMAIN/episode_01.jpg",
      intro: {
        start: "00:00:00",
        duration: 5,
      },
      opening: {
        start: "00:00:05",
        duration: 90,
      },
      ending: {
        start: "00:45:00",
        duration: 60,
      },
    },
  ],
});

How it works

Opening and ending segments support automatic skipping. The operational process is as follows:

• If the user manually seeks into an opening or ending segment, the player bypasses automatic skipping.
• If an internal skip action (such as an intro skip) moves playback into an opening segment, the player continues automatic skipping.

The player renders the skip button as a fixed overlay regardless of whether the control bar is visible. The player also aligns the button position with the bottom offset of the center layout.

Skip event

When the player skips a segment, the following event triggers. You can receive the event through the on() method.

const player = new ncplayer("player", {
  playlist: [
    {
      file: "https://CDN_DOMAIN/episode_01.m3u8",
      intro: { start: "00:00:00", duration: 5 },
      opening: { start: "00:00:05", duration: 90 },
      ending: { start: "00:45:00", duration: 60 },
    },
  ],
});

player.on("introSkip", function() {
  console.log("Intro skipped");
});

player.on("openingSkip", function() {
  console.log("Opening skipped");
});

player.on("endingSkip", function() {
  console.log("Ending skipped");
});

Display age ratings

Set the ageRating value for the playlist item to automatically display the age rating overlay when playback starts.

Supported ratings

Overlay behavior

• Display the overlay once, 3 seconds after playback starts.
• Show the overlay with a fade and slide animation.
• Apply a black gradation (opacity 0.3 → 0) at the top of the interface.
• Supports multiple languages. Supported languages are ko, en, and ja.

Basic usage example

const player = new ncplayer("player", {
  autostart: true,
  muted: true,
  playlist: [
    {
      file: "https://CDN_DOMAIN/episode_01.m3u8",
      poster: "https://CDN_DOMAIN/episode_01.jpg",
      description: {
        title: "Drama season 1 EP. 01",
        profile_name: "OTT channel",
      },
      ageRating: "15",
    },
  ],
});

Content warnings

When you set the contentWarnings array for item playlist, the player displays a warning overlay at the start of playback to inform viewers about sensitive content contained within the video.

Supported warning types

Basic usage example

const player = new ncplayer("player", {
  autostart: true,
  muted: true,
  playlist: [
    {
      file: "https://CDN_DOMAIN/episode_01.m3u8",
      poster: "https://CDN_DOMAIN/episode_01.jpg",
      contentWarnings: ["violence", "language"],
    },
  ],
});

Complete example

This example applies skip intro, opening, and ending, age rating display, and content warnings.

const player = new ncplayer("player", {
  autostart: true,
  muted: true,
  playlist: [
    {
      file: "https://CDN_DOMAIN/episode_01.m3u8",
      poster: "https://CDN_DOMAIN/episode_01.jpg",
      description: {
        title: "Drama season 1 EP. 01",
        profile_name: "OTT channel",
      },
      ageRating: "15",
      contentWarnings: ["violence", "language"],
      intro: {
        start: "00:00:00",
        duration: 5,
      },
      opening: {
        start: "00:00:05",
        duration: 90,
      },
      ending: {
        start: "00:45:00",
        duration: 60,
      },
    },
    {
      file: "https://CDN_DOMAIN/episode_02.m3u8",
      poster: "https://CDN_DOMAIN/episode_02.jpg",
      description: {
        title: "Drama season 1 EP. 02",
        profile_name: "OTT channel",
      },
      ageRating: "15",
      contentWarnings: ["violence"],
      intro: {
        start: "00:00:00",
        duration: 5,
      },
      opening: {
        start: "00:00:05",
        duration: 90,
      },
      ending: {
        start: "00:45:00",
        duration: 60,
      },
    },
  ],
});

// Process skip event
player.on("introSkip", function() {
  console.log("Intro skipped");
});

player.on("openingSkip", function() {
  console.log("Opening skipped");
});

player.on("endingSkip", function() {
  console.log("Ending skipped — moving to the next episode");
  // player.next();
});