Classic/VPC 환경에서 이용 가능합니다.
VPE 2.0 UMD(CDN) 방식은 별도의 빌드 도구나 패키지 매니저 없이, HTML 페이지에 스크립트 태그 하나만 추가하면 바로 사용할 수 있는 비디오 플레이어 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를 함께 설정해야 합니다.