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: "NAVERクラウドの紹介", //タイトル
created_at: "2023.01.01", // アップロード日
profile_name: "NAVERクラウド", // アップローダのハンドルネームまたはチャンネル名
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: "NAVERクラウドの紹介",
created_at: "2023.01.01",
profile_name: "NAVERクラウド",
profile_image: "https://CDNドメイン/profile.png",
},
},
],
});
</script>
</body>
</html>