Metadata

Available in Classic and VPC

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

Metadata visibility

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

import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

// Video (MP4)
export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        autostart: true,
        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/example_image_profile.png", // Profile image or channel image
            },
          },
        ],
      }}
    />
  );
}