웹브라우저 JavaScript

Youtube 재생시간 구하기

목적

Youtube의 재생목록의 총 재생시간을 계산해서 보여주는 간단한 애플리케이션을 만들어봅니다. 

실습

http://output.jsbin.com/menuziqute/1

코드

본 수업의 코드는 youtube가 개편되서 html 코드가 달라지면 동작하지 않을 수 있습니다. 이런 경우 위의 실습 링크에 있는 페이지를 대상으로 실습을 진행하시면 됩니다. 

var times = document.querySelectorAll('.pl-video .pl-video-time .timestamp span');
var duration = 0;
for(var i=0; i<times.length; i++){
   var t = times[i];
   t = t.innerText;
   t = t.split(':')
   min = t[0];
   sec = t[1];
   duration = duration + parseInt(sec) + parseInt(min)*60
}
console.log(duration/60/60);

gist 

댓글

댓글 본문
  1. Sansol Park
    해당 코드에서는 YouTube 재생목록의 각 비디오 시간을 합산하여 총 재생시간을 계산하는 방법을 보여줍니다. 기본적으로, 각 비디오의 시간이 `분:초` 형식이거나 `시:분:초` 형식일 수 있기 때문에, if-else 조건문을 사용하여 각각의 경우를 처리하고 있습니다.

    ### 코드 개선
    기존 코드에서 if-else 구조로 `시:분:초`와 `분:초` 형식을 처리하는 방식은 잘 동작합니다. 그러나 이를 더 깔끔하고 유연하게 만드는 방법은 배열의 길이를 활용하는 것입니다. 또한, 코드의 중복을 줄이고, 처리 로직을 간소화할 수 있습니다.

    아래는 개선된 코드입니다:

    ```javascript
    // 각 비디오의 재생 시간을 가져옴
    var times = document.querySelectorAll('#contents #content #container #thumbnail #overlays #text');

    // 총 재생시간 (초 단위)
    var sum = 0;

    for (var i = 0; i < times.length; i++) {
    var t = times[i].innerText.split(':'); // 시간을 ":"로 분리
    var sec = 0; // 초 초기화

    // 배열의 길이에 따라 시간 계산
    if (t.length === 3) {
    sec += parseInt(t[0]) * 3600; // 시
    sec += parseInt(t[1]) * 60; // 분
    sec += parseInt(t[2]); // 초
    } else if (t.length === 2) {
    sec += parseInt(t[0]) * 60; // 분
    sec += parseInt(t[1]); // 초
    }

    sum += sec; // 전체 합산
    }

    // 시간, 분, 초 계산
    var h = Math.floor(sum / 3600);
    var m = Math.floor((sum % 3600) / 60);
    var s = sum % 60;

    console.log(h + "시간 " + m + "분 " + s + "초");
    ```

    ### 개선된 코드의 특징

    1. **가독성**: `if-else` 블록 안에서 중복되는 `parseInt`와 `sum`에 대한 계산 부분을 통합하여 코드가 더 깔끔해졌습니다.

    2. **유연성**: `t.length` 값을 이용해 자동으로 배열의 길이에 따라 시, 분, 초를 처리할 수 있습니다. 이 방법은 시간 형식이 더 늘어나거나 줄어들 때에도 쉽게 확장될 수 있습니다.

    3. **간결성**: 각 조건문 내부에서 각각의 시, 분, 초를 처리하는 로직이 짧아져서 코드가 간결해졌습니다.

    이 코드의 주요 목표는 각 비디오의 시간을 초 단위로 변환한 후, 전체 합산하여 최종적으로 시간, 분, 초 단위로 출력하는 것입니다. 이러한 방식으로 처리하면, 다양한 형식의 시간 데이터를 쉽게 처리할 수 있습니다.
    대화보기
    • 피터래빗
      한 영상당 시간까지 나오는 영상을 합하는 것을 코드로 만들었습니다.
      저는 for문 안쪽에 if문이 들어와야 하는 구조로 했습니다.
      이유는 시간일 경우 배열의 첫번째 원소가 시간으로 변하기 때문입니다.
      더 쉬운 방법 있을까요..?

      var times = document.querySelectorAll('#contents #content #container #thumbnail #overlays #text');
      var sum = 0;
      for(i = 0; i < times.length; i ++){
      var t = times[i]
      t = t.innerText;
      t = t.split(':');
      if (t.length == 2){
      min = t[0];
      sec = t[1];
      sum = sum + parseInt(min)*60 + parseInt(sec)
      } else {
      hour = t[0];
      min = t[1];
      sec = t[2];
      sum = sum + parseInt(hour)*3600 + parseInt(min)*60 + parseInt(sec)
      }
      }
      var h = parseInt(sum/3600);
      var m = parseInt(sum%3600/60);
      var s = parseInt(sum%3600%60);
      console.log(h+"시간"+m+"분"+s+"초");
    • Jungmin Ahn
      22년 9월 기준으로 작성해본 코드입니다 !
      단, 제공해주신 것과 마찬가지로 1시간 미만인 영상으로만 이루어진 재생목록에서만 작동하네요.

      var times = document.querySelectorAll('#contents #content #container #thumbnail #overlays #text');
      var duration = 0;
      for(i = 0; i < times.length; i ++){
      var t = times[i]
      t = t.innerText;
      t = t.split(':');
      min = t[0];
      sec = t[1];
      duration = duration + parseInt(min)*60 + parseInt(sec)
      }
      var h = parseInt(duration/3600);
      var m = parseInt(duration%3600/60);
      var s = parseInt(duration%3600%60);
      console.log(h+"시간"+m+"분"+s+"초");
    • Jungmin Ahn
      22년 9월 기준으로 작성해보았는데요.
      만약에 영상이 00:00 포맷을 벗어나 00:00:00 포맷이면 작동이 안되네요 흠

      var times = document.querySelectorAll('#contents #content #container #thumbnail #overlays #text');
      var duration = 0;
      for(i = 0; i < times.length; i ++){
      var t = times[i]
      t = t.innerText;
      t = t.split(':');
      min = t[0];
      sec = t[1];
      duration = duration + parseInt(min)*60 + parseInt(sec)
      }
      var h = parseInt(duration/3600);
      var m = parseInt(duration%3600/60);
      var s = parseInt(duration%3600%60);
      console.log(h+"시간"+m+"분"+s+"초");
    • 드림보이
      2022.01.06. 활용 - Youtube 재생시간 구하기 파트 수강완료
    • pmxsg
      2021.12.23.
    • labis98
      20210917 좋은 강의 감사합니다.
    • var times = document.querySelectorAll('.pl-video .pl-video-time .timestamp span');
      var duration = 0;
      for (var i=0; i<times.length; i++) {
      var t = times[i].innerText.split(':');
      var min = t[0];
      var sec = t[1];
      duration += min*60 + parseInt(sec);
      }
      var hour = parseInt(duration/60/60);
      duration -= hour*60*60;
      var min = parseInt(duration/60);
      duration -= min*60;
      var sec = duration;
      console.log(hour+":"+min+":"+sec);
    • 내가머더라
      document.querySelectorAll('.pl-video .pl-video-time .timestamp span');
      치면 span만 여러개 나오는데 머가 잘못된걸까요?
    • 한강
      이렇게 사용하는것도 가능하군요.
      오늘도 감사합니다~~^^!
      200720
    • leeyam
      jquery로는 어떻게 불러와야할까요? querySelectorAll로는 잘되는데 $( ) 로는 같은 선택자를 쓰면 안되서.. 혹시 되는 예제좀 알려주실분있나요ㅠ
    • 굼벵이
      완료
    • johnAhn
      var times = document.querySelectorAll('#thumbnail-container > ytd-thumbnail > #thumbnail > #overlays > ytd-thumbnail-overlay-time-status-renderer > span');

      Query select 하는 곳만 조금 변형되었어요~
    • JuicyFresh
      감사합니다.
    • 김피아
      지금은 사이트 구조가 조금 바뀌어서 저는 아래와 같이 변형해서 구했습니다~!

      var times = document.querySelectorAll('#overlays ytd-thumbnail-overlay-time-status-renderer span');
      var duration = 0;
      for(var i=0; i<times.length; i++){
      var t = times[i];
      t = t.innerText;
      t = t.split(':')
      min = t[0];
      sec = t[1];
      duration = duration + parseInt(sec) + parseInt(min)*60;
      }
      var minute = duration/60;
      minute = minute.toFixed(0);
      var second = duration%60;
      console.log("★총 재생시간: "+minute+"분 "+second+"초★");
    • 윤성민
      이고잉님~~
      좋은 강의를 제공해주셔서 너무 감사합니다.
      2018년 3월 13일 지금 기준으로 유튜브 사이트에서, 동일한 원리로 살짝만 바꿔서 해도 아주 잘 먹히네요~~ 너무 뿌듯합니다
    • 박인호
      1-4
      수강완료.
      감사합니다.
    • momo
      Youtube 페이지의 html 코드가 변경되어서, 아래와 같이 코드 작성하여 계산 성공하였습니다.

      var time = document.querySelectorAll('.style-scope ytd-thumbnail-overlay-time-status-renderer');
      var duration = 0;
      for (i = 0; i < time.length; i++) {
      var t = time[i];
      t = t.innerText;
      t = t.split(':');
      min = t[0];
      sec = t[1];
      duration = duration + parseInt(sec) + parseInt(min) * 60;
      };
      console.log(duration / 60 / 60);
    • 아침해
      오늘 유투브에서 해본 소스입니다.
      재생목록에 영상의 시간이 보여야 작동하네요.
      ( 예 : https://www.youtube.com......iOq )

      분초 외에 시분초로 나오는 영상이 있어도 작동하게 작성해보았습니다.
      잘 작성되었는지 모르겠네요.. ^^;
      duration은 초로 계산했습니다.

      var duration=0;

      var times=document.querySelectorAll('#contents #overlays .style-scope .ytd-thumbnail-overlay-time-status-renderer');

      for(var i=0;i<times.length;i++){
      var t=times[i].innerText.split(':');
      for(var j=0; j<t.length;j++){
      t[j]=parseInt(t[j]);
      duration+=t[j]*Math.pow(60,(t.length-j-1));
      }
      }
    • Byeong Heon Lee
      감사합니다~^^
    • codeX
      감사합니다. 잘보았습니다.
      크롤링(crawling) 혹은 스크래이핑(scraping)의 기본 베이스개념에 도움이 될것같습니다.
    • 신입1
      감사합니다.
    • 괜찮아
      추상적이던 수업 내용이 구체적으로 다가오는 순간이네요!
      좋은 강의 감사합니다.
    • tachyon
      감사합니다
    • var times = document.querySelectorAll('.pl-video .pl-video-time .timestamp span');
      var duration = 0;
      for (var i = 0; i < times.length; i++) {
      var t = times[i];
      t = t.innerText;
      t = t.split(':');

      var min = t[0];
      var sec = t[1];

      duration = duration + parseInt(sec) + parseInt(min)*60;
      }
      hh = duration/60/60;
      hh = parseInt(hh);
      mm = (duration - hh*60*60)/60;
      mm = parseInt(mm);
      ss = duration - hh*60*60 - mm*60;
      console.log(hh + '시간' + mm + '분' + ss + '초');


      시간 분 초로 나오게 하고싶어서 이렇게 해보았는데,
      맞을까요? 더 간단한 방법이 있을것 같은데;;
    • 우욱진
      감사합니다.~
    • JustStudy
      2016.07.19 화
      고맙습니다 3.
    • JustStudy
      2016.07.04 일
      두번째 학습에서 확실하게 이해가 되었습니다.
      고맙습니다 2.
    • 차차차
      감사합니다. 공부하는데 도움이 많이 되었습니다.
    • JustStudy
      고맙습니다.
    • Bono
      duration = duration + parseInt(sec) + parseInt(min)*60
      console.log(parseInt(duration/60/60)+"시간 "+min+"분 "+sec+"초"); 로 한다면
      parseInt(duration/60/60) 여기에서 연산이 [시간.분]으로 나오고
      min+"분"은 본문에서 분들만 합한 총 [분]값이 나오고
      sec+ "초"는 본문에서 초들만 합한 총 [초]값이 나오지 않을까 싶습니다.
      대화보기
      • Bono
        min과 sec는 문자형으로 받기 때문에 parseInt() 숫자형으로 변환해야 되지 않을까 싶습니다.
        대화보기
        • basicb
          아직까지 잘 되는군요 ㅎㅎ 강의 정말로 잘 보고 있습니다. 감사합니다
        • 참빛바다
          var time = document.querySelectorAll('.pl-video-time .more-menu-wrapper .timestamp span');
          var duration = 0;

          for(var key in time){
          var t = time[key].innerText.split(':');
          min = t[0]*1;
          sec = t[1]*1;
          duration = duration + (min*60) + sec;
          }

          duration = (duration/60)/60;
          console.log(duration);

          요게 안되는 이유는 무엇인가요?
        • kaphnoir
          정말 감사합니다.
        • lie1174@naver.com
          이상하게 실습화면에선 안되네영 직접 유튜브 재생목록에서 실습하면 잘되영~
          https://www.youtube.com......0es
        • 2015-11-14 토요일
          신기방기 하네요.
        • 자바몬
          저도 브라운아이드소울 참 좋아하는데요. 강의 감사합니다 ^^
        • 코딩!
          와.. 유투브 정보를 가지고 이렇게 입맛에 맞게 조리가 가능하다니!
          해킹도 그런식으로 하는건가 싶네요 ㅎㅎ
        • 뎁온누리
          var times = document.querySelectorAll('.pl-video .pl-video-time .timestamp span');
          var duration = 0;
          for(var i=0; i<times.length; i++){
          var t = times[i];
          t = t.innerText;
          t = t.split(':')
          min = t[0];
          sec = t[1];
          duration = duration + parseInt(sec) + parseInt(min)*60
          }
          console.log(parseInt(duration/60/60)+"시간 "+min+"분 "+sec+"초");

          이렇게 해서 한번 시분초를 나누어 보았어요.
          맞나요?
        • 준법적인
          좋은강의 너무너무 감사합니다!!
        • 원동인
          와 이번강의 너무 좋아요!! 감사합니다!! 스크립트 배워야지 하는 의욕이 막 샘솟네요!! 감사합니다:)
        버전 관리
        egoing@gmail.com
        현재 버전
        선택 버전
        graphittie 자세히 보기