Question

当激活youtube字幕时，如果你试图通过id="caption-window-1"选择DOM中标识的字幕标题中的单词，首先要注意的是：它不可选，所以为了使其可选，我使用chrome浏览器上的开发人员工具在js控制台中运行此脚本：

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

轮到完美，但点击它时标题仍在移动（你可以在YouTube上自己尝试）

所以我不能轻易地在标题中选择一个单词，它仍然可以随时移动。

我想在onclick事件上禁用字幕移动，是否有想法使用javascript修复它？

Answer 1

在控制台中运行此脚本：

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");
    }
}

Answer 2

问题是文本字段是可拖动的，以允许用户将字段定位在屏幕上的任何位置，因此它与您尝试执行的操作冲突。您只需记录并将文本推送到数组并在视频完成后解析它。

该片段不是很优雅，但应该让你开始：

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();

然后执行console.log(wordsAll.join(' '))

之类的操作

希望有所帮助！