Технологии
Никаких. Ванила 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, тем более временнaя отметка относится к p целиком. Привели к единому виду, круто.Ищем
Искать по xml сложно, поэтому мы не будем. Конец^w Вместо этого проще взять весь текст, который содержится в xml, а также построить карту, которая по данному индексу сообщала бы нам, в каком элементе
p содержится данный символ, что автоматически даст нам временну?ю отметку. Сам поиск выглядит немного странно. Это связано с тем, что вхождений может быть несколько, а также с тем, что один поисковый запрос может перекрывать несколько временны?х интервалов. Получили массив вхождений, круто.Рисуем
Просто вываливаем флажки примерно туда же, где находятся субтитры. При клике на флажок перематываем. Сама форма поиска появится если загрузить субтитры.
!@#%, !@#% и в продакшн
Красоту не наводил. Если штука окажется полезной — доведу до ума.
- Расширение для хрома (пока по ссылке)
- Github
- Баги/предложения желательно сюда
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Комментарии (14)
Andoryu
02.02.2017 21:19+1Бывает же такое, именно сегодня мне нужна была эта фича, и я подумал почему же никто до их пор не сделал :) Спасибо.
Shultc
03.02.2017 13:37Подумал, что в заголовке «видео» — это множественная форма; и можно будет поиском найти все видео где говориться «Сейчас я вам покажу, как правильно пить воду», или «Смотри, как я могу».
Но уже так будет мега удобная штука. Особенно, когда просматриваешь старые tutorial-ы, и помнишь, что «где-то в нём об этом точно говорилось», а видео длится час! А у тебя мало времени: в дверь уже ломятся, кот требует еды, а нло весит прямо перед твоим окном, и ждёт дальнейших указаний. Луна так далеко удалилась от Земли, что приливные волны перестали выбрасывать китов на берега, и вроде бы всё замечательно…
VioletGiraffe
03.02.2017 13:42Это что,
любую стену можно так убратьв любую страницу можно заинжектить свой скрипт?
GBreazz
03.02.2017 20:59Работает, автору — спасибо. Идея бомбическая, но пользоваться не удобно. Интуитивно хочется нажать на иконку расширения и ввести запрос. Неплохо было бы если расширение само включало субтитры, а если нужно и перевод, а потом искало. Насколько сложно это сделать?
ReenaFuro
03.02.2017 20:59есть предложение объединить проекты или хотя бы усилия, есть продолжение вашей идеи.
Я уже пару лет как «разработал до дизайна» )))) приложение, которое может быть очень полезно для современного мира и скоростей. Главная фишка приложения — тэгирование записанного контекста.
Предпосылки — огромные объемы носителей для записи аудио и видео данных. и уже достаточные мощности систем. я занимаюсь научно-исследовательской деятельность, но не профи, а любитель )) и накоплено огромное количество аудиозаписей. Нужен был транскрибер, и из этого родилась идея приложения с тэгированием аудио и мгновенным поиском по записи.
Может быть вы могли за деньги помочь мне с моим проектом? Если вас это интересует — давайте обсудим ))
Kladproraba
03.02.2017 21:01-1Интересная штука. Вы талант! Дорабатывайте обязательно скрипт, будет полезен. Обратитесь к разработчикам Ютуба, думаю они заценят. Возможно купят. Такому таланту могут и работу в компании предложить. Удачи :-)
tereh
Было бы удобно в обучающих видеороликах на своем сайте.
Такой поиск можно интегрировать на сайте для роликов с youtube?
Или только в самом YouTube?
linoleum
Да, можно. Нужно доработать пару моментов.