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>