PlayNPlay 서버 설정 가이드

1. 개요

PlayNPlay는 Device/OS 종류를 구분하여 Player를 호출할 수 있는 스크립트를 제공합니다.

이 페이지는 기본적인 스트리밍, 다운로드를 구현하는 코드를 설명하며 모든 기능 설명은 아래 공식 가이드를 참고 부탁드립니다.

Agent 실행 가이드 LINK

2. 기본 샘플 코드

웹 페이지에 https://app.playnplay.com/modules/agent.js 스크립트를 import하여 사용합니다.

아래는 웹 샘플 소스입니다.

<script type="text/javascript" src="https://app.playnplay.com/modules/agent.js"></script>
<script type="text/javascript">
const mediaItem = { // 인증 정보
    url: "https://sample.playnplay.com/video/sintel-1280-surround.mp4",
    metadata: {
      title: "테스트영상",
    },
    drm: {
        appId: "app id",
        userId: "test-user",
    }
};
playnplay.launch(LaunchType.Streaming, mediaItem); // 플레이어 실행, 3. PlayNPlay 스트리밍 사용법 참고
</script>

3. PlayNPlay 스트리밍 사용법 상세

playnplay.launch = async (type, mediaItemOrUrl, options); 형태로 사용합니다. 아래는 매개변수 설명입니다.

  • Type: 플레이어 실행 타입입니다.
    • “Streaming”: PC & Mobile 앱 재생 요청
    • “OpeningPage”: (PC only) Custom WebView 재생 요청
  • mediaItem or URL: 미디어 영상 경로 등 필요 데이터를 담은 객체 또는 PC앱의 화면을 구성할 웹 URL입니다. http:// 또는 https:// 포함해야 합니다.
  • options: 플레이어 높이, 너비 등을 지정할 수 있는 옵션입니다.
    • height: 플레이어 높이, Number type
    • width: 플레이어 너비, Number type

mediaItem 생성 예제

{
    url: "https://sample.com/video/test.mp4",
    metadata: {
      title: "영상제목",
    },
    drm: {
        appId: "app id",
        userId: "test-user",
    }
}

3. Media Download 방법 상세

playnplay.download = async (mediaItems); 형태로 사용합니다. 아래는 매개변수 설명입니다.

  • mediaItems: 미디어 영상 경로 등 필요 데이터를 담은 객체이며, 여러 객체를 넣어 다중 다운로드를 수행할 수 있습니다. http:// 또는 https:// 포함해야 합니다.

Download mediaItem 생성 예제

{
    url: "https://sample.com/video/test.mp4",
    metadata: {
        downloadPath: "/OO강의/OO교수특강/1회차"
    },
    drm: {
        appId: "app id",
        userId: "test-user",
        offlineAccessPeriod: 86400
    }
}

5. mediaItem 옵션 상세

mediaItem 객체 예시 (JSON type)

{
    url: "https://sample.com/video/test.mp4", // 영상 URL
    seekable: true, // 탐색 기능 허용 여부 (기본값: true, Streaming only)
    returnUrl: "https://sample.com/return", // 영상 종료 시 띄울 웹 페이지 (Streaming only)
    drm: {
        appId: "app id", // 인증키
        userId: "test-user", // 사용자 아이디
        offlineAccessPeriod: 86400 // 네트워크 미연결 시 다운로드 영상 재생 가능 기간 (초 단위), undefined: 제한없이 재생 가능, 0: 오프라인 재생 권한 없음, n: n초까지 재생 가능
    },
    subtitles: [{
        url: "https://sample.com/subtitles.vtt", // 자막 URL
    }],
    metadata: {
        title: "영상제목", // 모바일 플레이어 타임바에 보이는 파일명 설정
        artworkUrl: "https://sample.com/artwork.jpg", // 다운로드 영상의 썸네일 이미지 URL
        downloadPath: "/OO강의/OO교수특강/1회차" // 다운로드 영상일 시 저장 경로
    }
}

6. Local 테스트 예시 스크립트

테스트 시 주의사항

  • 전용 영상 도메인으로 재생하셔야 정상적으로 재생되며 이 도메인은 CDNetworks에서 설정하여 제공해 드립니다.
  • 제공해드린 개통 가이드에 따라 도메인을 CDNetworks DNS로 위임 처리 후 테스트를 진행해 주세요.

HTML+JS Source

<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: 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>

뒤로 가기
위로 스크롤