How translated subtitles on Udemy in real time with JS and Google Translate

Alexey Masyukov
2 min readOct 9, 2020

At the moment (October 2020), Google Translate don’t translate dynamic subtitles in Udemy video player.

Decision (video on below):

1. Set captions setting in “Display under video”

2. Press button “Expand” so that visible left panel with “Course Content”

3. Press button “Transcript”, that visible all captions in current video

4. Translate all page with Google Translate (click right button on page in Chrome and select “Translate this page”)

5. Scroll block “Transcript” to end with all captions. This action will be translated all hidden rows with subbtitles texts.

6. Open Console and paste this code (code was updated December 2020) and press Enter

let lastText = '';function check() {let toEl = $('.well--container--2edq4 span');let fromEl = document.querySelectorAll('p[data-purpose="transcript-cue-active"] span')[1];let currentText = fromEl.innerHTML;if (lastText !== currentText) {toEl.html(currentText);}lastText = fromEl.innerHTML;}window.i = setInterval(check, 200);

Done! Happiness. Lenin. Communism.

All next subtitle by video from course will be auto translated (if use “Next video” button)

And this instruction on video

Logic this decision: We translated all text in block “Transcript” and code in 6 step (on JavaScript) every 500 milliseconds just copy current caption (backlight blue) in this block and will be paste his in block below video, where was show original subtitle

--

--