웹브라우저 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. tachyon
    감사합니다
  2. 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 + '초');


    시간 분 초로 나오게 하고싶어서 이렇게 해보았는데,
    맞을까요? 더 간단한 방법이 있을것 같은데;;
  3. 우욱진
    감사합니다.~
  4. JustStudy
    2016.07.19 화
    고맙습니다 3.
  5. JustStudy
    2016.07.04 일
    두번째 학습에서 확실하게 이해가 되었습니다.
    고맙습니다 2.
  6. 차차차
    감사합니다. 공부하는데 도움이 많이 되었습니다.
  7. JustStudy
    고맙습니다.
  8. duration = duration + parseInt(sec) + parseInt(min)*60
    console.log(parseInt(duration/60/60)+"시간 "+min+"분 "+sec+"초"); 로 한다면
    parseInt(duration/60/60) 여기에서 연산이 [시간.분]으로 나오고
    min+"분"은 본문에서 분들만 합한 총 [분]값이 나오고
    sec+ "초"는 본문에서 초들만 합한 총 [초]값이 나오지 않을까 싶습니다.
    대화보기
    • 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 자세히 보기