[유튜브API] 댓글에서 시간클릭 시 해당 영상 타임라인 이동

728x90
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <a href="javascript:void(0);" class="seekTo">1:10:40</a>
  <div id="myplayer"></div>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src='http://www.youtube.com/iframe_api'></script>
  <script>
    function convert(input) {

      const afterStr = input.split(':');

      let hour = 0;
      let minutes = 0;
      let seconds = 0;

      if (afterStr.length == 3) { //시:분:초 일때
        hour = +afterStr[0]; //시
        minutes = +afterStr[1]; //분
        seconds = +afterStr[2]; //초

      } else { //분:초 일때

        minutes = +afterStr[0]; //시
        seconds = +afterStr[1]; //분

      }
      const result = hour * 3600 + minutes * 60 + seconds;

      return result;
    }

    var player;

    function onYouTubeIframeAPIReady() {
      player = new YT.Player("myplayer", {
        width: 360,
        height: 180,
        videoId: '유튜브 영상ID',
      });
    }

    $(function () {
      $(".seekTo").click(function () {
        const seektime = $(this).html();
        const seekto_s = convert(seektime);
        player.seekTo(seekto_s);
      })
    })
  </script>
</body>

</html>
728x90
티스토리툴바
