CODEWITHSUNDEEP
javascriptdomyoutubecaptionsubtitle
Jolo
Jolo

Reputation: 51

how make youtube subtitles selectable?

when activating youtube subtitles, if you try to select a word in the caption of subtitles witch identified in the DOM by id="caption-window-1" , the first thing noticed is that : it is not selectable, so to make it selectable, i run this script in the js console using the developer tool on chrome browser: 

(function() {
var caption= document.getElementById("caption-window-1");
caption.style.cursor="text";
caption.style["-webkit-user-select"]="all";
            })();

its turn perfectly, but the caption still moving when click on it (you can try it by your self on YouTube)

so i can't select easily a word in the caption, it still moving whatever i do.

I want to disable the caption movement on onclick event any idea to fix that using javascript ?

Upvotes: 5

Views: 2824

Answers (6)

Ilya
Ilya

Reputation: 31

thx to people above I made a little adjustments to be able select multiple words like a text. here script for tampermonkey/etc..

// ==UserScript==
// @name         make youtube caption selectable
// @namespace    none
// @version      0.2
// @description  Use this script if you want be able to select youtube captions/subtitles!
// @author       You
// @match        https://www.youtube.com/watch?*
// @grant        none
// @require      none
// ==/UserScript==

!function() {
  setInterval(make_subtitles_selectable, 250);
  function make_subtitles_selectable(){
    elem=document.querySelector("div.caption-window");
    if(elem!=null){
        elem.addEventListener("mousedown", function (event) {
            event.stopPropagation();
        }, true);
        elem.setAttribute("draggable", "false");
        elem.style.userSelect="text";
        elem.style.cursor="text";
        elem.setAttribute("selectable", "true");
    }
    elem=document.querySelector("span.ytp-caption-segment:not([selectable='true']");
    if(elem!=null){
        elem.style.userSelect="text";
        elem.style.cursor="text";
        elem.setAttribute("selectable", "true");
    }
    elem=document.querySelector("#caption-window-1:not([selectable='true']");
    if(elem!=null){
        elem.addEventListener("mousedown", function (event) {
            event.stopPropagation();
        }, true);
        elem.setAttribute("selectable", "true");
        elem.setAttribute("draggable", "false");
    }
}
}()

Upvotes: 1

ronstudy1
ronstudy1

Reputation: 136

Run this script in the console:

setInterval(make_subtitles_selectable, 250);
function make_subtitles_selectable(){
    elem=document.querySelector("span.ytp-caption-segment:not([selectable='true']");
    if(elem!=null){
        elem.style.userSelect="text";
        elem.style.cursor="text";
        elem.setAttribute("selectable", "true");
    }
    elem=document.querySelector("#caption-window-1:not([selectable='true']");
    if(elem!=null){
        elem.addEventListener("mousedown", function (event) {
            event.stopPropagation();
        }, true);
        elem.setAttribute("selectable", "true");
    }
}

Upvotes: 4

weichao
weichao

Reputation: 3381

Three years since this question active. Personally I think I have solved this question

https://gist.github.com/iamwwc/8bf9d1ea3aa38120a9ed07014cd5d73e

The script has done following things

  1. add 'user-select:none' css to subtitle make it selectable
  2. add a event listener on player, stopPropagation when click, touchstart, mouseover, mousedown event occurred

Througn this script, my translate select function now works

If you want subtitle to moveable, and move out of player, you can try the following script

https://gist.github.com/iamwwc/341b0513f9b22b1067a479225f3d6626

Hope my idea can help you a lot, to make a great tool for translator to work

Upvotes: 0

Jolo
Jolo

Reputation: 51

that is what i'm trying to do :

screenshot

Upvotes: 0

the8472
the8472

Reputation: 43052

You need to install capturing event listeners that call stopPropagation on the event to intercept it before the youtube javascript can process them and supress the default action, i.e. the text selection

youtube subtitle event listeners.

Upvotes: 0

mika
mika

Reputation: 1451

The problem is that the textfield is draggable to allow the user position the field anywhere on the screen so it conflicts with what you're trying to do. You could instead just record and push the text to an array and parse it after the video is done.

The snippet is not very elegant but should get you started:

var wordsAll = [];
var wordsPrev = [];
var previousLine = '';
function checkText() {
  var caption= document.getElementById("caption-window-1");
  requestAnimationFrame(checkText);
  if ( caption === null ) return;
  var wordsNow = caption.textContent.split(' ');
  if ( wordsPrev.length > 0 && wordsPrev.length < wordsNow.length ) {
    for ( var i=0,l= wordsNow.length; i<l; i++ ) {
      wordsAll.push(wordsPrev[i]);
    }
  }
  wordsPrev = wordsNow.slice(l);
}
checkText();

Then just do something like console.log(wordsAll.join(' '))

Hope that helps!

Upvotes: 0

Related Questions