Текстовий пошук по відео на YouTube

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

image

Технології
Ніяких. Ваніла JS із самопальним шаблонизатором + webpack.

Робимо
Оформлено все буде у вигляді розширення. Всі дії виконує скрипт, який впроваджується в сторінку звичайним тегом
script
. Для цього сценарію потрібно додати в web_accessible_resources в манифесте, а потім просто добавить його в документ.

Для початку матимемо субтитри. Для це підсаджуємо http-шпигуна і коли йде запит на потрібний эндпоинт — як-то його обробляємо. Субтитри являють собою 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 Замість цього простіше взяти весь текст, який міститься в xml, а також побудувати карту, яка за цим індексом повідомляла б нам, в якому елементі
p
містить цей символ, що автоматично дасть нам позначку. Сам пошук виглядає трохи дивно. Це пов'язано з тим, що входжень може бути несколько, а також з тим, що один пошуковий запит може перекривати кілька часових інтервалів. Отримали масив записів, круто.

Малюємо
Просто вивалюємо прапорці приблизно туди ж, де знаходяться субтитри. При кліці на прапорець перемотувати. Сама форма пошуку з'явиться якщо завантажити субтитри.



!@#%, !@#% і в продакшн
Красу не наводив. Якщо штука виявиться корисною — доведу до розуму.



Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.