웹브라우저 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. codeX
    감사합니다. 잘보았습니다.
    크롤링(crawling) 혹은 스크래이핑(scraping)의 기본 베이스개념에 도움이 될것같습니다.
  2. 신입1
    감사합니다.
  3. 괜찮아
    추상적이던 수업 내용이 구체적으로 다가오는 순간이네요!
    좋은 강의 감사합니다.
  4. tachyon
    감사합니다
  5. 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 + '초');


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