{"id":209,"date":"2024-02-21T06:25:16","date_gmt":"2024-02-21T06:25:16","guid":{"rendered":"http:\/\/www.freelifemakers.org\/wordpress\/?p=209"},"modified":"2024-03-10T00:31:18","modified_gmt":"2024-03-10T00:31:18","slug":"1page-website-creation-4","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2024\/02\/21\/1page-website-creation-4\/","title":{"rendered":"1 \ud398\uc774\uc9c0 \uc6f9\uc0ac\uc774\ud2b8 \uc81c\uc791(1Page website creation) \u2013 4"},"content":{"rendered":"\n

YouTubePlayer.php<\/h2>\n\n\n\n

\uc774\ubc88\uc5d0\ub294 YouTubePlayer.php\ud30c\uc77c\uc5d0 \ub300\ud55c \uc124\uba85\uc785\ub2c8\ub2e4.
This time, I will explain the YouTubePlayer.php file.

1)YouTube ID(=videoID)<\/strong>
\uba3c\uc800 \uc544\ub798\uc758 \uc774\ubbf8\uc9c0\ub294save the world\ub97c \uc720\ud22c\ube0c\uc5d0\uc11c \uacf5\uc720\ud558\uba74 \ubcf4\uc774\ub294 \ud654\uba74\uc744 \ucea1\ucdb0\ud55c \uc0ac\uc9c4\uc785\ub2c8\ub2e4.
\uc8fc\uc18c \uc601\uc5ed\uc5d0 \ud68c\uc0c9\uc73c\ub85c \ube14\ub7ed\uc9c0\uc815\ub41c wgA7znwHns0\uac00 \uc720\ud22c\ube0c video id\uc5d0 \ud574\ub2f9 \ud569\ub2c8\ub2e4.(\ubcc0\uc218 videoID\uc758 \uac12)
First, the image below is a capture of the screen that appears when you share save the world on YouTube.
wgA7znwHns0, designated as a gray block in the address area, corresponds to the YouTube video ID. (Value of variable videoID)<\/p>\n\n\n\n

.\/YouTubePlayer.php?videoID=13KaL-yfnjM&eventID=1<\/mark><\/strong><\/pre>\n\n\n
\n
\"\"<\/figure><\/div>\n\n\n
2)YouTubePlayer.php – videoID,eventID\ubcc0\uc218 \uac12 \uc14b\ud305<\/strong>
– index.html\uc5d0\uc11c \ubc84\ud2bc\ud074\ub9ad \ud588\uc744\ub54c get\ubc29\uc2dd\uc73c\ub85c  YouTubePlayer.php\ud30c\uc77c\uc5d0 \ubcc0\uc218\ub97c \ub118\uae38 \ub54c \uac12\ucc98\ub9ac  <\/p>\n\n\n\n
<?php\n\n\/\/Video \uc544\uc774\ub514 \uac12 \uc14b\ud305\nif(isset($_GET['videoID'])){\n    $videoID = $_GET['videoID'];\n}else{\n    \/\/\uc5c6\uc744 \uacbd\uc6b0 \uae30\ubcf8 Video ID\uac12\n    $videoID = \"wgQ7znwHns0\";\n}\n\n\/\/\uc774\ubca4\ud2b8 \uc544\uc774\ub514 \uac12 \uc14b\ud305 1\uc774\uba74 \uc7ac\uc0dd 0\uc774\uba74 \uc815\uc9c0\nif(isset($_GET['eventID'])){\n    $eventID = $_GET['eventID'];\n}else{\n    $eventID = 0;\n}\n\n\/\/echo \"STEST\".$videoID;\n\/\/echo \"autoplay:\".$eventID;\n?><\/code><\/pre>\n\n\n\n
3)YouTubePlayer.php – \ud50c\ub808\uc774\uc5b4 \uc7ac\uc0dd<\/strong>
– \uc544\ub798 \ucf54\ub4dc\ub294 \ud50c\ub808\uc774\uc5b4 \uc7ac\uc0dd\uad00\ub828 \ubd80\ubd84\uc73c\ub85c autoplay : 1\uc774\uba74 \uc790\ub3d9\uc7ac\uc0dd 0\uc774\uba74 \uc790\ub3d9\uc7ac\uc0dd \uc815\uc9c0 \ubd80\ubd84\uc785\ub2c8\ub2e4.
– The code below is related to player play. autoplay: If 1, autoplay. If 0, autoplay stops.<\/p>\n\n\n\n
– videoID : <?php echo $videoID; ?>       –> \uc7ac\uc0dd\ub420 \ube44\ub514\uc624 \uc544\uc774\ub514 Video ID to be played
– autoplay : <?php echo $eventID; ?>       –> \uc790\ub3d9\uc7ac\uc0dd \ubd80\ubd84 Autoplay part
– playlist : <?php echo $videoID; ?>         –> \uc774 \ubd80\ubd84\uc5d0 \ube44\ub514\uc624 \uc544\uc774\ub514\ub97c \uc785\ub825\ud558\uba74 \ubc18\ubcf5 \uc7ac\uc0dd\ub429\ub2c8\ub2e4.
                                                            If you enter the video ID in this area, it will be played repeatedly.
