티스토리 뷰

프로그래밍/자바스크립트

IFrame YOUTUBE API를 활용한 custom player 개발 1편

쉬피드 2020. 12. 23. 16:00
728x90
반응형

개발하는 해당 툴은 사실 크게 필요가 없다.

왜냐하면 그냥 유튜브에서 보는것이 편하기 때문이다.

해당 API는 구글에서는 외부에서 링크한 걸린 유튜브 영상에 대해서 어느정도 컨트롤 및 정보를 제공하며 해당 API를 활용하여
영상을 보면서 의견 개진이나, 또는 소통이 편할 수 있었으면 해서 만들어 보았다.

구글에서 제공하는 유튜브는 서비스에 대해서 크게 부족함을 느낀적은 없지만 한국인으로써 약간의 아쉬운점이 있다면

바로 영상 댓글일것이다.

모두 보기 힘들며, 시간순서대로 정렬되지 않고,
여러 외국인도 함께 보는 영상인이라면 영어가 우선으로 뜨기 때문에

영상을 보고나서 또 즐길 수 있는 댓글의 재미가 반감이 되버리고, 불편한 면이 있다.

이러한 영상을 보고 감상을 하거나 이야기 하는데 이 해당API를 응용하면 오히려 영상이 올라간 커뮤니티나 블로그 등에서 영상을 보고 즐기는게 더 좋지 않을까해서 만들어보았다.

만들면서 여러가지 아쉬운 제약사양과 개발자의 능력 부족, 게으름 등으로 인해 좋은 퀄리티는 나오기 어렵겠지만…

어떤 형식으로?

영상을 보면서 댓글을 보려면 스크롤을 내려야하고,
그러면 영상을 제대로 볼 수 없어
댓글과 영상을 동시에 감상하기 힘들며 댓글에서 웃기다는 부분을 다시 리와인드해서 보는 불편함이 있다.

물론 이것도 재미라면 재미지만,

이러한 부분을 한번 편하게 구성해보려 한다.
물론 아이디어는 식상한것이기도 하다.
이러한것들을 파고들어 만든 티비플이란 서비스가 있었지만
오히려 주객전도(영상 감상을 댓글이 불편하게 만듬)가 되어버려 오히려 불호의 아이콘이 되어버렸기에
적절하게 사용해야 할 것이다

위의 이미지와 비슷하게


유튜브 본진에서 제공하는 챕터기능처럼 영상 우측 또는 하단에

글작성자, 또는 댓글 작성자가 지정한 시간을 영상 옆에서 바로 볼 수 있게 하고,
또 글 작성자, 또는 댓글 작성자 등이 재밌다고 하는 부분, 재밌는 부분을 좌표로 찍어서 강조하는 기능이 메인이라 할 수 있겠다

물론 계획일뿐이고 만들다 보면 능력 부족 및 게으름과 같은 현실타협 사례로 인해 기능이 축소되거나
또는 만들다 보면 추가 하고 싶은 기능이 생기면서 추가되거나 하여 결과물은 계획과 상이할 수 있다.

iframe 삽입에 대한 YouTube Player API 참조 문서 | YouTube

위의 링크에서 기본적인 아이프레임을 API로 호출하는 방법이 있는데 해당 문서를 참조하며 개발하려 한다.

API에서 제공하는 사용 가능한것들, 그리고 해당 API에 대한 이해

<!DOCTYPE html>
<html>
  <body>
    <!-- 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: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }

      // 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) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
  </body>
</html>

해당 링크에서 제공하는 간단한 예제코드인데,

<div id="player"></div>

간단하게 설명하자면 해당 부분에 플레이어가 노출되며
M7lc1UVf-VE라는 아이디를 가진 유튜브영상을 360x640크기로 가져와
불러와 준비가 되었다면 영상을 재생하고,
재생하다가 6초가 지나면 자동으로 멈추게 하는 영상의 예제코드이다.

핵심코드

우리가 살펴봐야 할 부분은 바로 이 부분이다.

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

유튜브 영상 컨트롤에 필요한 스크립트를 불러오는 부분인데.
사실 아래처럼 해도 상관없다.

<script src="https://www.youtube.com/iframe_api"></script>

사실 위의 방법처럼 하는것이 일반적인데 왜 예제사이트에는 저렇게 되어있는지 의문이지만 동작되고 문제 없다면, 해당 문서, 개발하는 사람 마음이므로 의심을 거두자.

해당 스크립트가 로드되면 로드된 페이지에서 특정한 함수를 콜백으로 호출하는데
바로 onYouTubeIframeAPIReady를 호출한다
해당 API에서 제공하는 모든 코드는 이 해당 함수내에서 실행하여 받고 사용하여야 한다.

그 외의 API기능들은 살펴보면서 설명하긴 번거롭고
대략적인 구조를 알았으니 위에서 말한 플러그인을 개발해보려 한다

다음글에서 이어진다

2020/12/23 - [프로그래밍/자바스크립트] - IFrame YOUTUBE API를 활용한 custom player 개발 2편

 

IFrame YOUTUBE API를 활용한 custom player 개발 2편

2020/12/23 - [프로그래밍/자바스크립트] - IFrame YOUTUBE API를 활용한 custom player 개발 1편 IFrame YOUTUBE API를 활용한 custom player 개발 1편 개발하는 해당 툴은 사실 크게 필요가 없다. 왜냐하면 그냥..

shifeed.tistory.com

 

 

 

 

 

 

728x90
저작자표시 비영리 변경금지

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

Webassembly + Rust의 다양한 빌드 방법.  (0) 2020.12.24
IFrame YOUTUBE API를 활용한 custom player 개발 2편  (0) 2020.12.23
클라이언트(사용자)쪽에서 비디오 썸네일 뽑기  (0) 2020.12.22
innerHTML을 사용할때 주의 할 점.  (0) 2020.12.22
폼 데이터를 json 데이터로 보내고 싶을 때.  (0) 2020.12.21
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함