웹브라우저 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. 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);
  2. 아침해
    오늘 유투브에서 해본 소스입니다.
    재생목록에 영상의 시간이 보여야 작동하네요.
    ( 예 : 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));
    }
    }
  3. Byeong Heon Lee
    감사합니다~^^
  4. 감사합니다. 잘보았습니다.
    크롤링(crawling) 혹은 스크래이핑(scraping)의 기본 베이스개념에 도움이 될것같습니다.
  5. 신입1
    감사합니다.
  6. 괜찮아
    추상적이던 수업 내용이 구체적으로 다가오는 순간이네요!
    좋은 강의 감사합니다.
  7. tachyon
    감사합니다
  8. 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 + '초');


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