4

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

(スクリプトを実行すると、「<トラック> が見つかりません!」というメッセージが表示されました。)

4

2 に答える 2

5

あなたが与えたリンクには、少なくとも私にとっては ノードがありませ<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 内であっても)、コードがトラックを検出することがわかります。

于 2018-10-30T21:14:41.470 に答える
2

これは単純/基本的なスクリプトです。使用している GM のバージョンがわかりませんでした。これは GM4 用に書かれています。GM 3 を使用している場合は、次のように変更します。

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

字幕を新しいタブで開くので、保存できます。埋め込みと通常のファイル ページの両方で実行できます。例:
https://openload.co/embed/rjC09fkPLYs
https://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
})();
于 2018-11-09T10:13:57.613 に答える