获取Openload VTT字幕链接

Question

我想使用Greasemonkey为Openload VTT字幕添加字幕下载按钮.但是,我无法弄清楚如何访问<track>标签.

例如,这个带有英文字幕的法语视频剪辑.当我查看Firefox中的源代码时,我发现了这个:

<video id="olvideo" width="100%" height="100%" crossorigin="anonymous" controls>
    <track kind="captions" src="https://thumb.oloadcdn.net/subtitle/rjC09fkPLYs/vt8zTaIaVqQ.vtt" srclang="en" label="English" default />
</video>

为什么我的概念验证Greasemonkey代码不起作用？

// ==UserScript==
// @name        Openload
// @include     *openload.co*
// @run-at      document-idle
// ==/UserScript==

var video = document.querySelector("video");

if (video) {
    var track = video.querySelector("track");
    if (track) {
        alert ("<track> FOUND.");
    } else {
        alert ("<track> NOT found!");
    }

} else { 
    alert ("<video> tag not found");
}

(当我运行脚本时,我收到消息"<track> not found!".)

Answer 1

您提供 的链接没有<track>节点,至少对我来说(未登录,而不是视频的创建者).

然而,这可能是标准的AJAX问题.也就是说,如果通过javascript(AJAX)添加节点,则Tampermonkey脚本将在加载目标节点之前完成.

使用标准的ajax感知技术.单程:

// ==UserScript==
// @name     Openload.co, Report on track nodes
// @match    *://openload.co/embed/*
// @match    *://interactive-examples.mdn.mozilla.net/pages/tabbed/track.html
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

waitForKeyElements ("track", reportTrackNode);

//-- For Mozilla page, which uses shadow DOM:
waitForKeyElements ("shadow-output", reportTrackNodeWithinShadowDOM);

function reportTrackNode (jNode) {
    console.log ("Found <track>:", jNode[0]);
}

function reportTrackNodeWithinShadowDOM (jNode) {
    var sr      = jNode[0].shadowRoot;
    var trck    = $(sr.childNodes).find ("track");
    if (trck.length === 0)  return true;  //  Keep waiting.

    console.log ("Found <track>:", trck[0]);
}

请注意,上面的代码适用于Tampermonkey,Violentmonkey和Greasemonkey的早期版本.它应该在Greasemonkey 4+中工作,但是该引擎非常破碎,所以没有保证.

通过安装脚本并访问此MDN视频演示页面,您可以看到代码确实找到了存在的轨道(即使在影子DOM中).