Classic/VPC環境で利用できます。
VPE 2.0 UMD(CDN)方式は、別途のビルドツールやパッケージマネージャを必要とせず、HTMLページにスクリプトタグを1つ追加するだけで、すぐに利用できるビデオプレイヤー SDKです。
主な機能
VPE 2.0 UMDが提供する主な機能は次の通りです。
- HLSおよび DASHストリーミング: 別途のライブラリをインストールすることなく、HLSおよび DASHストリーミングをデフォルトでサポートします。
- One Click Multi DRM: Widevine、FairPlay、PlayReady DRMをサポートし、コンテンツを安全に保護します。
- 字幕サポート: WebVTT形式の字幕ファイルを連携し、多言語字幕を提供します。
- Pre-roll広告: IMA SDKおよび NAM SDKによる VAST/VMAP広告をサポートします。
- カスタム UI: JSONベースのレイアウトシステムにより、コントロールバーやボタンの配置、カスタム HTML要素の挿入が可能です。
- レスポンシブレイアウト: PC、モバイル、全画面表示といった環境ごとに、独立したコントロールバーのレイアウトを構成できます。
- ウォーターマーク: テキストのウォーターマークを表示することで、無断録画を防ぐことができます。
サポート環境
VPE 2.0 UMDがサポートする環境は次の通りです。
| 環境 | サポート |
|---|---|
| Chrome | 最新バージョン |
| Firefox | 最新バージョン |
| Safari | 15以上 |
| Edge | 最新バージョン |
| iOS Safari | 15以上 |
| Android Chrome | 最新バージョン |
クイックスタート
以下のコードを HTMLファイルに貼り付けると、すぐにプレイヤーを確認できます。
参考
VPEプレイヤーは、ストリーミング再生のために hls.jsと dash.jsライブラリを別途ロードする必要があります。必要に応じて、必ず VPEスクリプトよりも先にロードしてください。
<!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="player" style="max-width: 800px; margin: 0 auto;"></div>
<script>
const player = new ncplayer("player", {
playlist: [
{
file: "<https://example.com/video/master.m3u8>",
poster: "<https://example.com/poster.jpg>",
},
],
autostart: true,
muted: true,
aspectRatio: "16/9",
});
</script>
</body>
</html>
参考
自動再生(autostart: true)を使用する場合はブラウザのポリシーにより、muted: trueを併せて設定する必要があります。