웹브라우저 Javascript

Youtube 재생시간 구하기

2015-07-28

토픽 웹브라우저 Javascript

목적

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

봤어요 249명

Sansol Park2개월 전

해당 코드에서는 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. **간결성**: 각 조건문 내부에서 각각의 시, 분, 초를 처리하는 로직이 짧아져서 코드가 간결해졌습니다.

이 코드의 주요 목표는 각 비디오의 시간을 초 단위로 변환한 후, 전체 합산하여 최종적으로 시간, 분, 초 단위로 출력하는 것입니다. 이러한 방식으로 처리하면, 다양한 형식의 시간 데이터를 쉽게 처리할 수 있습니다.
대화보기
답글
피터래빗2년 전

한 영상당 시간까지 나오는 영상을 합하는 것을 코드로 만들었습니다.
저는 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 Ahn2년 전

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 Ahn2년 전

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+"초");

답글
드림보이2년 전

2022.01.06. 활용 - Youtube 재생시간 구하기 파트 수강완료

답글
pmxsg2년 전

2021.12.23.

답글
labis983년 전

20210917 좋은 강의 감사합니다.

답글
J3년 전

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);

답글
내가머더라3년 전

document.querySelectorAll('.pl-video .pl-video-time .timestamp span');
치면 span만 여러개 나오는데 머가 잘못된걸까요?

답글
한강4년 전

이렇게 사용하는것도 가능하군요.
오늘도 감사합니다~~^^!
200720

답글
leeyam4년 전

jquery로는 어떻게 불러와야할까요? querySelectorAll로는 잘되는데 $( ) 로는 같은 선택자를 쓰면 안되서.. 혹시 되는 예제좀 알려주실분있나요ㅠ

답글 수정 삭제
굼벵이4년 전

완료

답글 수정 삭제
johnAhn5년 전

var times = document.querySelectorAll('#thumbnail-container > ytd-thumbnail > #thumbnail > #overlays > ytd-thumbnail-overlay-time-status-renderer > span');

Query select 하는 곳만 조금 변형되었어요~

답글 수정 삭제
JuicyFresh5년 전

감사합니다.

답글
김피아6년 전

지금은 사이트 구조가 조금 바뀌어서 저는 아래와 같이 변형해서 구했습니다~!

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+"초★");

답글 수정 삭제
윤성민6년 전

이고잉님~~
좋은 강의를 제공해주셔서 너무 감사합니다.
2018년 3월 13일 지금 기준으로 유튜브 사이트에서, 동일한 원리로 살짝만 바꿔서 해도 아주 잘 먹히네요~~ 너무 뿌듯합니다

답글
박인호6년 전

1-4
수강완료.
감사합니다.

답글
momo7년 전

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);

답글
아침해7년 전

오늘 유투브에서 해본 소스입니다.
재생목록에 영상의 시간이 보여야 작동하네요.
( 예 : 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 Lee7년 전

감사합니다~^^

답글
codeX7년 전

감사합니다. 잘보았습니다.
크롤링(crawling) 혹은 스크래이핑(scraping)의 기본 베이스개념에 도움이 될것같습니다.

답글
신입17년 전

감사합니다.

답글 수정 삭제
괜찮아7년 전

추상적이던 수업 내용이 구체적으로 다가오는 순간이네요!
좋은 강의 감사합니다.

답글
tachyon8년 전

감사합니다

답글
윈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 + '초');

시간 분 초로 나오게 하고싶어서 이렇게 해보았는데,
맞을까요? 더 간단한 방법이 있을것 같은데;;

답글 수정 삭제
우욱진8년 전

감사합니다.~

답글
JustStudy8년 전

2016.07.19 화
고맙습니다 3.

답글
JustStudy8년 전

2016.07.04 일
두번째 학습에서 확실하게 이해가 되었습니다.
고맙습니다 2.

답글
차차차8년 전

감사합니다. 공부하는데 도움이 많이 되었습니다.

답글 수정 삭제
JustStudy8년 전

고맙습니다.

답글
Bono8년 전

duration = duration + parseInt(sec) + parseInt(min)*60
console.log(parseInt(duration/60/60)+"시간 "+min+"분 "+sec+"초"); 로 한다면
parseInt(duration/60/60) 여기에서 연산이 [시간.분]으로 나오고
min+"분"은 본문에서 분들만 합한 총 [분]값이 나오고
sec+ "초"는 본문에서 초들만 합한 총 [초]값이 나오지 않을까 싶습니다.
대화보기
답글 수정 삭제
Bono8년 전

min과 sec는 문자형으로 받기 때문에 parseInt() 숫자형으로 변환해야 되지 않을까 싶습니다.
대화보기
답글 수정 삭제
basicb8년 전

아직까지 잘 되는군요 ㅎㅎ 강의 정말로 잘 보고 있습니다. 감사합니다

답글
참빛바다8년 전

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);

요게 안되는 이유는 무엇인가요?

답글
kaphnoir8년 전

정말 감사합니다.

답글
lie1174@naver.com8년 전

이상하게 실습화면에선 안되네영 직접 유튜브 재생목록에서 실습하면 잘되영~
https://www.youtube.com......0es

답글 수정 삭제
굿9년 전

2015-11-14 토요일
신기방기 하네요.

답글 수정 삭제
자바몬9년 전

저도 브라운아이드소울 참 좋아하는데요. 강의 감사합니다 ^^

답글
코딩!9년 전

와.. 유투브 정보를 가지고 이렇게 입맛에 맞게 조리가 가능하다니!
해킹도 그런식으로 하는건가 싶네요 ㅎㅎ

답글
뎁온누리9년 전

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+"초");

이렇게 해서 한번 시분초를 나누어 보았어요.
맞나요?

답글
준법적인9년 전

좋은강의 너무너무 감사합니다!!

답글
원동인9년 전

와 이번강의 너무 좋아요!! 감사합니다!! 스크립트 배워야지 하는 의욕이 막 샘솟네요!! 감사합니다:)

답글 수정 삭제

Youtube 재생시간 구하기

목적

실습

코드

댓글