CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-nativeyoutube-api
Nam Lee
Nam Lee

Reputation: 1117

How can I get captions of a youtube video and display it separately?

I am making a bilingual app to learn English. I will insert a youtube video into the app, and show subtitles below. Is there any way I can get the captions directly from the youtube video player and display it separately?

enter image description here

I see some current apps that are doing that as well. Don't know how they did? Or do I have to manually get the subtitles from each video then save them to the database, then process and display them? But the amount of data will be huge, with tens of millions of videos, and each video has dozens of subtitles in different languages.

enter image description here

I searched a lot but didn't find anyone answering this. There are posts from many years ago that also have no answers. Does anyone have any ideas? Thank you.

Upvotes: 6

Views: 9760

Answers (3)

zleki
zleki

Reputation: 441

After a lot of searching I finally found the solution.

You have to GET the whole page first from the video url (e.g. https://www.youtube.com/watch?v=someID) and then from inside the whole resposne, search for a url like this: https://www.youtube.com/api/timedtext?...

It contains the temporary signature and everything else you need to download the transcript. (DISCLAIMER: haven't tested if the signature expires --> EDIT: it expires in approx. 24h)

After that you just need to extract that whole url - I used Regex - and decode it using decodeURI() method to escape all Unicode characters :)

It should return something like:

enter image description here

Upvotes: 8

rrr63
rrr63

Reputation: 247

You should check the youtube api to get captions :https://developers.google.com/youtube/v3/docs/captions/list?apix_params=%7B%22part%22%3A%22snippet%22%2C%22videoId%22%3A%22PRU2ShMzQRg%22%7D

From there you can have separately captions and video

Upvotes: 0

Gabriel Pichot
Gabriel Pichot

Reputation: 2493

You can use the Youtube API for this:

  1. First retrieve the list of captions using https://developers.google.com/youtube/v3/docs/captions/list
  2. Download the caption from https://developers.google.com/youtube/v3/docs/captions/download

Then you can have access to controls for a media player (and the current time) to display the correct subtitle: see HTMLMediaElement API for this.

Upvotes: 0

Related Questions