[Js] 활용 | youtube 재생시간 구하기 | 생활코딩 javascript

모든 포스팅은 인프런 [생활코딩] 자바스크립트 강의의 내용을 담고 있으며

출처는 아래의 주소로 "egoing Lee"님의 자료입니다. 

상업적인 의도가 아닌 공부한 것을 정리해놓는 목적으로 포스팅 한 것입니다.

 

www.inflearn.com/course/javascript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%95%EC%A2%8C#

웹브라우저 Javascript (자바스크립트) - 인프런

---

 

유튜브로 여러 강의를 볼 때를 가정해보자. 여러 강의의 총 시간이 얼마인지 계산해보고 싶을 때가 있기 마련이다.

그 때, 아래와 같은 코드를 사용하면 된다!

---

실습한 유튜브 사이트는 아래와 같다.

https://www.youtube.com/playlist?list=PLuHgQVnccGMA0lO0qip6Phh6UL73TS0es

 

실습 연습을 하고 싶다면, 아래 주소를 사용하면 된다.

https://jsbin.com/menuziqute/1/edit?html,output

JS Bin

 

실습 예제 코드

var times = document.querySelectorAll('.pl-video .pl-video-time .timestamp span');
/* 각 동영상의 시간을 가져오기 위한 구문으로,
pl-video라는 클래스의 하위에 pl-video-time 클래스 하위의 timestamp클래스 안에서
span 태그라는 값들을 가져와서 times라는 변수 안에 유사 배열 형식으로 가져온 값을 대입한다.*/ 

var duration = 0;	// 시간의 합을 구하기 위한 변수로, 초기화한 것이다.

for(var i=0; i<times.length; i++){	// 구하고자 하는 영상의 시간을 모두 합치기 위한 반복문이다.

   var t = times[i];	// 각 동영상의 시간을 변수 t에 대입한다.
   t = t.innerText;	// 태그를 뺀 문자열만 t변수에 담아준다. 즉, 각 동영상 시간만 가져온다.
   t = t.split(':')	// 분:초 형식으로 저장되어 있기 때문에 split을 사용하여 시간과 분을 구별한다.
   min = t[0];		// 분만 min변수에 넣는다.
   sec = t[1];		// 초만 sec변수에 넣는다.
   
   duration = duration + parseInt(sec) + parseInt(min)*60
   /* 동영상 시간을 합쳐주는 구문으로,
      sec과 min앞에 parseInt를 바꾸는 이유는 문자열로 저장된 분과 시간을 숫자로 바꿔주는 것이다.
      또한, min에 60을 곱한 이유는 초로 바꿔서 duration변수에 동영상의 시간을 초로 저장하기 위해서이다.*/
}

console.log(duration/60/60);	
/* 총 시간을 초로 구했기 때문에 60을 나눠서 시간으로 바꿔준다.
   60을 한 번 나누면 분을 구하게 된다.*/

---

[ 실행 결과 ]

위와 같이 총 17시간인 것을 알 수 있다.