<aside> <img src="/icons/bookmark_purple.svg" alt="/icons/bookmark_purple.svg" width="40px" />

목차

</aside>

개발 도구, 방법 정하기 - 지금까지 과정 요약

1️⃣ iframe 태그 학습

⇒ frame 개념, 브라우징 컨텍스트 개념, 독립적인 컨텍스트 개념 학습

⇒ 독립적이며 cross origin인 두 컨텍스트끼리 소통하는 방법 postMessage API

2️⃣ Youtube Player API 학습

⇒ postMessage API 를 통해 구현된 API임을 학습

⇒ 동기화: seekTo, pasueVideo, playVideo 등 기능 구현에 필요해보이는 함수 학습

⇒ 권한 부여: conrtols등의 옵션으로 플레이어를 커스텀할 수 있다는 걸 학습, disablekb 를 통해선 키보드 이벤트를 막을 수 있다는 걸 학습

• 볼륨 조절까지 불가능해진다는 점이 단점

  

• 볼륨 조절을 키보드로 가능하도록 다른 모든 key 입력을 분기로 처리해줄 것인가 vs 해당 옵션을 통해 전부 막을 것인가?

• 고민할 필요가 있음

⇒ onYouTubeIframeAPIReady 를 반드시 구현해야 한다는 것과 그 이유 학습

• 플레이어 API가 로드되었을 때 플레이어 객체를 설정할 수 있도록 콜백함수 인터페이스를 제공해주는 것이므로 사용하지 않을 이유가 X

3️⃣ react-youtube 라이브러리와 react-player 라이브러리 학습

⇒ react-youtube 라이브러리는 Youtube Player API에 얇은 막을 씌워 리액트 컴포넌트 형태로 제공해주는 라이브러리

⇒ react-player 라이브러리는 youtube뿐만 아니라 다른 영상 소스까지 지원하는 전반적인 플레이어 라이브러리, youtube의 경우 마찬가지로 Youtube Player API를 이용해 구현되어 있음