PC 커스텀 화면 설정방법 – CDNetworks Player Guide

PC 커스텀 화면을 설정하기 위해서는 화면을 구성할 플레이어 소스를 준비해야 합니다.

OpeningPage 타입으로 플레이어 소스를 PlaynPlay로 사용하실 수 있습니다.

보안 상의 문제로 불러올 웹뷰 URL은 반드시 HTTPS 인증서가 적용되어 있어야 합니다.

웹 서버 소스

<!-- 웹 서버 소스 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web View Launcher</title>
    <script src="https://app.playnplay.com/modules/agent.js"></script>
    <script type="text/javascript">
        const url = "https://sample.com/custom.html";
        function webview() {
            playnplay.launch(LaunchType.OpeningPage, url, options);
            // playnplay.launch(LaunchType.OpeningPage, url, { width: 1600, height: 900 });  // 화면 크기 조정 가능
        }
    </script>
</head>
<body>
    <button onclick="webview()">Play</button>
</body>
</html>

플레이어 소스

플레이어는 아래 소스를 가져와 화면을 구성합니다.

화면 구성을 수정하고 싶으신 경우 css파일을 별도 구성해 주셔야 합니다.

플레이어 기본 화면을 그대로 사용하면서 외적인 부분을 추가하고 싶으신 경우 아래 소스를 다운로드 받아 별도 스타일 구성을 추가해 주세요.nplayer.css nplayer.png

<!-- 플레이어 소스 (https://sample.com/custom.html에 해당) -->
<!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>
        body {
            background-color: #000;
        }
        #player-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000000;
            width: 100vw;
            height: 100vh;
        }
    </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.title = "nPlayer Sample";
            document.oncontextmenu = () => false;

            const mediaItem = {
                url: "https://sample.com/video/test.mp4",
                drm: {
                    appId: "app id",
                    userId: "test"
                }
            };

            const video = document.querySelector('#player-container video');
            video.open(mediaItem);
        });
    </script>
</head>
<body>
    <div id="player-container">
        <video controls playsinline autoplay preload="auto" crossorigin="anonymous"></video>
    </div>
    <script>
        const player = new NPlayer('#player-container video');
    </script>
</body>
</html>

개발자도구 활성화

개발자도구를 활성화하고 싶으신 경우 아래 코드를 참고하여 적용 가능합니다.

개발자도구 활성화 방법 명세는 아래 링크를 확인 부탁드리며, 이 기능은 반드시 개발환경에서만 사용 부탁드립니다.

커스텀 페이지 개발자도구 활성화

동일경로에 아래 코드를 “playnplay-service.js” 파일로 저장해 주세요.

self.importScripts('https://app.playnplay.com/modules/playnplay-service.js');

Webview 페이지 코드

<!-- 플레이어 소스 (https://sample.com/custom.html에 해당) -->
<!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>
        body {
            background-color: #000;
        }
        #player-container {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: #000000;
            width: 100vw;
            height: 100vh;
        }
    </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">
        const appId = 'app id';
        playnplay.startService(appId, './playnplay-service.js');
        window.addEventListener('keydown', (event) => {
            if (event.key === 'F10' && event.ctrlKey) {
                window.openDevTools();
            }
        });
        document.addEventListener('DOMContentLoaded', () => {
            document.title = "nPlayer Sample";
            document.oncontextmenu = () => false;

            const mediaItem = {
                url: "https://sample.com/video/test.mp4",
                drm: {
                    appId: appId,
                    userId: "test"
                }
            };

            const video = document.querySelector('#player-container video');
            video.open(mediaItem);
        });
    </script>
</head>
<body>
    <div id="player-container">
        <video controls playsinline autoplay preload="auto" crossorigin="anonymous"></video>
    </div>
    <script>
        const player = new NPlayer('#player-container video');
    </script>
</body>
</html>

커스텀 플레이리스트 & 북마크 구현

nPlayer Skin을 베이스로 커스텀한 플레이리스트와 북마크를 추가할 수 있는 샘플 코드입니다.

nPlayer Style Sheet가 아닌, 직접 플레이어 커스텀 UI를 개발하고 싶으신 경우 아래 샘플을 참조하여 개발 부탁드립니다.

코드로 구현된 화면:

Sample Code Download