Текстовый поиск по видео на YouTube

Возникла необходимость текстового поиска по видео на ютубе, готового решения не нашел (может быть оно и есть), решил сам смастерить.

Технологии

Никаких. Ванила JS с самопальным шаблонизатором + webpack.

Делаем

Оформлено всё будет в виде расширения. Все действия выполняет скрипт, который внедряется в страницу обычным тегом script. Для этого скрипт нужно добавить в web_accessible_resources ^[1] в манифесте ^[2], а потом просто добавить ^[3] его в документ.

Для начала заполучим субтитры. Для это подсаживаем http-шпиона ^[4] и когда уходит запрос на нужный эндпоинт — как-то его обрабатываем ^[5]. Субтитры представляют собой xml:

примерно такого формата

<?xml version="1.0" encoding="utf-8" ?>
<timedtext format="3">
    <head>
        <pen id="1" fc="#E5E5E5"/>
        <pen id="2" fc="#CCCCCC"/>
        <ws id="1" mh="2" ju="0" sd="3"/>
        <wp id="1" ap="6" ah="20" av="95" rc="2" cc="32"/>
    </head>
    <body>
        <w t="0" id="1" wp="1" ws="1"/>
        <p t="21119" d="2580" w="1"><s ac="254">some</s><s t="570" ac="255"> text</s></p>
        <p t="21689" d="2010" w="1" a="1"></p>
    </body>
</timedtext>

Но не всегда — формат может варьироваться (атрибут format=«3» намекает). В некоторых случаях внутри тегов p (видимо от predlozhenie) нет тегов s (видимо от slovo). Я это решил тупым вырезанием тега s, тем более временнáя отметка относится к p целиком. Привели к единому виду, круто.

Ищем

Искать по xml сложно, поэтому мы не будем. Конец^w Вместо этого проще взять весь текст ^[4], который содержится в xml, а также построить карту ^[6], которая по данному индексу сообщала бы нам, в каком элементе p содержится данный символ, что автоматически даст нам временну́ю отметку. Сам поиск выглядит немного странно. Это связано с тем, что вхождений может быть несколько ^[7], а также с тем, что один поисковый запрос может перекрывать несколько временны́х интервалов ^[8]. Получили массив вхождений, круто.

Рисуем

Просто вываливаем ^[9] флажки примерно туда же, где находятся субтитры. При клике на флажок перематываем ^[10]. Сама форма поиска появится если загрузить субтитры.

!@#%, !@#% и в продакшн

Красоту не наводил. Если штука окажется полезной — доведу до ума.

Расширение для хрома ^[11] (пока по ссылке)
Github ^[12]
Баги/предложения желательно сюда ^[13]

Автор: linoleum

Источник ^[14]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/239519

Ссылки в тексте:

[1] web_accessible_resources: https://developer.chrome.com/extensions/manifest/web_accessible_resources

[2] манифесте: https://github.com/linoleum-js/youtube-search/blob/master/chrome-extension/manifest.json#L26

[3] добавить: https://github.com/linoleum-js/youtube-search/blob/master/chrome-extension/content.js#L4

[4] http-шпиона: https://github.com/linoleum-js/youtube-search/blob/master/src/util.js#L94

[5] обрабатываем: https://github.com/linoleum-js/youtube-search/blob/master/src/App.js#L73

[6] карту: https://github.com/linoleum-js/youtube-search/blob/master/src/SearchEngine.js#L109

[7] несколько: https://github.com/linoleum-js/youtube-search/blob/master/src/SearchEngine.js#L18

[8] несколько временны́х интервалов: https://github.com/linoleum-js/youtube-search/blob/master/src/SearchEngine.js#L28

[9] вываливаем: https://github.com/linoleum-js/youtube-search/blob/master/src/MarksView.js

[10] перематываем: https://github.com/linoleum-js/youtube-search/blob/master/src/App.js#L56

[11] Расширение для хрома: https://chrome.google.com/webstore/detail/youtube-text-search/njiileelagaahaelmloneiojanamnhfb

[12] Github: https://github.com/linoleum-js/youtube-search

[13] сюда: https://github.com/linoleum-js/youtube-search/issues

[14] Источник: https://habrahabr.ru/post/321022/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Нажмите здесь для печати.