자막 추가 예시
mediaItem에 subtitles 속성을 추가하여 자막을 추가합니다.
<html>
<head>
<meta charset="UTF-8">
<script src="https://app.playnplay.com/modules/agent.js"></script> //플레이어 호출 스크립트
<script type="text/javascript">
const mediaItem = { //인증 정보 입력
url: "https://sample.com/video/test.mp4",
subtitles: [{
url: "https://sample.com/video/subtitles.vtt", //자막 url
language: "en", //자막 언어 유형(option)
label: "English", //자막 label(option)
mode: "autoSelect", //자막 선택 모드(기본값: autoSelect)
}],
metadata: {
downloadPath: "/강의/영상",
},
drm: {
appId: "app id",
userId: "test",
offlineAccessPeriod: // Download한 파일 offline 재생 허용 기간(초), undefined: 제한 없음, 0: offline 재생 불가
}
};
function play() {
playnplay.launch(LaunchType.Streaming, mediaItem);
}
function download() {
playnplay.download(mediaItem);
}
</script>
</head>
<body>
<button onclick="play()">Play</button>
<button onclick="download()">Download</button>
</body>
</html>Return URL 예시
재생 종료 후 기기의 기본 브라우저로 URL 호출하는 예시입니다.
<html>
<head>
<meta charset="UTF-8">
<script src="https://app.playnplay.com/modules/agent.js"></script> //플레이어 호출 스크립트
<script type="text/javascript">
const mediaItem = { //인증 정보 입력
url: "https://sample.com/video/test.mp4",
returnUrl: "https://return할 URL", //재생 종료 후 기기의 기본 브라우저로 URL 호출
drm: {
appId: "app id",
userId: "test",
}
};
function play() {
playnplay.launch(LaunchType.Streaming, mediaItem);
}
</script>
</head>
<body>
<button onclick="play()">Play</button>
</body>
</html>배속, 탐색 사용 금지 예시
탐색(seek) 기능, 배속 기능 사용 불가 예시입니다.
<html>
<head>
<meta charset="UTF-8">
<script src="https://app.playnplay.com/modules/agent.js"></script> //플레이어 호출 스크립트
<script type="text/javascript">
const mediaItem = { //인증 정보 입력
url: "https://sample.com/video/test.mp4",
seekable: false, //탐색(seek) 기능 사용 불가
disablePlaybackRate: true, //배속 기능 사용 불가
drm: {
appId: "app id",
userId: "test",
}
};
function play() {
playnplay.launch(LaunchType.Streaming, mediaItem);
}
</script>
</head>
<body>
<button onclick="play()">Play</button>
</body>
</html>임의 데이터 추가 예시
userData 객체를 이용해 callback에 임의 데이터를 추가하는 예시입니다.
<html>
<head>
<meta charset="UTF-8">
<script src="https://app.playnplay.com/modules/agent.js"></script> //플레이어 호출 스크립트
<script type="text/javascript">
const mediaItem = { //인증 정보 입력
url: "https://sample.com/video/test.mp4",
metadata: {
downloadPath: "/강의/영상",
},
drm: {
appId: "app id",
userId: "test",
offlineAccessPeriod: // Download한 파일 offline 재생 허용 기간(초), undefined: 제한 없음, 0: offline 재생 불가
userData: {
playUrl: "https://sample.com/video/test.mp4",
userId: "test"
}
}
};
function play() {
playnplay.launch(LaunchType.Streaming, mediaItem);
}
function download() {
playnplay.download(mediaItem);
}
</script>
</head>
<body>
<button onclick="play()">Play</button>
<button onclick="download()">Download</button>
</body>
</html>재생 시간 조정
플레이어 실행 시 필요한 JSON(mediaItem) 내 “startTime” 키를 이용해 영상 시작 시간을 임의로 지정할 수 있습니다.
<html>
<head>
<meta charset="UTF-8">
<script src="https://app.playnplay.com/modules/agent.js"></script> //플레이어 호출 스크립트
<script type="text/javascript">
const mediaItem = { //인증 정보 입력
url: "https://sample.com/video/test.mp4",
startTime: 50, // 50초부터 재생
drm: {
appId: "app id",
userId: "test",
}
};
function play() {
playnplay.launch(LaunchType.Streaming, mediaItem);
}
</script>
</head>
<body>
<button onclick="play()">Play</button>
</body>
</html>웹 브라우저 부모창으로 새 링크 이동
바로가기 링크 버튼 등 플레이 중 브라우저 창을 띄워야 하는 경우, 아래 방법으로 웹 브라우저에서 링크를 띄우실 수 있습니다.
이 기능은 OpeningPage 타입(playnplay.launch = (OpeningPage, ..)) 에서만 지원하며, 플레이어 소스 내 https://app.playnplay.com/modules/agent.js 를 import해 주셔야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Media Player</title>
<link type="text/css" href="https://app.playnplay.com/modules/nplayer/nplayer.css" rel="stylesheet" />
<!-- 또는 <link type="text/css" href="./nplayer.css" rel="stylesheet" /> -->
<style>
버튼이 들어갈 수 있도록 CSS를 조정해 주셔야 합니다.
</style>
<script type="text/javascript" src="https://app.playnplay.com/modules/nplayer/nplayer.js"></script>
<script type="text/javascript" src="https://app.playnplay.com/modules/agent.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
document.oncontextmenu = () => false;
const player = new NPlayer('player-container');
const mediaItem = {
url: "https://sample.com/video/test.mp4",
drm: {
appId: "app id",
userId: "test"
}
};
player.open(mediaItem);
});
</script>
</head>
<body>
<div id="player-container"></div>
<button onclick="window.open('https://www.cdnetworks.co.kr')">바로가기</button>
</body>
</html>재생 구간 제어
영상의 특정 구간만 재생할 수 있도록 하거나, 영상의 시작시간을 변경하고 싶으신 경우 Clipping 기능을 사용하실 수 있습니다.
공식 가이드 링크를 참조 부탁드리며 주의사항을 지켜주시기 바랍니다.
Clipping 공식 가이드 링크
<html>
<head>
<meta charset="UTF-8">
<script src="https://app.playnplay.com/modules/agent.js"></script> //플레이어 호출 스크립트
<script type="text/javascript">
const mediaItem = { //인증 정보 입력
url: "https://sample.com/video/test.mp4",
Clipping: {
"startTime": 50, // 50초부터 재생
"endTime": 100, //100초 까지 재생가능, 없으면 영상 끝까지 재생.
},
drm: {
appId: "app id",
userId: "test",
}
};
function play() {
playnplay.launch(LaunchType.Streaming, mediaItem);
}
</script>
</head>
<body>
<button onclick="play()">Play</button>
</body>
</html>디바이스 정보 추가 확인
getDeviceInfo 함수를 이용해 디바이스 모델명 또는 OS 정보를 관리하실 수 있습니다.
함수 호출 시 출력 되는 데이터는 아래 공식 가이드를 확인 부탁드립니다.
디바이스 정보 공식 가이드
아래 샘플 코드를 참조 부탁드리며, 이를 활용해 고객사에서 계정 디바이스 관리, 자동화 API를 구축 등 여러 방면으로 이용하실 수 있습니다.
<html>
<head>
<script src="https://app.playnplay.com/modules/agent.js"></script>
<script>
async function makeDeviceInfo() { //getDeviceInfo 함수 호출용
const deviceInfo = await getDeviceInfo();
const deviceInfoString = JSON.stringify(deviceInfo);
console.log(deviceInfoString);
return deviceInfoString;
}
const deviceVersion = makeDeviceInfo();
async function initialize() {
const deviceVersion = await makeDeviceInfo();
const test = {
url: 'https://sample.com/video/test.mp4',
drm: {
appId: 'app id',
userId: 'user id',
userData: {
information: JSON.parse(deviceVersion),
}
}
};
console.log(test);
playnplay.launch(LaunchType.Streaming, mediaItem);
}
window.onload = initialize;
</script>
</head>
<body>
</body>
</html>임의 북마크 추가
PlayNPlay는 User ID를 기반으로 북마크를 서버에 저장합니다. 만일 직접 관리하고 싶으신 경우 아래 샘플을 참조 부탁드립니다.
이 필드를 설정하면 PlaynPlay의 북마크 연동 기능이 비활성화되며 북마크 데이터를 저장하려면 Callback URL을 구현해야 합니다.
이 기능은 플레이어 재생에 필요한 객체를 만들 때 입력할 수 있으며, 데이터 타입은 공식 가이드 링크를 참조 부탁드립니다.
Bookmark 공식 가이드 링크
<html>
<head>
<meta charset="UTF-8">
<script src="https://app.playnplay.com/modules/agent.js"></script> //플레이어 호출 스크립트
<script type="text/javascript">
const mediaItem = { //인증 정보 입력
url: "https://sample.com/video/test.mp4",
bookmarks: [
{
"pos": 360, // 초
"title": "강의 시작 부분" // 이 필드 값이 없는 경우 'Untitled' 을 기본값으로 가집니다.
},
{
"pos": 720, // 초
"title": "강의 중간 부분"
},
],
drm: {
appId: "app id",
userId: "test",
}
};
function play() {
playnplay.launch(LaunchType.Streaming, mediaItem);
}
</script>
</head>
<body>
<button onclick="play()">Play</button>
</body>
</html>여러 파일 다운로드
여러 파일을 한번에 다운로드 할 수 있으며, 를 통해 다운로드되는 경로를 조정할 수 있습니다.
이 기능은 playnplay.download = async (mediaItems)형식으로 사용 가능합니다. 공식 가이드 링크를 참조 부탁드립니다.
다운로드 함수 사용법
<!DOCTYPE html>
<html>
<head>
<script src="https://app.playnplay.com/modules/agent.js"></script>
</head>
<body>
<script>
var e = {
url: "https://sample.com/video/test.mp4",
metadata: {
title: "테스트영상",
downloadPath: "/OO강의/OO교수특강/1회차",
},
drm: {
appId: "app id",
userId: "test-user",
}
};
var e2 = {
url: "https://sample.com/video/test.mp4",
metadata: {
title: "테스트영상2",
downloadPath: "/OO강의/OO교수특강/2회차",
},
drm: {
appId: "app id",
userId: "test-user",
}
};
function download() {
playnplay.download([e, e2]);
};
</script>
<h3>Download Test</h3>
<input type="button" onclick="download();" value="Download Start" />
</body>
</html>북마크 제어
북마크를 직접 관리하실 수 있습니다.
북마크를 직접 관리하시는 경우 PlaynNPlay 기본 북마크가 비활성화되며 직접 값을 관리해 주셔야 합니다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="https://app.playnplay.com/modules/agent.js"></script>
</head>
<body>
<script>
var e = {
url: "https://sample.com/video/test.mp4",
metadata: {
title: "테스트영상",
},
useBookmarkCallback: true,
drm: {
appId: "app id",
userId: "test-user",
}
};
function streaming() {
playnplay.launch(LaunchType.Streaming, e);
};
</script>
<h3>Streaming</h3>
<input type="button" onclick="streaming();" value="Streaming Start" />
</body>
</html>
자동 업데이트 비활성화
자동 업데이트를 비활성화하고 버전 체크 시 특정 버전 이상으로 업데이트되지 않도록 하고 싶으신 경우를 위해 버전 체크 로직을 추가하였습니다.
플레이어를 실행하실 페이지에 변수 import 또는 변수를 선언하여 기능하며, 무조건 웹페이지 코드의 최상단에 있어야 합니다.
공식 가이드 링크를 참조 부탁드립니다.
업데이트 대상 버전 설정
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="https://설정 값을 저장한 파일 경로/playnplay_config.js"> // 최상단에 추가 필요
// playnplay_config.js 의 값:
// var PLAYNPLAY_CONFIG = {
// "minVersion": "latest" | "1.x.x" // 항상 최신 버전 or 특정 버전
// };
<script src="https://app.playnplay.com/modules/agent.js"></script> //플레이어 호출 스크립트
<script type="text/javascript">
const mediaItem = { //인증 정보 입력
url: "https://sample.com/video/test.mp4",
metadata: {
downloadPath: "/강의/영상",
},
drm: {
appId: "app id",
userId: "test",
offlineAccessPeriod: 86400
}
};
function play() {
playnplay.launch(LaunchType.Streaming, mediaItem);
}
function download() {
playnplay.download(mediaItem);
}
</script>
</head>
<body>
<button onclick="play()">Play</button>
<button onclick="download()">Download</button>
</body>
</html>