Metadata

Available in Classic and VPC

This guide explains how to show or hide metadata by modifying the script code.

Note

Available only with the standard plan.

For descriptions of properties to set options, see player settings.
The current player does not support metadata click events.

Metadata visibility

Use the descriptionNoVisible property to show or hide metadata at the top of the player.

// Video (MP4)
const player = new ncplayer("video1", {
  autostart: true, // for test
  descriptionNoVisible: true, // Hide the metadata UI (false (default): show)
  playlist: [
    {
      file: "https://CDNdomain/example_video_01.mp4",
      poster: "https://CDNdomain/example_image_01.png",
      description: {
        title: "Introduction to NAVER Cloud",                   // Title
        created_at: "2023.01.01",                       // Upload date
        profile_name: "NAVER Cloud",                 // Uploader nickname or channel name
        profile_image: "https://CDNdomain/profile.png", // Profile image
      },
    },
  ],
});

Description option

Properties	Type	Description
`title`	String	Video title
`created_at`	String	Upload date
`profile_name`	String	Uploader nickname or channel name
`profile_image`	String	Profile image or channel image URL

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 - metadata</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", {
      autostart: true,
      muted: true,
      descriptionNoVisible: false, // Set to true to hide metadata
      playlist: [
        {
          file: "https://CDNdomain/example_video_01.mp4",
          poster: "https://CDNdomain/example_image_01.png",
          description: {
            title: "Introduction to NAVER Cloud",
            created_at: "2023.01.01",
            profile_name: "NAVER Cloud",
            profile_image: "https://CDNdomain/profile.png",
          },
        },
      ],
    });
  </script>
</body>
</html>