[Momentum_problemShooting] Youtube 영상 2개 iframe 각각 버튼으로 넣기

 

getIframe()은 YouTube 플레이어 객체의 메서드 중 하나로, 현재 재생 중인 YouTube 비디오를 포함하는 iframe 요소를 반환합니다. 이 메서드는 YouTube IFrame Player API에서 제공되며, 플레이어 객체에서 직접적으로 iframe 요소에 접근할 때 사용됩니다.
이 메서드를 사용하면 JavaScript로 YouTube 플레이어를 제어할 때 iframe 요소에 직접적으로 접근할 수 있습니다. 따라서 해당 iframe 요소에 CSS 클래스를 추가하거나 제거하여 플레이어를 숨기거나 보일 수 있습니다.
예를 들어, player.getIframe().classList.add("hidden")를 사용하면 YouTube 플레이어를 숨길 수 있습니다. 이는 YouTube 플레이어를 포함하는 iframe 요소에 "hidden"이라는 CSS 클래스가 추가되어 화면에서 숨겨지게 됩니다.

 

GPT랑 몇 번을 씨름 하다가..

될 거 같은데 .. 왜 classList가 없을까... id를 준 상태인데를 무한 반복하고

div로 container를 만들어도 왜 안될까. 

왜 id에 클래스를 바로 넣어도 안 될까 하다가...

찾았다. 

 

 

getIframe()

 

내가 공식문서에서.. 못 본건지.. 뭔지....ㅜㅜㅜ

 

진짜.. 너무 고생했지만,

 

1. 재생목록 여러 개를 넣을 방법을 못 찾음

 

2. 각각을 그냥 버튼에 따로 넣어서 보이게 하자로 방향을 틀었음. 

 

--> 그런데 classList 적용이 안됨.

처음에는 iframe에 method를 적용해야 하는 가 시도 했으나, 

classlist가 없는 고유 tag임. 

 

 -->playlist도 마찬가지라서. 

 

4. html에서 id="player"어 뒤에 class="hidden"을 넣고 지우려고 시도

--> 안 됨. 

 

3. 검색하다가 안 보여서 gpt에게 물었더니, div로 container를 적용하라고 해서 만들었는데

여전히, iframe 태그를 감싸지 못함. 

 

--> 계속 오류 넣고 씨름 하다가 어느 순간 위에 인용한 getIframe()을 적용함. 

이게 뭔지 물었고, 위와 같은 답을 얻은 후. 코드를 전면 수정함. 

 

 

4. getIframe()을 적용해서, 플레이어를 각각 구별해서 코드를 전부 수정함. 

toggle()로 버튼 만들었음. 

 

 

//html

<div id="player1"></div>
<div id="player2"></div>

 

 

//js 

// api키를 활용하는 법을 전혀 모르겠어.........젠장.

// 2. 이 코드는 Iframe Player API를 비동기적으로 로드한다. !!필수!!
const tag = document.createElement("script");

const HIDDEN_TOGGLE = "hidden";

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

