获取 Openload VTT 字幕链接

Posted

技术标签:

【中文标题】获取 Openload VTT 字幕链接【英文标题】:Get an Openload VTT subtitle link 【发布时间】:2018-10-30 14:26:45 【问题描述】:

我想使用 Greasemonkey 为 Openload VTT 字幕添加一个字幕下载按钮。但是,我不知道如何访问 标记。

以这个带有英文字幕的French video clip 为例。 当我在 Firefox 中查看源代码时,我发现:

<video id="olvideo"   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");

(当我运行脚本时,我收到消息“ NOT found!”。)

【问题讨论】:

【参考方案1】:

link you gave 从来没有&lt;track&gt; 节点,至少对我来说(未登录,而不是视频的创建者)。

不过,这可能是一个标准的 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+ 中工作,但是那个引擎很坏,所以不能保证。

通过安装脚本并访问this MDN video demo page,您可以看到代码确实找到了存在的轨道(即使在影子 DOM 中)。

【讨论】:

感谢您的回复!不幸的是,您的代码不适用于 Greasemonkey/TamperMonkey。 The link you gave doesn't ever have a &lt;track&gt; node[...] 我忘了说我安装了广告拦截器。 (没有它,您会看到一些讨厌的广告,当然,它们没有 节点。)请访问该站点(使用广告拦截器)并等待视频剪辑播放。您会注意到它确实可以播放英文 VTT 字幕。 @NemoXXX,我总是使用广告拦截器和脚本拦截器。甚至不得不暂时减少一些设置才能看到视频。我看到了字幕,但没有&lt;track&gt; 节点。尝试在您未登录且未设置 cookie 的新浏览器(或实例)中访问该链接。 .. 您可以通过将track 更改为video 来查看上述脚本。或者,安装更新的脚本并访问给出的 MDN 链接。 感谢更新代码!它适用于 MDN 链接,但不适用于 openload 视频。 I see the subtitles but there is no &lt;track&gt; node.既然字幕不是硬编码的,那么如果没有&lt;track&gt;节点怎么播放呢? And you can see that the above script works by changing track to video. 它确实返回了一个视频元素 (video id="olvideo_html5_api)。但是,当我在 Firefox 中选择查看页面源时,我看到了一个不同的视频标签 (video id="olvideo"),它确实有 节点。很可能 openload.co 会运行​​一个脚本来动态添加 &lt;track&gt; 节点。 如果跟踪节点是动态添加的,并且它不是 Flash 播放器,并且不在影子 DOM 中(如图所示,需要特殊处理),那么脚本无论如何都会捕获它。在 Firefox 和 Chrome 中,我从未在该页面上看到过跟踪节点。如果您可以为未注册的全新用户提供可靠的配方,那么我们可以解决这个问题。此外,该网站有一些恶意软件报告。至于那些字幕是怎么出现的,是不是某个地方有shadow dom或者iframe? (我没看到,但也没仔细看。) 由于赏金即将到期,我还有一个问题要问您:为什么我选择查看页面源时看到的代码与 GreaseMonkey/TamperMonkey 看到的代码不匹配? (当我选择查看页面源时,我会看到我需要的标签。)【参考方案2】:

这是一个简单/基本的脚本。 我不知道你用的是哪个版本的GM。这是为 GM4 编写的 如果您使用的是 GM 3,请更改:

GM.xmlHttpRequest -> GM_xmlhttpRequest
GM.openInTab -> GM_openInTab

它会在新标签中打开字幕,以便您保存。 您可以在嵌入和普通文件页面上运行它。 例如https://openload.co/embed/rjC09fkPLYshttps://openload.co/f/rjC09fkPLYs

// ==UserScript==
// @name          Openload Subtitle Download
// @namespace     erosman
// @description   Openload Subtitle Download
// @include       https://openload.co/f/*
// @include       https://openload.co/embed/*
// @grant         GM.xmlHttpRequest
// @grant         GM_xmlhttpRequest
// @grant         GM.openInTab
// @grant         GM_openInTab
// @author        erosman
// @version       1.0
// ==/UserScript==

/* --------- Note ---------
  This script download Openload Subtitles.
  It runs on both embed and normal file pages.
  --------- History ---------


  1.0   Initial release

*/

(() =>  // anonymous function wrapper, for error checking & limiting scope, async FF52+
'use strict';

if (frameElement || !location || !document.body)  return;  // end execution if in a frame/object/embedding points


// --- get the document
GM.xmlHttpRequest(
  method: 'GET',
  url: location.href,
  onload: result => processResult(result.responseText),
  onerror: error => console.log(error)
);

function processResult(str) 

  // convert to DOM
  const doc = new DOMParser().parseFromString(str, 'text/html');

  // get tracks with source, convert to array for forEach, 
  // open each subtitle (if there are more than one) in a new tab
  // you can save it from there
  [...doc.querySelectorAll('track[src]')].forEach(item => GM.openInTab(item.src));


// end of anonymous function
)();

【讨论】:

感谢伟大的剧本! (它适用于 Firefox 和 Greasemonkey 以及 Chrome 和 Tampermonkey。)

以上是关于获取 Openload VTT 字幕链接的主要内容,如果未能解决你的问题,请参考以下文章

vvt在线转换srt

如何在视频字幕/字幕 (VTT) 中添加上标符号

关于vtt 与 srt 字幕 的相互转换

Android VideoView没有在iplayer中添加VTT字幕

如何在 tvOS 中将外部 .vtt 字幕文件添加到 AVPlayerViewController

VTT字幕文件处理(vi + sed + awk)