Available in Classic and VPC
VPE 2.0 UMD (CDN) is a video player SDK that you can use immediately by adding a single script tag to an HTML page, without a build tool or package manager.
Key features
VPE 2.0 UMD provides the following key features:
- HLS and DASH streaming: You can play HLS and DASH streams without installing additional libraries.
- One Click Multi DRM: The SDK safeguards your content securely by supporting Widevine, FairPlay, PlayReady and DRM.
- Subtitle support: The SDK supports multilingual subtitles by using WebVTT subtitle files.
- Pre-roll ads: The SDK supports VAST and VMAP ads through the IMA SDK and NAM SDK.
- Custom UI: You can use the JSON-based layout system to configure the control bar, arrange buttons, and insert custom HTML elements.
- Responsive layouts: You can create independent control bar layouts for desktop, mobile, and Full screen environments.
- Watermark: You can display a text watermark to help prevent unauthorized screen recording.
Supported environments
VPE 2.0 UMD supports the following environments:
| Environment | Supported |
|---|---|
| Chrome | Latest version |
| Firefox | Latest version |
| Safari | 15 or later |
| Edge | Latest version |
| iOS Safari | 15 or later |
| Android Chrome | Latest version |
Quick start
Paste the code below into an HTML file to check the player immediately.
Note
The VPE Player must load hls.js and the dash.js library separately for streaming playback. If needed, make sure to load them before the VPE script.
<!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>
<!-- Load hls.js/dash.js before the VPE script -->
<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>
Note
When using autoplay (autostart: true), you must configure muted: true together due to browser policies.