Текстовый поиск по видео на 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 содержится данный символ, что автоматически даст нам временну́ю отметку. Сам поиск выглядит немного странно. Это связано с тем, что вхождений может быть несколько, а также с тем, что один поисковый запрос может перекрывать несколько временны́х интервалов. Получили массив вхождений, круто.

    Рисуем


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



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


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

    Only registered users can participate in poll. Log in, please.

    Будет ли такое расширение полезно?

    • 79.4%да201
    • 20.6%нет52
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 14

      +1
      Было бы удобно в обучающих видеороликах на своем сайте.
      Такой поиск можно интегрировать на сайте для роликов с youtube?
      Или только в самом YouTube?
        0
        Да, можно. Нужно доработать пару моментов.
        +2

        Вроде бы и реализация несложная, но по сей день почему-то такого не было.
        Установил, работает, нравится. Спасибо!


        Также было бы удобно искать через клик по расширению (сейчас там пусто)
        image

          0
          Принимается, попап дорабатывать буду.
          +1
          Бывает же такое, именно сегодня мне нужна была эта фича, и я подумал почему же никто до их пор не сделал :) Спасибо.
            +2
            Автоматические титры строятся распознаванием голоса, а оно очень не всегда нормально работает.
              +4
              И все же лучше, чем ничего :)
              0
              Подумал, что в заголовке «видео» — это множественная форма; и можно будет поиском найти все видео где говориться «Сейчас я вам покажу, как правильно пить воду», или «Смотри, как я могу».
              Но уже так будет мега удобная штука. Особенно, когда просматриваешь старые tutorial-ы, и помнишь, что «где-то в нём об этом точно говорилось», а видео длится час! А у тебя мало времени: в дверь уже ломятся, кот требует еды, а нло весит прямо перед твоим окном, и ждёт дальнейших указаний. Луна так далеко удалилась от Земли, что приливные волны перестали выбрасывать китов на берега, и вроде бы всё замечательно…
                0
                Это что, любую стену можно так убрать в любую страницу можно заинжектить свой скрипт?
                  0
                  Да что там стену и не только скрипт, а еще и стили.
                  0
                  Коварный вопрос — а кто обеспечивает наличие субтитров? А что с морфологией?
                    0
                    Работает, автору — спасибо. Идея бомбическая, но пользоваться не удобно. Интуитивно хочется нажать на иконку расширения и ввести запрос. Неплохо было бы если расширение само включало субтитры, а если нужно и перевод, а потом искало. Насколько сложно это сделать?
                      0
                      есть предложение объединить проекты или хотя бы усилия, есть продолжение вашей идеи.

                      Я уже пару лет как «разработал до дизайна» )))) приложение, которое может быть очень полезно для современного мира и скоростей. Главная фишка приложения — тэгирование записанного контекста.

                      Предпосылки — огромные объемы носителей для записи аудио и видео данных. и уже достаточные мощности систем. я занимаюсь научно-исследовательской деятельность, но не профи, а любитель )) и накоплено огромное количество аудиозаписей. Нужен был транскрибер, и из этого родилась идея приложения с тэгированием аудио и мгновенным поиском по записи.

                      Может быть вы могли за деньги помочь мне с моим проектом? Если вас это интересует — давайте обсудим ))
                        –1
                        Интересная штука. Вы талант! Дорабатывайте обязательно скрипт, будет полезен. Обратитесь к разработчикам Ютуба, думаю они заценят. Возможно купят. Такому таланту могут и работу в компании предложить. Удачи :-)

                        Only users with full accounts can post comments. Log in, please.