메타데이터

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>
    <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>