javascript - How can I get captions of a youtube video and display it separately? - Stack Overflow

admin管理员组

文章数量:1345418

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?

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.

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.

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?

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.

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.

• javascript
• node.js
• reactjs
• react-native
• youtube-api

Share Improve this question Follow asked Sep 27, 2022 at 7:13 Nam LeeNam Lee 1,11722 gold badges1313 silver badges2222 bronze badges 1

• find a good solution? – aehlke Commented Mar 29, 2024 at 16:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

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./watch?v=someID) and then from inside the whole resposne, search for a url like this: https://www.youtube./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:

You should check the youtube api to get captions :https://developers.google./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

You can use the Youtube API for this:

1. First retrieve the list of captions using https://developers.google./youtube/v3/docs/captions/list
2. Download the caption from https://developers.google./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.

本文标签： javascriptHow can I get captions of a youtube video and display it separatelyStack Overflow