// 3. API 코드를 다운로드 받은 다음에 <iframe>을 생성하는 기능 (youtube player도 더불어)
let player1;
let player2; //주인장 픽
function onYouTubeIframeAPIReady() {
  player1 = new YT.Player("player1", {
    videoId: "gWfFWVQW13E", //변경-영상ID //리스본 카페.
    playerVars: {
      rel: 1, //연관동영상 표시여부(0:표시안함)
      controls: 1, //플레이어 컨트롤러 표시여부(0:표시안함)
      autoplay: 1, //자동재생 여부(1:자동재생 함, mute와 함께 설정)
      mute: 1, //음소거여부(1:음소거 함)
      loop: 1, //반복재생여부(1:반복재생 함)
      playsinline: 1, //iOS환경에서 전체화면으로 재생하지 않게
      // playlist:
      //  "AKWlyl8_sdM,4Hm56tqcOc,s56deFmiIh0,PfqRyzUuHnM,gOjkGLBZhZo,4YUuA-hPDZA,FDI8d7jm4zU,BJ2U4t1jruA,wkFL8Oa0p30,o3ORqZYUccE,POsucxJPxqM,VFosjkiy7bw",
      //이러다 공허하게 //내가 죽으려고 //산나비 //말포이 공부중 //내 비평가들 //바닷가 카페 //나비 보베따
      //바람이 물었다 //벅찬 날//쇼팽 왈츠//웬즈데이 //포기할 이유가 없다 //시절인연
      list: "PLRubaLN0jh9IH9EAxbE1ijc12Ilg-QB-Q",
      shuffle: 1,
      //재생할 영상 리스트 //
      color: "white",
      enablejsapi: 1,
      disablekb: 0,

      events: {
        onReady: onPlayerReady, //onReady 상태일 때 작동하는 function이름
        onStateChange: onPlayerStateChange, //onStateChange 상태일 때 작동하는 function이름
      },
    },
  });
  player1.getIframe().classList.add("hidden");

  player2 = new YT.Player("player2", {
    videoId: "Mya0LYrRgX4", //변경-영상ID //가끔 연락하던 애
    playerVars: {
      rel: 1, //연관동영상 표시여부(0:표시안함)
      controls: 1, //플레이어 컨트롤러 표시여부(0:표시안함)
      autoplay: 1, //자동재생 여부(1:자동재생 함, mute와 함께 설정)
      mute: 1, //음소거여부(1:음소거 함)
      loop: 1, //반복재생여부(1:반복재생 함)
      playsinline: 1, //iOS환경에서 전체화면으로 재생하지 않게
      list: "PLRubaLN0jh9JCZcTIRRNBvUq3Srx9o9SN", //플브랑 비아이
      shuffle: 1,
      //재생할 영상 리스트 //
      color: "white",
      enablejsapi: 1,
      disablekb: 0,

      events: {
        onReady: onPlayerReady, //onReady 상태일 때 작동하는 function이름
        onStateChange: onPlayerStateChange, //onStateChange 상태일 때 작동하는 function이름
      },
    },
  });
  player2.getIframe().classList.add("hidden");
}

// 5. API는 플레이어의 상태가 변화될 때 아래의 function을 불러올 것이다.
//    이 function은 비디오가 재생되고 있을 때를 가르킨다.(state=1),
//    플레이어는 6초 이상 재생되고 정지되어야 한다.
// 플레이어 상태가 변경 될 때 실행
var done = false;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
    setTimeout(stopVideo, 6000);
    done = true;
  }
}
//6. 재생 정지 함수
function stopVideo() {
  if (player1) player1.stopVideo(); //player1이 존재하는 경우에만 정지
  if (player2) player2.stopVideo();
}

// 6. 버튼 생성 및 이벤트 핸들러 함수
const button1 = document.createElement("button");
button1.classList.add("button1");
button1.innerText = "ASMR 📚";
button1.addEventListener("click", playlistButton1);

const button2 = document.createElement("button");
button2.classList.add("button2");
button2.innerText = "주인장 pick 🎶";
button2.addEventListener("click", playlistButton2);


// 8. 버튼을 body에 추가
document.body.appendChild(button1);
document.body.appendChild(button2);


// 7. 버튼 클릭 시 플레이어 표시/숨김 토글
function playlistButton1() {
  player1.getIframe().classList.toggle(HIDDEN_TOGGLE);
}

function playlistButton2() {
  player2.getIframe().classList.toggle(HIDDEN_TOGGLE);
}


// 4. API는 비디오 플레이어가 준비되면 아래의 function을 불러올 것이다.
function onPlayerReady(event) {
  event.target.setVolume(50);
  event.target.playVideo();
}

 

 

 

// 결과

 

 

 

++ 만들고 보니 영상을 재생하면 버튼으로 안 보이게 만들어도 백그라운드에서 음악이 계속 재생되어서, 

화면 가독성이 더 좋음. 

 

 

 

5. but, 영상을 검색해서 재생목록을 직접 만들게 하는 버튼을 추가하려고 했는데,

공식 문서에서  listType = search를 부여하면 된다고 하는 것과 달리, 매개변수에 listType이 포함이 안되어서.. 

골머리 썩다가. 

 

--> YouTube Data API 를 적용해야 된다는 것을 확인함. 

이건 나중에 추가 예정.