メタデータ

Classic/VPC環境で利用できます。

メタデータではスクリプトコードを修正してメタデータの表示有無を設定する方法と、表示されたメタデータに Clickイベントを設定する方法について説明します。

メタデータの表示有無

descriptionNoVisible プロパティでプレイヤーの上にメタデータの表示有無を設定できます。
メタデータを表示しないように設定するユースケースは、次の通りです。

// 動画(MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    { 
        file: 'https://CDNドメイン/example_video_01.mp4',
        poster: 'https://CDNドメイン/example_image_01.png',
        description:{
            "title": "NAVERクラウドの紹介", //タイトル
            "created_at": "2023.01.01", //アップロード日
            "profile_name": "NAVERクラウド", //アップローダのハンドルネームまたはチャンネル名
            "profile_image": "https://CDNドメイン/example_image_profile.png", //プロファイル画像またはチャンネル画像
      },
    },
      descriptionNoVisible: true, // メタデータ UIを表示しない(false(デフォルト): メタデータ UIを表示する)
  ],
});

メタデータ Clickイベント

playlist.description プロパティでプレイヤーの上にメタデータを表示し、クリックするとイベントが発生するように設定できます。
ユースケースは次の通りです。

// 動画(MP4)
new ncplayer('video1', {
  autostart: true, // for test
  playlist: [
    { 
        file: 'https://CDNドメイン/example_video_01.mp4',
        poster: 'https://CDNドメイン/example_image_01.png',
        description:{
            "title": "NAVERクラウドの紹介", //タイトル
            "created_at": "2023.01.01", //アップロード日
            "profile_name": "NAVERクラウド", //アップローダのハンドルネームまたはチャンネル名
            "profile_image": "https://CDNドメイン/example_image_profile.png", //プロファイル画像またはチャンネル画像
      },
    },
  ],
});