{"id":601,"date":"2025-10-14T14:16:48","date_gmt":"2025-10-14T05:16:48","guid":{"rendered":"https:\/\/aquaguide.cdnetworks.com\/?page_id=601"},"modified":"2026-01-21T11:35:09","modified_gmt":"2026-01-21T02:35:09","slug":"playnplay-%ec%84%9c%eb%b2%84-%ec%84%a4%ec%a0%95-%ea%b0%80%ec%9d%b4%eb%93%9c","status":"publish","type":"page","link":"https:\/\/aquaguide.cdnetworks.com\/?page_id=601","title":{"rendered":"PlayNPlay \uc11c\ubc84 \uc124\uc815 \uac00\uc774\ub4dc"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"601\" class=\"elementor elementor-601\">\n\t\t\t\t<div class=\"elementor-element elementor-element-27fab418 e-flex e-con-boxed e-con e-parent\" data-id=\"27fab418\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-77b08829 elementor-widget elementor-widget-text-editor\" data-id=\"77b08829\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p><\/p>\n<h2 class=\"wp-block-heading\">1. \uac1c\uc694<\/h2>\n<p><\/p>\n<p>PlayNPlay\ub294 Device\/OS \uc885\ub958\ub97c \uad6c\ubd84\ud558\uc5ec Player\ub97c \ud638\ucd9c\ud560 \uc218 \uc788\ub294 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n<p><\/p>\n<p>\uc774 \ud398\uc774\uc9c0\ub294 \uae30\ubcf8\uc801\uc778 \uc2a4\ud2b8\ub9ac\ubc0d, \ub2e4\uc6b4\ub85c\ub4dc\ub97c \uad6c\ud604\ud558\ub294 \ucf54\ub4dc\ub97c \uc124\uba85\ud558\uba70 \ubaa8\ub4e0 \uae30\ub2a5 \uc124\uba85\uc740 \uc544\ub798 \uacf5\uc2dd \uac00\uc774\ub4dc\ub97c \ucc38\uace0 \ubd80\ud0c1\ub4dc\ub9bd\ub2c8\ub2e4.<\/p>\n<p><\/p>\n<p><a href=\"https:\/\/playnplaydoc.cdnetworks.com\/playnplay-sdk.github.io\/agent\/home.html\" target=\"_blank\" rel=\"noreferrer noopener\">Agent \uc2e4\ud589 \uac00\uc774\ub4dc LINK<\/a><\/p>\n<p><\/p>\n<h2 class=\"wp-block-heading\">2. \uae30\ubcf8 \uc0d8\ud50c \ucf54\ub4dc<\/h2>\n<p><\/p>\n<p>\uc6f9 \ud398\uc774\uc9c0\uc5d0&nbsp;<code>https:\/\/app.playnplay.com\/modules\/agent.js<\/code>&nbsp;\uc2a4\ud06c\ub9bd\ud2b8\ub97c import\ud558\uc5ec \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n<p><\/p>\n<p>\uc544\ub798\ub294 \uc6f9 \uc0d8\ud50c \uc18c\uc2a4\uc785\ub2c8\ub2e4.<\/p>\n<p><\/p>\n<pre><code>&lt;script type=\"text\/javascript\" src=\"https:\/\/<span style=\"font-size: 1em; font-style: inherit; font-weight: inherit;\">pnp-appdn.cdnetworks.com<\/span><span style=\"font-family: inherit; font-size: 1em; text-align: initial;\">\/modules\/agent.js\"&gt;&lt;\/script&gt;<\/span><\/code><code>&lt;script type=\"text\/javascript\"&gt;\nconst mediaItem = { \/\/ \uc778\uc99d \uc815\ubcf4\n    url: \"https:\/\/sample.playnplay.com\/video\/sintel-1280-surround.mp4\",\n    metadata: {\n      title: \"\ud14c\uc2a4\ud2b8\uc601\uc0c1\",\n    },\n    drm: {\n        appId: \"app id\",\n        userId: \"test-user\",\n    }\n};\nplaynplay.launch(LaunchType.Streaming, mediaItem); \/\/ \ud50c\ub808\uc774\uc5b4 \uc2e4\ud589, 3. PlayNPlay \uc2a4\ud2b8\ub9ac\ubc0d \uc0ac\uc6a9\ubc95 \ucc38\uace0\n&lt;\/script&gt;<\/code><\/pre>\n<p><\/p>\n<h2 class=\"wp-block-heading\">3. PlayNPlay \uc2a4\ud2b8\ub9ac\ubc0d \uc0ac\uc6a9\ubc95 \uc0c1\uc138<\/h2>\n<p><\/p>\n<p>playnplay.launch = async (type, mediaItemOrUrl, options);&nbsp;\ud615\ud0dc\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc544\ub798\ub294 \ub9e4\uac1c\ubcc0\uc218 \uc124\uba85\uc785\ub2c8\ub2e4.<\/p>\n<p><\/p>\n<ul class=\"wp-block-list\"><p><\/p>\n<li><strong>Type<\/strong>: \ud50c\ub808\uc774\uc5b4 \uc2e4\ud589 \ud0c0\uc785\uc785\ub2c8\ub2e4.<br><ul class=\"wp-block-list\"><p><\/p>\n<li>&#8220;Streaming&#8221;: PC &amp; Mobile \uc571 \uc7ac\uc0dd \uc694\uccad<\/li>\n<p><\/p>\n<li>&#8220;OpeningPage&#8221;: (PC only) Custom WebView \uc7ac\uc0dd \uc694\uccad<\/li>\n<p><\/p>\n<\/ul>\n<p><\/p>\n<\/li>\n<p><\/p>\n<li><strong>mediaItem or URL<\/strong>: \ubbf8\ub514\uc5b4 \uc601\uc0c1 \uacbd\ub85c \ub4f1 \ud544\uc694 \ub370\uc774\ud130\ub97c \ub2f4\uc740 \uac1d\uccb4 \ub610\ub294 PC\uc571\uc758 \ud654\uba74\uc744 \uad6c\uc131\ud560 \uc6f9 URL\uc785\ub2c8\ub2e4. http:\/\/ \ub610\ub294 https:\/\/ \ud3ec\ud568\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>\n<p><\/p>\n<li><strong>options<\/strong>: \ud50c\ub808\uc774\uc5b4 \ub192\uc774, \ub108\ube44 \ub4f1\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\ub294 \uc635\uc158\uc785\ub2c8\ub2e4.<br><ul class=\"wp-block-list\"><p><\/p>\n<li>height: \ud50c\ub808\uc774\uc5b4 \ub192\uc774, Number type<\/li>\n<p><\/p>\n<li>width: \ud50c\ub808\uc774\uc5b4 \ub108\ube44, Number type<\/li>\n<p><\/p>\n<\/ul>\n<p><\/p>\n<\/li>\n<p><\/p>\n<\/ul>\n<p><\/p>\n<h3 class=\"wp-block-heading\">mediaItem \uc0dd\uc131 \uc608\uc81c<\/h3>\n<p><\/p>\n<pre><code>{\n    url: \"https:\/\/sample.com\/video\/test.mp4\",\n    metadata: {\n      title: \"\uc601\uc0c1\uc81c\ubaa9\",\n    },\n    drm: {\n        appId: \"app id\",\n        userId: \"test-user\",\n    }\n}<\/code><\/pre>\n<p><\/p>\n<h3 class=\"wp-block-heading\">3. Media Download \ubc29\ubc95 \uc0c1\uc138<\/h3>\n<p><\/p>\n<p>playnplay.download = async (mediaItems);&nbsp;\ud615\ud0dc\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc544\ub798\ub294 \ub9e4\uac1c\ubcc0\uc218 \uc124\uba85\uc785\ub2c8\ub2e4.<\/p>\n<p><\/p>\n<ul class=\"wp-block-list\"><p><\/p>\n<li><strong>mediaItems<\/strong>: \ubbf8\ub514\uc5b4 \uc601\uc0c1 \uacbd\ub85c \ub4f1 \ud544\uc694 \ub370\uc774\ud130\ub97c \ub2f4\uc740 \uac1d\uccb4\uc774\uba70, \uc5ec\ub7ec \uac1d\uccb4\ub97c \ub123\uc5b4 \ub2e4\uc911 \ub2e4\uc6b4\ub85c\ub4dc\ub97c \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. http:\/\/ \ub610\ub294 https:\/\/ \ud3ec\ud568\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>\n<p><\/p>\n<\/ul>\n<p><\/p>\n<h3 class=\"wp-block-heading\">Download mediaItem \uc0dd\uc131 \uc608\uc81c<\/h3>\n<p><\/p>\n<pre><code>{\n    url: \"https:\/\/sample.com\/video\/test.mp4\",\n    metadata: {\n        downloadPath: \"\/OO\uac15\uc758\/OO\uad50\uc218\ud2b9\uac15\/1\ud68c\ucc28\"\n    },\n    drm: {\n        appId: \"app id\",\n        userId: \"test-user\",\n        offlineAccessPeriod: 86400\n    }\n}<\/code><\/pre>\n<p><\/p>\n<h2 class=\"wp-block-heading\">5. mediaItem \uc635\uc158 \uc0c1\uc138<\/h2>\n<p><\/p>\n<p><strong>mediaItem \uac1d\uccb4 \uc608\uc2dc (JSON type)<\/strong><\/p>\n<p><\/p>\n<pre><code>{\n    url: \"https:\/\/sample.com\/video\/test.mp4\", \/\/ \uc601\uc0c1 URL\n    seekable: true, \/\/ \ud0d0\uc0c9 \uae30\ub2a5 \ud5c8\uc6a9 \uc5ec\ubd80 (\uae30\ubcf8\uac12: true, Streaming only)\n    returnUrl: \"https:\/\/sample.com\/return\", \/\/ \uc601\uc0c1 \uc885\ub8cc \uc2dc \ub744\uc6b8 \uc6f9 \ud398\uc774\uc9c0 (Streaming only)\n    drm: {\n        appId: \"app id\", \/\/ \uc778\uc99d\ud0a4\n        userId: \"test-user\", \/\/ \uc0ac\uc6a9\uc790 \uc544\uc774\ub514\n        offlineAccessPeriod: 86400 \/\/ \ub124\ud2b8\uc6cc\ud06c \ubbf8\uc5f0\uacb0 \uc2dc \ub2e4\uc6b4\ub85c\ub4dc \uc601\uc0c1 \uc7ac\uc0dd \uac00\ub2a5 \uae30\uac04 (\ucd08 \ub2e8\uc704), undefined: \uc81c\ud55c\uc5c6\uc774 \uc7ac\uc0dd \uac00\ub2a5, 0: \uc624\ud504\ub77c\uc778 \uc7ac\uc0dd \uad8c\ud55c \uc5c6\uc74c, n: n\ucd08\uae4c\uc9c0 \uc7ac\uc0dd \uac00\ub2a5\n    },\n    subtitles: [{\n        url: \"https:\/\/sample.com\/subtitles.vtt\", \/\/ \uc790\ub9c9 URL\n    }],\n    metadata: {\n        title: \"\uc601\uc0c1\uc81c\ubaa9\", \/\/ \ubaa8\ubc14\uc77c \ud50c\ub808\uc774\uc5b4 \ud0c0\uc784\ubc14\uc5d0 \ubcf4\uc774\ub294 \ud30c\uc77c\uba85 \uc124\uc815\n        artworkUrl: \"https:\/\/sample.com\/artwork.jpg\", \/\/ \ub2e4\uc6b4\ub85c\ub4dc \uc601\uc0c1\uc758 \uc378\ub124\uc77c \uc774\ubbf8\uc9c0 URL\n        downloadPath: \"\/OO\uac15\uc758\/OO\uad50\uc218\ud2b9\uac15\/1\ud68c\ucc28\" \/\/ \ub2e4\uc6b4\ub85c\ub4dc \uc601\uc0c1\uc77c \uc2dc \uc800\uc7a5 \uacbd\ub85c\n    }\n}<\/code><\/pre>\n<p><\/p>\n<h2 class=\"wp-block-heading\">6. Local \ud14c\uc2a4\ud2b8 \uc608\uc2dc \uc2a4\ud06c\ub9bd\ud2b8<\/h2>\n<p><\/p>\n<p>\ud14c\uc2a4\ud2b8 \uc2dc \uc8fc\uc758\uc0ac\ud56d<\/p>\n<p><\/p>\n<ul class=\"wp-block-list\"><p><\/p>\n<li>\uc804\uc6a9 \uc601\uc0c1 \ub3c4\uba54\uc778\uc73c\ub85c \uc7ac\uc0dd\ud558\uc154\uc57c \uc815\uc0c1\uc801\uc73c\ub85c \uc7ac\uc0dd\ub418\uba70 \uc774 \ub3c4\uba54\uc778\uc740 CDNetworks\uc5d0\uc11c \uc124\uc815\ud558\uc5ec \uc81c\uacf5\ud574 \ub4dc\ub9bd\ub2c8\ub2e4.<\/li>\n<p><\/p>\n<li>\uc81c\uacf5\ud574\ub4dc\ub9b0 \uac1c\ud1b5 \uac00\uc774\ub4dc\uc5d0 \ub530\ub77c \ub3c4\uba54\uc778\uc744 CDNetworks DNS\ub85c \uc704\uc784 \ucc98\ub9ac \ud6c4 \ud14c\uc2a4\ud2b8\ub97c \uc9c4\ud589\ud574 \uc8fc\uc138\uc694.<\/li>\n<p><\/p>\n<\/ul>\n<p><\/p>\n<h3 class=\"wp-block-heading\">HTML+JS Source<\/h3>\n<p><\/p>\n<pre><code>&lt;html&gt;\n&lt;head&gt;\n  &lt;meta charset=\"UTF-8\"&gt;\n  &lt;script src=\"https:\/\/<\/code>pnp-appdn.cdnetworks.com\/modules\/agent.js\"&gt;&lt;\/script&gt; \/\/\ud50c\ub808\uc774\uc5b4 \ud638\ucd9c \uc2a4\ud06c\ub9bd\ud2b8<\/pre><pre><code>  &lt;script type=\"text\/javascript\"&gt;\n    const mediaItem = { \/\/\uc778\uc99d \uc815\ubcf4 \uc785\ub825\n      url: \"https:\/\/sample.com\/video\/test.mp4\", \n      metadata: {\n        downloadPath: \"\/\uac15\uc758\/\uc601\uc0c1\",\n      },\n      drm: {\n        appId: \"app id\",\n        userId: \"test\",\n        offlineAccessPeriod: 86400\n      }\n    };\n    function play() {\n      playnplay.launch(LaunchType.Streaming, mediaItem);\n    }\n    function download() {\n      playnplay.download(mediaItem);\n    }\n  &lt;\/script&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n  &lt;button onclick=\"play()\"&gt;Play&lt;\/button&gt;\n  &lt;button onclick=\"download()\"&gt;Download&lt;\/button&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p><\/p>\n<p><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-32bf16c e-flex e-con-boxed e-con e-parent\" data-id=\"32bf16c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d93d97 elementor-button-info elementor-widget elementor-widget-button\" data-id=\"3d93d97\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t\t\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/aquaguide.cdnetworks.com\/?page_id=536\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">\ub4a4\ub85c \uac00\uae30<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>1. \uac1c\uc694 PlayNPlay\ub294 Device\/OS \uc885\ub958\ub97c \uad6c\ubd84\ud558\uc5ec Player\ub97c \ud638\ucd9c\ud560 \uc218 \uc788\ub294 \uc2a4\ud06c\ub9bd\ud2b8\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 \ud398\uc774\uc9c0\ub294 \uae30\ubcf8\uc801\uc778 \uc2a4\ud2b8\ub9ac\ubc0d, \ub2e4\uc6b4\ub85c\ub4dc\ub97c \uad6c\ud604\ud558\ub294 \ucf54\ub4dc\ub97c \uc124\uba85\ud558\uba70 [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-601","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aquaguide.cdnetworks.com\/index.php?rest_route=\/wp\/v2\/pages\/601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aquaguide.cdnetworks.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aquaguide.cdnetworks.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aquaguide.cdnetworks.com\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/aquaguide.cdnetworks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=601"}],"version-history":[{"count":17,"href":"https:\/\/aquaguide.cdnetworks.com\/index.php?rest_route=\/wp\/v2\/pages\/601\/revisions"}],"predecessor-version":[{"id":813,"href":"https:\/\/aquaguide.cdnetworks.com\/index.php?rest_route=\/wp\/v2\/pages\/601\/revisions\/813"}],"wp:attachment":[{"href":"https:\/\/aquaguide.cdnetworks.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}