자바스크립트 youtube API에서 주기적으로 플레이 타임 정보 끌어오기

본문

자바스크립트

[답변] youtube API에서 주기적으로 플레이 타임 정보 끌어오기 [1]

_ 오잇스 (2099184)

활동내역 작성글 쪽지 마이피 타임라인

출석일수 : 2941일 | LV.49

Exp.23%

추천 1 | 조회 930 | 비추력 4932

작성일 2021.09.12 (20:46:45)

IP : (IP보기클릭)116.121.***.***

프로필 열기/닫기

_ 오잇스 (2099184)

1 | 1 | 930 | 비추력 4932

프로필 열기/닫기

2021.09.12 (20:46:45)

set interval 이용해서 구현해 보았습니다. 참고 바랍니다.

<!DOCTYPE html>
<html>
  <body>
    <div id="player" data-uri="HuvLtCmNmVQ"></div>
    <script>
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          videoId: document.getElementById('player').getAttribute('data-uri'),
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
      }
      function onPlayerStateChange(event) {
        console.log(player.getCurrentTime());
      }
 
      function onIntervalReached(){
          if(player.getCurrentTime === undefined || player.getCurrentTime === ){
            return;
          }
        console.log(player.getCurrentTime());
      }
      setInterval(onIntervalReached, 100);
    </script>
  </body>
</html>
Colored by Color Scripter

cs

이벤트 리스너처럼 사용할 수 있는 방법으로도 만들어 보았으니 취향에 맞는 거 사용하세요

<!DOCTYPE html>
<html>
  <body>
    <div id="player" data-uri="HuvLtCmNmVQ"></div>
    <script>
      var tag = document.createElement('script');
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          videoId: document.getElementById('player').getAttribute('data-uri'),
          events: {
            'onStateChange': onPlayerStateChange
          }
        });
      }
      function onPlayerStateChange(event) {
        console.log(player.getCurrentTime());
      }
 
      function createPlayTimeChecker(callBackFunction){
          var previousPlayTime = 0;
          return function(){
            if(player.getCurrentTime === undefined || player.getCurrentTime === ){
              return;
            }
            var currentPlayTime = player.getCurrentTime();
            if(previousPlayTime !== currentPlayTime){
              callBackFunction({
                previousPlayTime: previousPlayTime,
                currentPlayTime: currentPlayTime
              });
              previousPlayTime = currentPlayTime;
            }
          }
      }
 
      function onPlayTimeChanged(event){
          console.log(event.currentPlayTime);
      }
      setInterval(createPlayTimeChecker(onPlayTimeChanged), 100);
    </script>
  </body>
</html>
Colored by Color Scripter

cs

두 번재 방식은 플레이 타임이 바뀔 때에만 콜백 함수를 호출하게끔 구성하였습니다. createPlayTimeCheck의 첫 번째 함수 파라미터로 콜백 함수를 주면 됩니다.

글쓰기

댓글 | 총 1 개

작성자 _ 오잇스 (2099184)

(IP보기클릭)116.121.***.***

[삭제된 댓글의 댓글입니다.]
Quiple
방금 이벤트 리스너처럼 사용할 수 있는 방법도 만들어서 올렸으니 다시 한번 확인 부탁드립니다. | 21.09.12 20:54 | |

등록

글쓰기