0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.