Skip to content

Mutludev's Blog

Calculating Total Playlist Time With Vanilla Javascript

2 min read

Where this idea comes from

I was hanging on the internet and I saw Corey Schafer's video Python YouTube API Tutorial: Calculating the Duration of a Playlist and I thought, well

youtube

Each video has a duration on the bottom right corner, we can parse all of the durations and sum all of them

Selecting all videos using browser dom

I opened Inspector and started investigating

youtube selection

Each video has a class named ytd-playlist-video-renderer

We can parse all videos with document.querySelectorAll("ytd-playlist-video-renderer")

Now this selects all videos but we have to iterate over each video and get the just duration

we iterate over each video with forEach and using correct queries we will get the duration

1document.querySelectorAll("ytd-playlist-video-renderer").forEach( (element) => {
2 try{
3 let timelist = element.querySelector("#overlays")
4 .querySelector("ytd-thumbnail-overlay-time-status-renderer")
5 .querySelector("span")
6 console.log(timelist)
7 } catch(err){
8 console.log(err)
9 }
10
11})

Note

# symbol means class

I didn't use anything in front of some queries that means they are tag names like <ytd-thumbnail-overlay-time-status-renderer>

Let's see the output

youtube spans

That's great, we get all span elements but were not done we need to get raw duration.

Now if we select child and data of the child our code becomes

1document.querySelectorAll("ytd-playlist-video-renderer").forEach( (element) => {
2 try{
3 let timelist = element.querySelector("#overlays")
4 .querySelector("ytd-thumbnail-overlay-time-status-renderer")
5 .querySelector("span")
6 .firstChild.data.trim().split(':')
7 console.log(timelist)
8 } catch(err){
9 console.log(err)
10 }
11
12})

youtube duration

You can see that I used trim() because there is a lot of whitespace around these strings

and I used split(':') this will help us when we calculating total time.

Now we got everything we need to calculate total time lets calculate the total time

Calculating total duration

I will create an object on the top of our code to store total duration, we will increment the total duration on every video.

I just added this on top of our code and were ready to go.

1let totalTime = {
2 seconds:0,
3 minutes:0,
4 hours:0
5}

You remember we split durations in the previous section.

I want to check if the array size is 2 or 3 if it is 3 that means we have the hour section

1if(timelist.length == 2){
2 totalTime.minutes += parseInt(timelist[0])
3 totalTime.seconds += parseInt(timelist[1])
4} else if (timelist.length == 3){
5 totalTime.hours += parseInt(timelist[0])
6 totalTime.minutes += parseInt(timelist[1])
7 totalTime.seconds += parseInt(timelist[2])
8}

See how I added minutes and seconds in size 2 and hours, minutes, and seconds in size 3.

We have the total hours minutes and seconds but it isn't in the correct format, I mean we have them but they're like this

1hours: 1
2
3minutes: 465
4
5seconds: 342

Yeah, we have to calculate this, fortunate of us this is not that hard.

1totalTime.minutes += parseInt(totalTime.seconds/60)
2totalTime.seconds = totalTime.seconds % 60
3
4totalTime.hours += parseInt(totalTime.minutes/60)
5totalTime.minutes = totalTime.minutes % 60
6console.log(totalTime)

We divided seconds by 60 and added this to minutes then we set seconds to remainder

We did the same thing for hours and minutes

Our final code looks like this

1let totalTime = {
2 seconds:0,
3 minutes:0,
4 hours:0
5}
6
7document.querySelectorAll("ytd-playlist-video-renderer").forEach( (element) => {
8 try{
9 let timelist = element.querySelector("#overlays")
10 .querySelector("ytd-thumbnail-overlay-time-status-renderer")
11 .querySelector("span")
12 .firstChild.data.trim().split(':')
13
14 if(timelist.length == 2){
15 totalTime.minutes += parseInt(timelist[0])
16 totalTime.seconds += parseInt(timelist[1])
17 } else if (timelist.length == 3){
18 totalTime.hours += parseInt(timelist[0])
19 totalTime.minutes += parseInt(timelist[1])
20 totalTime.seconds += parseInt(timelist[2])
21 }
22 } catch(err){
23 console.log(err)
24 }
25
26})
27
28totalTime.minutes += parseInt(totalTime.seconds/60)
29totalTime.seconds = totalTime.seconds % 60
30
31totalTime.hours += parseInt(totalTime.minutes/60)
32totalTime.minutes = totalTime.minutes % 60
33console.log(totalTime)

Where can you run this code

I mentioned Inspector a few minutes ago, we can use Inspector to run commands on the current page.

Right-click somewhere on the page and select Inspect Element you will see something like that on the bottom of the page

youtube inspector

At the top of that box, there is a section named Console select this section, paste the code, and press enter.

You have to see something like this

youtube final

Some problems

There is a little problem with this approach if we have a large playlist, like 50 videos, youtube will not load all videos so we wouldn't be able to calculate time correctly, we have to scroll to the bottom to load all videos and then run the code

Thanks for Reading

© 2020 by Mutludev's Blog. All rights reserved.
Theme by LekoArts