웹브라우저 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. 피터래빗
    한 영상당 시간까지 나오는 영상을 합하는 것을 코드로 만들었습니다.
    저는 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+"초");
  2. 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+"초");
  3. 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+"초");
  4. 드림보이
    2022.01.06. 활용 - Youtube 재생시간 구하기 파트 수강완료
  5. pmxsg
    2021.12.23.
  6. labis98
    20210917 좋은 강의 감사합니다.
  7. 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);
  8. 내가머더라
    document.querySelectorAll('.pl-video .pl-video-time .timestamp span');
    치면 span만 여러개 나오는데 머가 잘못된걸까요?
  9. 한강
    이렇게 사용하는것도 가능하군요.
    오늘도 감사합니다~~^^!
    200720
  10. leeyam
    jquery로는 어떻게 불러와야할까요? querySelectorAll로는 잘되는데 $( ) 로는 같은 선택자를 쓰면 안되서.. 혹시 되는 예제좀 알려주실분있나요ㅠ
  11. 굼벵이
    완료
  12. johnAhn
    var times = document.querySelectorAll('#thumbnail-container > ytd-thumbnail > #thumbnail > #overlays > ytd-thumbnail-overlay-time-status-renderer > span');

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

    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+"초★");
  15. 윤성민
    이고잉님~~
    좋은 강의를 제공해주셔서 너무 감사합니다.
    2018년 3월 13일 지금 기준으로 유튜브 사이트에서, 동일한 원리로 살짝만 바꿔서 해도 아주 잘 먹히네요~~ 너무 뿌듯합니다
  16. 박인호
    1-4
    수강완료.
    감사합니다.
  17. 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);
  18. 아침해
    오늘 유투브에서 해본 소스입니다.
    재생목록에 영상의 시간이 보여야 작동하네요.
    ( 예 : 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));
    }
    }
  19. Byeong Heon Lee
    감사합니다~^^
  20. codeX
    감사합니다. 잘보았습니다.
    크롤링(crawling) 혹은 스크래이핑(scraping)의 기본 베이스개념에 도움이 될것같습니다.
  21. 신입1
    감사합니다.
  22. 괜찮아
    추상적이던 수업 내용이 구체적으로 다가오는 순간이네요!
    좋은 강의 감사합니다.
  23. tachyon
    감사합니다
  24. 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 + '초');


    시간 분 초로 나오게 하고싶어서 이렇게 해보았는데,
    맞을까요? 더 간단한 방법이 있을것 같은데;;
  25. 우욱진
    감사합니다.~
  26. JustStudy
    2016.07.19 화
    고맙습니다 3.
  27. JustStudy
    2016.07.04 일
    두번째 학습에서 확실하게 이해가 되었습니다.
    고맙습니다 2.
  28. 차차차
    감사합니다. 공부하는데 도움이 많이 되었습니다.
  29. JustStudy
    고맙습니다.
  30. 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
      현재 버전
      선택 버전
      graphittie 자세히 보기