– function onPlayerReady(event) { <?php … ?>} –> \ud50c\ub808\uc774\uc5b4\uac00 \uc900\ube44\ub420\ub54c \uc2e4\ud589\ub420 \ud568\uc218
                                                                        Function to be executed when the player is ready<\/p><\/blockquote><\/figure>\n\n\n\n
var player;\n      function onYouTubeIframeAPIReady() {\n        player = new YT.Player('player', {\n          height: '360',\n          width: '640',\n          videoId: '<?php echo $videoID; ?><\/mark><\/strong>',\n          \/\/videoId: 'M7lc1UVf-VE',\n          playerVars: {\n                    'autoplay': <?php echo $eventID; ?><\/strong><\/mark>, \/\/ Auto-play the video\n                    'controls': 1, \/\/ Hide the video controls (optional)\n                    'loop': 1, \/\/ Loop the video (optional)\n                    'playlist': '<?php echo $videoID; ?><\/strong><\/mark>' \/\/ Needed for looping (optional)\n          },\n          events: {\n            'onReady': onPlayerReady,\n            'onStateChange': onPlayerStateChange\n          }\n        });\n      }\n\n      \/\/ 4. The API will call this function when the video player is ready.\n      function onPlayerReady(event) {\n        <?php \n        \/\/eventID\uac12\uc774 \uc788\ub294 \uacbd\uc6b0\ub9cc \uc790\ub3d9 \uc2e4\ud589\n        if($eventID == 1){\n            echo \"\n            event.target.playVideo();\n            player.playVideo();\n            player.mute();  \/\/\uc790\ub3d9\uc7ac\uc0dd\ud558\ub824\uba74 mute\ud574\uc57c\ud568    \n            \";\n        }        \n        ?><\/strong><\/mark>\n      }<\/code><\/pre>\n\n\n\n
4)YouTubePlayer.php \uc804\uccb4 \ucf54\ub4dc Full code<\/strong><\/p>\n\n\n\n
<?php\n\n\/\/Video \uc544\uc774\ub514 \uac12 \uc14b\ud305\nif(isset($_GET['videoID'])){\n    $videoID = $_GET['videoID'];\n}else{\n    \/\/\uc5c6\uc744 \uacbd\uc6b0 \uae30\ubcf8 Video ID\uac12\n    $videoID = \"wgQ7znwHns0\";\n}\n\n\/\/\uc774\ubca4\ud2b8 \uc544\uc774\ub514 \uac12 \uc14b\ud305 1\uc774\uba74 \uc7ac\uc0dd 0\uc774\uba74 \uc815\uc9c0\nif(isset($_GET['eventID'])){\n    $eventID = $_GET['eventID'];\n}else{\n    $eventID = 0;\n}\n\n\/\/echo \"STEST\".$videoID;\n\/\/echo \"autoplay:\".$eventID;\n?>\n\n    <!-- youtube iframe player API: https:\/\/developers.google.com\/youtube\/iframe_api_reference?hl=ko#Getting_Started-->\n    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->\n    <div id=\"player\"><\/div>\n    <script>\n      \/\/ 2. This code loads the IFrame Player API code asynchronously.\n      var tag = document.createElement('script');\n\n      tag.src = \"https:\/\/www.youtube.com\/iframe_api\";\n      var firstScriptTag = document.getElementsByTagName('script')[0];\n      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\n\n      \/\/ 3. This function creates an <iframe> (and YouTube player)\n      \/\/    after the API code downloads. \n      var player;\n      function onYouTubeIframeAPIReady() {\n        player = new YT.Player('player', {\n          height: '360',\n          width: '640',\n          videoId: '<?php echo $videoID; ?>',\n          \/\/videoId: 'M7lc1UVf-VE',\n          playerVars: {\n                    'autoplay': <?php echo $eventID; ?>, \/\/ Auto-play the video\n                    'controls': 1, \/\/ Hide the video controls (optional)\n                    'loop': 1, \/\/ Loop the video (optional)\n                    'playlist': '<?php echo $videoID; ?>' \/\/ Needed for looping (optional)\n          },\n          events: {\n            'onReady': onPlayerReady,\n            'onStateChange': onPlayerStateChange\n          }\n        });\n      }\n\n      \/\/ 4. The API will call this function when the video player is ready.\n      function onPlayerReady(event) {\n        <?php \n        \/\/eventID\uac12\uc774 \uc788\ub294 \uacbd\uc6b0\ub9cc \uc790\ub3d9 \uc2e4\ud589\n        if($eventID == 1){\n            echo \"\n            event.target.playVideo();\n            player.playVideo();\n            player.mute();  \/\/\uc790\ub3d9\uc7ac\uc0dd\ud558\ub824\uba74 mute\ud574\uc57c\ud568    \n            \";\n        }        \n        ?>\n      }\n\n      \/\/ 5. The API calls this function when the player's state changes.\n      \/\/    The function indicates that when playing a video (state=1),\n      \/\/    the player should play for six seconds and then stop.\n      var done = false;\n      function onPlayerStateChange(event) {\n        if (event.data == YT.PlayerState.PLAYING && !done) {\n          \/* 6\ucd08\ub9cc \uc7ac\uc0dd\ud574\uc57c \ud560 \uacbd\uc6b0 \uc544\ub798 \ucf54\uba58\ud2b8 \ud574\uc81c*\/\n         \/\/ setTimeout(stopVideo, 6000);\n          done = true;\n        }\n      }\n\n\n      \/\/ \ubc84\ud2bc \uc774\ubca4\ud2b8\uc2dc \uc544\ub798 \uc0ac\uc6a9 \uac00\ub2a5\n      function playVideo() {\n      \/\/ Play the video\n        if (player) {\n         player.playVideo();\n        }\n      }\n\n    function stopVideo() {\n      \/\/ Stop the video\n        if (player) {\n         player.stopVideo();\n        }\n    }\n\n    <\/script>\n\n    <!-- eventID\uac00\uac00 0\uc774\uba74 \uc815\uc9c0-1\uc774\uba74 \ud50c\ub808\uc774 -->\n    <!-- \ud14c\uc2a4\ud2b8\uc6a9 \ucf54\ub4dc\n    <input type=\"button\" onclick=\"javascript:playVideo(1)\" value=\"start\">\n    <input type=\"button\" onclick=\"javascript:stopVideo(0)\" value=\"stop\">\n    -->\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
YouTubePlayer.php \uc774\ubc88\uc5d0\ub294 YouTubePlayer.php\ud30c\uc77c\uc5d0 \ub300\ud55c \uc124\uba85\uc785\ub2c8\ub2e4.This time, I will explain the YouTubePlayer.php file. 1)YouTube ID(=videoID)\uba3c\uc800 \uc544\ub798\uc758 \uc774\ubbf8\uc9c0\ub294save the world\ub97c \uc720\ud22c\ube0c\uc5d0\uc11c \uacf5\uc720\ud558\uba74 \ubcf4\uc774\ub294 \ud654\uba74\uc744 \ucea1\ucdb0\ud55c \uc0ac\uc9c4\uc785\ub2c8\ub2e4.\uc8fc\uc18c \uc601\uc5ed\uc5d0 \ud68c\uc0c9\uc73c\ub85c \ube14\ub7ed\uc9c0\uc815\ub41c wgA7znwHns0\uac00 \uc720\ud22c\ube0c video id\uc5d0 \ud574\ub2f9 \ud569\ub2c8\ub2e4.(\ubcc0\uc218 videoID\uc758 \uac12)First, the image below is a capture of the screen that appears when you share save the world on YouTube.wgA7znwHns0, designated […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-209","post","type-post","status-publish","format-standard","hentry","category-website","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/209","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=209"}],"version-history":[{"count":8,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/209\/revisions"}],"predecessor-version":[{"id":307,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/209\/revisions\/307"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}