{"id":910,"date":"2017-07-05T11:09:01","date_gmt":"2017-07-05T02:09:01","guid":{"rendered":"https:\/\/blog.wizard87.com\/?p=910"},"modified":"2026-05-11T01:36:17","modified_gmt":"2026-05-10T16:36:17","slug":"%eb%84%88%ec%9d%98-%ec%9d%b4%eb%a6%84%ec%9d%80-%ea%b5%ad%ec%96%b4-%eb%8d%94%eb%b9%99%ed%8c%90-%ec%98%88%ea%b3%a0-%ed%8a%b8%eb%a0%88%ec%9d%bc%eb%9f%ac","status":"publish","type":"post","link":"https:\/\/blog.wizard87.com\/?p=910","title":{"rendered":"\ub108\uc758 \uc774\ub984\uc740 \uad6d\uc5b4 \ub354\ube59\ud310, \uc608\uace0 \ud2b8\ub808\uc77c\ub7ec"},"content":{"rendered":"\n<p>\uc9c1\uc811 \uc2a4\ud2b8\ub9ac\ubc0d<\/p>\n\n\n\n<div class=\"demo-wrap\">\n    <div id=\"player-mount\"><\/div>\n  <\/div>\n\n  <script src=\"https:\/\/wizard87.com\/aruku-player.min.js\"><\/script>\n  <script>    \n     \/**\n     * ArukuMediaPlayer \uc0dd\uc131\uc790 \uc635\uc158 \uc804\uccb4 \ubaa9\ub85d\n     * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     * | \uc635\uc158                      | \ud0c0\uc785               | \uae30\ubcf8\uac12                  | \uc124\uba85                                                 |\n     * |---------------------------|--------------------|-------------------------|------------------------------------------------------|\n     * | videoUrl                  | string             | \"\"                      | HLS\/DASH\/MP4 \ube44\ub514\uc624 URL. \ube44\uc5b4 \uc788\uc73c\uba74 \uc790\ub3d9 \ub85c\ub4dc \uc548 \ud568 |\n     * | srtUrl                    | string             | \"\"                      | SRT \uc790\ub9c9 URL. \ube44\uc5b4 \uc788\uc73c\uba74 \uc790\ub9c9 \ub85c\ub4dc \uc548 \ud568            |\n     * | width                     | string|number|null | null                    | \ucee8\ud14c\uc774\ub108 width (\uc608: \"100%\", 1080, \"1080px\")          |\n     * | height                    | string|number|null | null                    | \ucee8\ud14c\uc774\ub108 height. \uc9c0\uc815 \uc2dc aspectRatio \ubb34\uc2dc            |\n     * | aspectRatio               | string|null        | null (orientation \uc790\ub3d9) | CSS aspect-ratio (\uc608: \"16\/9\", \"9\/16\")                |\n     * | autoplay                  | boolean            | true                    | \ub85c\ub4dc \uc9c1\ud6c4 \uc7ac\uc0dd \uc2dc\ub3c4 (\ube0c\ub77c\uc6b0\uc800 \uc815\ucc45\uc5d0 \ub530\ub77c \ucc28\ub2e8 \uac00\ub2a5) |\n     * | subtitleSize              | number             | 32                      | \ucd08\uae30 \uc790\ub9c9 \uae00\uc790 \ud06c\uae30(px). 16~72 \uc0ac\uc774                  |\n     * | subtitleColor             | string             | \"white\"                 | \ucd08\uae30 \uc790\ub9c9 \uc0c9\uc0c1 (\uc774\ub984 \/ #hex \/ rgb())                 |\n     * | defaultSubtitleYPercent   | number             | 85                      | \ucd08\uae30 \uc790\ub9c9 \uc138\ub85c \uc704\uce58 (5~95%)                          |\n     * | storageKey                | string             | \"shakaSrtPlayer.v1\"     | localStorage \uc800\uc7a5 \ud0a4 (\ub2e4\uc911 \uc778\uc2a4\ud134\uc2a4 \uc2dc \ubd84\ub9ac \uad8c\uc7a5)    |\n     * | shakaUrl                  | string             | shaka 4.15.10 CDN       | Shaka Player \uc2a4\ud06c\ub9bd\ud2b8 URL \uc624\ubc84\ub77c\uc774\ub4dc                 |\n     * \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n     *\n     * \ucc38\uace0: \uc0ac\uc6a9\uc790\uac00 \uc790\ub9c9 \uc704\uce58\/\ud06c\uae30\/\ubcfc\ub968 \ub4f1\uc744 \ubcc0\uacbd\ud558\uba74 storageKey\uc5d0 \uc800\uc7a5\ub418\uc5b4\n     *       \ub2e4\uc74c \ub85c\ub4dc \uc2dc \uc790\ub3d9 \ubcf5\uc6d0\ub429\ub2c8\ub2e4 (subtitleSize, defaultSubtitleYPercent,\n     *       subtitlesEnabled \ub4f1 \ucd08\uae30 \uc635\uc158\ubcf4\ub2e4 localStorage \uac12\uc774 \uc6b0\uc120).\n     *\/\n    const player = new ArukuMediaPlayer(\n    \tdocument.getElementById(\"player-mount\"), {\n      \/\/ \u2500\u2500 \uc18c\uc2a4 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n      videoUrl: \"https:\/\/blog.wizard87.com\/wp-content\/uploads\/2017\/07\/\ub108\uc758-\uc774\ub984\uc740.-\ub354\ube59\ud310-\ub7f0\uce6d\uc608\uace0\ud3b8.mp4\",\n\n      \/\/ \u2500\u2500 \uc0ac\uc774\uc988 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n      width: null,                  \/\/ \uc608: \"100%\", 1080, \"1080px\"\n      height: null,                 \/\/ \uc608: 480, \"60vh\"\n      aspectRatio: null,            \/\/ \uc608: \"16\/9\", \"9\/16\", \"21\/9\"\n\n      \/\/ \u2500\u2500 \uc7ac\uc0dd \ub3d9\uc791 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n      autoplay: true,\n\n      \/\/ \u2500\u2500 \uc790\ub9c9 \ucd08\uae30\uac12 \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n      subtitleSize: 25,             \/\/ 16 ~ 72\n      subtitleColor: \"white\",       \/\/ \"white\" | \"yellow\" | \"#ffcc00\" | \"rgb(255,200,0)\" \ub4f1\n      defaultSubtitleYPercent: 88,  \/\/ 5 ~ 95\n    });\n\n    \/\/ \uc778\uc2a4\ud134\uc2a4 \uba54\uc11c\ub4dc \uc608\uc2dc (\ud544\uc694 \uc2dc \uc0ac\uc6a9):\n    \/\/ player.ready.then(() => console.log(\"player ready\"));\n    \/\/ player.load(videoUrl, srtUrl);\n    \/\/ player.play(); player.pause(); player.togglePlay();\n    \/\/ player.seekRelative(10);\n    \/\/ player.setVolume(0.5); player.toggleMute();\n    \/\/ player.setSubtitleSize(40); player.setSubtitleColor(\"yellow\");\n    \/\/ player.toggleSubtitles(); player.toggleFullscreen();\n    \/\/ player.destroy();\n  <\/script>\n\n\n\n<p><\/p>\n\n\n\n<p>\uc9c1\uc811 \uc2a4\ud2b8\ub9ac\ubc0d 2<\/p>\n\n\n\n<div class=\"demo-wrap2\">\n    <div id=\"player-mount2\"><\/div>\n  <\/div>\n  \n  <script>\n    const player2 = new ArukuMediaPlayer(\n    \tdocument.getElementById(\"player-mount2\"), {      \n      videoUrl: \"https:\/\/blog.wizard87.com\/wp-content\/uploads\/2017\/07\/\ub108\uc758-\uc774\ub984\uc740.-\ub354\ube59\ud310-\ubbf8\ub77c\ud074-\uc608\uace0\ud3b8.mp4\",\n      autoplay: true,\n    });\n\n  <\/script>\n\n\n\n<p><\/p>\n\n\n\n<p>\uc720\ud22c\ube0c<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\"  id=\"_ytid_37145\"  width=\"480\" height=\"270\"  data-origwidth=\"480\" data-origheight=\"270\" src=\"https:\/\/www.youtube.com\/embed\/RMswp-8xTf8?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=1&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;modestbranding=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;\" class=\"__youtube_prefs__  epyt-is-override  no-lazyload\" data-vol=\"70\"  title=\"YouTube player\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc9c1\uc811 \uc2a4\ud2b8\ub9ac\ubc0d \uc9c1\uc811 \uc2a4\ud2b8\ub9ac\ubc0d 2 \uc720\ud22c\ube0c<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56,50],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wizard87.com\/index.php?rest_route=\/wp\/v2\/posts\/910"}],"collection":[{"href":"https:\/\/blog.wizard87.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wizard87.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wizard87.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wizard87.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=910"}],"version-history":[{"count":21,"href":"https:\/\/blog.wizard87.com\/index.php?rest_route=\/wp\/v2\/posts\/910\/revisions"}],"predecessor-version":[{"id":1750,"href":"https:\/\/blog.wizard87.com\/index.php?rest_route=\/wp\/v2\/posts\/910\/revisions\/1750"}],"wp:attachment":[{"href":"https:\/\/blog.wizard87.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=910"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wizard87.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=910"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wizard87.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=910"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}