앞으로 프로그래밍이 보편화될 것 같아요.
뭔가 각잡은 이야기 같지만 전혀 그렇지 않습니다.
인간은 계산기를 사용하기 시작했어요.
계산기는 인간의 인지능력을 넘어서는 연산이 가능합니다.
이러한 효과뿐만 아니라 효율도 뛰어납니다.
계산기를 쓰면 속도가 무척 빨라요. 정확도는 덤입니다.
요즘 사람들은 계산기를 어려움 없이 사용해요.
미래에는 아마 프로그래밍이 그럴 거예요.
코딩을 하지는 않겠지만 프로그래밍 기반의 도구를 쓰겠죠.
서론이 장황한데 정리하자면 이렇습니다.
'프로그래밍은 도구일 뿐이다!'
그냥 계산기 같은 거예요.
있으면 편리하니까요.
그런 취지에서 유튜브 재생 시간을 구해봅시다.
사용하는 건 두 가지
- 크롬 웹브라우저
- 자바스크립트
유튜브에는 채널마다 플레이 리스트가 있어요.
한편 플레이 리스트의 총 재생시간은 얼마나 될까요?
총 재생시간을 구하기 앞서 각 동영상의 값이 필요해요.
한편 재생 시간은 제 각각이지만 그걸 담는 구조는 같아요.
크롬 개발자 도구를 이용해서 페이지의 구조를 까봅시다.
(우클릭 -> 검사 메뉴로 개발자 도구를 열 수 있습니다.)
유튜브는 어떻게 동영상 재생 시간을 표시할까요?
재생 시간은 모두 span 태그 안에 담겨있네요.
그렇다면 일은 간단합니다.
플레이 리스트 영역 내의 span 태그만 불러옵시다.
document.querySelectorAll('ytd-playList-video-renderer ytd-thumbnail-overlay-time-status-renderer span')한 줄의 코드면 67개의 동영상 컨텐츠를 골라낼 수 있어요.
ytd-playList-video-renderer 어쩌고저쩌고...
뭔가 복잡해 보이지만 사실 별거 없습니다
구글 검색하듯이 키워드 선정만 잘하면 됩니다.
나머지 해야 할 일을 정리해봅시다.
- 재생 시간값만 가져오기
- 가져온 값을 분, 초로 분류하기
- 분류한 값을 더해서 총 시간 구하기
딱봐도 손으로는 못하는 계산이네요.
이건 자바스크립트를 씁시다.
아래 코드가 그 역할을 합니다.
결과는 이렇습니다.
총 14725초
4시간 5분 25초
코드는 형식적인 거니까 몰라도 됩니다.
그냥 그런갑다 합시다.
어때요, 참 쉽죠?
var list = document.querySelectorAll('ytd-playList-video-renderer ytd-thumbnail-overlay-time-status-renderer span');
var total = 0;
for(var i = 0; i < list.length; i++) {
var temp = list[i]; // i번째 동영상 노드
temp = temp.innerText; // 재생 시간 ex) 3:10
temp = temp.split(':'); // : 제거 ex) [3, 10]
var _min = temp[0];
var _sec = temp[1];
total += parseInt(_sec) + parseInt(_min)*60
}
var hour = parseInt(total / 3600)
var min = parseInt(total % 3600 / 60)
var sec = total % 3600 % 60
console.log(total+"초")
console.log(hour+"시간 "+min+"분 "+sec+"초")취미로 코딩하면 재밌어요.
실생활에 도움 되는 코딩.
생활코딩 짱짱맨!