Translated subtitles for online videos on the fly

Question

Though it is not difficult to make, I want to check if already online tool is available.

I can switch on the English subtitles for online video. I want some browser plugin or js code which can pick the English susbtitle and translate and show in other language just below of English subtitle. Eg.

<div class="shaka-text-container" style="justify-content: flex-end; bottom: 10%; margin: auto; width: 100%;">
    <span style="white-space: pre-line; background-color: rgba(0, 0, 0, 0.8); direction: ltr; font-weight: 400; font-style: normal; text-align: center; writing-mode: horizontal-tb;">
    He really is a good boy.
    </span>
</div>

Above section is the HTML section to show the subtitle on one of the online streaming site. That plugin take it's content, append a child element, and insert translated text.

Answer 1

As I couldn't find any ready made tool, I made a monkey script which help me to show the subtitles in any language I want along with English subtitles;

Here is the code for reference, in case if someone find it useful;

// ==UserScript==
// @name         Hotstar-Subtitle
// @namespace    personal
// @version      0.1
// @description  Add Hindi subtitle
// @author       You
// @match        https://www.hotstar.com/in/tv/rome/*
// @require      http://code.jquery.com/jquery-3.5.1.min.js
// @grant        unsafeWindow
// @grant        GM_registerMenuCommand
// ==/UserScript==

GM_registerMenuCommand('Run this now', function() {
    $("div.subtitle-container").append( $('<div style="height:0%"><div id="hindi-subtitle" class="shaka-text-container" style="justify-content: flex-end; bottom: 10%; margin: auto;"></div></div>') );

    observeForChange();
}, 'r');

function observeForChange(){
    //const targetNode = $("div.subtitle-container div.shaka-text-container:not(#hindi-subtitle)");
    const targetNode = document.querySelector("div.subtitle-container div.shaka-text-container:not(#hindi-subtitle)");
    console.log("observe change in ", targetNode);

    // Callback function to execute when mutations are observed
    const callback = function(mutationsList, observer) {
        //console.log("found mutation");
        for(const mutation of mutationsList) {
            translate(mutation.target.textContent);
            //console.log( mutation.target.textContent );
        }
    };

    // Create an observer instance linked to the callback function
    var MutationObserver = window.MutationObserver;
    let observer = new MutationObserver(callback);
    //console.log("created a new observer", observer);

    const config = { attributes: false, childList: true, subtree: true };

    // Start observing the target node for configured mutations
    try{
        observer.observe(targetNode, config);
        console.log("start observing");
    }catch(e){
        console.log("Not able to observe");
        console.log(e);
    }

    //observer.disconnect();
    return observer;
}


function translate(en_text){
    en_text = en_text.replace(/\n/g, " ");
    //trnslate to hinglish
    //const url ='https://www.google.com/inputtools/request?text=' + encodeURI(en_text)+'&ime=transliteration_en_hi';
    //convert

    const url = 'https://translate.googleapis.com/translate_a/single?client=gtx&sl=en&tl=hi&dt=t&q='+ encodeURI(en_text);
    $.ajax( url )
        .done(function(data) {
            $("#hindi-subtitle").text(data[0][0][0]);
            //console.log(data[0][0][0]);
        })
        .fail(function(err) {
            console.log( err );
        });
}

Disclaimer: some code is collected from other places and then glued to fulfill the expectations.