Classic/VPC 환경에서 이용 가능합니다.
스크립트 코드를 수정하여 메타데이터의 표시 여부를 설정하는 방법을 설명합니다.
참고
Standard 요금제에서만 사용할 수 있습니다.
- 옵션을 설정하는 속성에 대한 설명은 플레이어 설정을 참고해 주십시오.
- 현재 플레이어는 메타데이터 클릭 이벤트를 지원하지 않습니다.
메타데이터 표시 여부
descriptionNoVisible 속성으로 플레이어 상단의 메타데이터 표시 여부를 설정합니다.
// 동영상(MP4)
const player = new ncplayer("video1", {
autostart: true, // for test
descriptionNoVisible: true, // 메타데이터 UI 표시 안 함(false(기본값): 표시)
playlist: [
{
file: "https://CDN도메인/example_video_01.mp4",
poster: "https://CDN도메인/example_image_01.png",
description: {
title: "네이버클라우드 소개", // 제목
created_at: "2023.01.01", // 업로드 날짜
profile_name: "네이버클라우드", // 업로더 닉네임 또는 채널명
profile_image: "https://CDN도메인/profile.png", // 프로필 이미지
},
},
],
});
description 옵션
| 속성 | 타입 | 설명 |
|---|---|---|
title |
String | 영상 제목 |
created_at |
String | 업로드 날짜 |
profile_name |
String | 업로더 닉네임 또는 채널명 |
profile_image |
String | 프로필 이미지 또는 채널 이미지 URL |
전체 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="video1" style="max-width: 800px; margin: 0 auto;"></div>
<script>
const player = new ncplayer("video1", {
autostart: true,
muted: true,
descriptionNoVisible: false, // true로 설정 시 메타데이터 숨김
playlist: [
{
file: "https://CDN도메인/example_video_01.mp4",
poster: "https://CDN도메인/example_image_01.png",
description: {
title: "네이버클라우드 소개",
created_at: "2023.01.01",
profile_name: "네이버클라우드",
profile_image: "https://CDN도메인/profile.png",
},
},
],
});
</script>
</body>
</html>