1 페이지 웹사이트 제작(1Page website creation) – 4

YouTubePlayer.php

이번에는 YouTubePlayer.php파일에 대한 설명입니다.
This time, I will explain the YouTubePlayer.php file.

1)YouTube ID(=videoID)
먼저 아래의 이미지는save the world를 유투브에서 공유하면 보이는 화면을 캡춰한 사진입니다.
주소 영역에 회색으로 블럭지정된 wgA7znwHns0가 유투브 video id에 해당 합니다.(변수 videoID의 값)
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)

./YouTubePlayer.php?videoID=13KaL-yfnjM&eventID=1

2)YouTubePlayer.php – videoID,eventID변수 값 셋팅
– index.html에서 버튼클릭 했을때 get방식으로 YouTubePlayer.php파일에 변수를 넘길 때 값처리

<?php

//Video 아이디 값 셋팅
if(isset($_GET['videoID'])){
    $videoID = $_GET['videoID'];
}else{
    //없을 경우 기본 Video ID값
    $videoID = "wgQ7znwHns0";
}

//이벤트 아이디 값 셋팅 1이면 재생 0이면 정지
if(isset($_GET['eventID'])){
    $eventID = $_GET['eventID'];
}else{
    $eventID = 0;
}

//echo "STEST".$videoID;
//echo "autoplay:".$eventID;
?>

3)YouTubePlayer.php – 플레이어 재생
– 아래 코드는 플레이어 재생관련 부분으로 autoplay : 1이면 자동재생 0이면 자동재생 정지 부분입니다.
– The code below is related to player play. autoplay: If 1, autoplay. If 0, autoplay stops.

– videoID : <?php echo $videoID; ?> –> 재생될 비디오 아이디 Video ID to be played
– autoplay : <?php echo $eventID; ?> –> 자동재생 부분 Autoplay part
– playlist : <?php echo $videoID; ?> –> 이 부분에 비디오 아이디를 입력하면 반복 재생됩니다.
If you enter the video ID in this area, it will be played repeatedly.
– function onPlayerReady(event) { <?php … ?>} –> 플레이어가 준비될때 실행될 함수
Function to be executed when the player is ready

var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '360',
          width: '640',
          videoId: '<?php echo $videoID; ?>',
          //videoId: 'M7lc1UVf-VE',
          playerVars: {
                    'autoplay': <?php echo $eventID; ?>, // Auto-play the video
                    'controls': 1, // Hide the video controls (optional)
                    'loop': 1, // Loop the video (optional)
                    'playlist': '<?php echo $videoID; ?>' // Needed for looping (optional)
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        <?php 
        //eventID값이 있는 경우만 자동 실행
        if($eventID == 1){
            echo "
            event.target.playVideo();
            player.playVideo();
            player.mute();  //자동재생하려면 mute해야함    
            ";
        }        
        ?>
      }

4)YouTubePlayer.php 전체 코드 Full code

<?php

//Video 아이디 값 셋팅
if(isset($_GET['videoID'])){
    $videoID = $_GET['videoID'];
}else{
    //없을 경우 기본 Video ID값
    $videoID = "wgQ7znwHns0";
}

//이벤트 아이디 값 셋팅 1이면 재생 0이면 정지
if(isset($_GET['eventID'])){
    $eventID = $_GET['eventID'];
}else{
    $eventID = 0;
}

//echo "STEST".$videoID;
//echo "autoplay:".$eventID;
?>

    <!-- youtube iframe player API: https://developers.google.com/youtube/iframe_api_reference?hl=ko#Getting_Started-->
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="player"></div>
    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads. 
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '360',
          width: '640',
          videoId: '<?php echo $videoID; ?>',
          //videoId: 'M7lc1UVf-VE',
          playerVars: {
                    'autoplay': <?php echo $eventID; ?>, // Auto-play the video
                    'controls': 1, // Hide the video controls (optional)
                    'loop': 1, // Loop the video (optional)
                    'playlist': '<?php echo $videoID; ?>' // Needed for looping (optional)
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        <?php 
        //eventID값이 있는 경우만 자동 실행
        if($eventID == 1){
            echo "
            event.target.playVideo();
            player.playVideo();
            player.mute();  //자동재생하려면 mute해야함    
            ";
        }        
        ?>
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          /* 6초만 재생해야 할 경우 아래 코멘트 해제*/
         // setTimeout(stopVideo, 6000);
          done = true;
        }
      }


      // 버튼 이벤트시 아래 사용 가능
      function playVideo() {
      // Play the video
        if (player) {
         player.playVideo();
        }
      }

    function stopVideo() {
      // Stop the video
        if (player) {
         player.stopVideo();
        }
    }

    </script>

    <!-- eventID가가 0이면 정지-1이면 플레이 -->
    <!-- 테스트용 코드
    <input type="button" onclick="javascript:playVideo(1)" value="start">
    <input type="button" onclick="javascript:stopVideo(0)" value="stop">
    -->