Расширение для браузеров, помогающее в изучении языков с помощью просмотра сериалов и фильмов.
Что умеет?
- Переводить слова по наведению мышки.
- По клику переводить полное предложение.
- Перематывать видео по субтитрам, а не только +-10 секунд.
- Экспортировать слова в LinguaLeo или Puzzle English.
- Показывать прогресс бар субтитров. Удобно для навигации и когда пьешь чаек, но не хочешь упустить начало реплик.
- Загружать свои субтитры. Можно не ждать, когда субтитры зальют на кинопаб.
- Управлять задержкой субтитров. Актуально для кинопаба и кастомных субтитров.
- Настраивать размер и фон субтитров.
- Можно перетаскивать субтитры в любую часть экрана. Теперь они не будут закрывать самое интересное.
- Фишка чисто для Netflix: возможность выбрать субтитры и озвучку из всех доступных на нетфликсе, а не только тех, что открыты для вашего текущего региона. Теперь в путешествиях нужная озвучка не пропадет.
Какие сервисы поддерживаются?
- Kinopub – куда же без него.
- Netflix.
- Youtube – как обычные видео, так и Originals сериалы.
Amazon prime video в процессе разработки.
На этом закончим знакомство, за подробностями переходите на сайт или на github.
Идея
Большинство из нас любит посмотреть сериальчики, тратит на это кучу времени и потом винит себя за лень. Так же большинству тяжело даётся изучение иностранных языков (это ж скучное задротство). В один прекрасный момент нас посещает блестящая идея объединить эти два действия и смотреть сериалы в оригинале с субтитрами. С одной стороны, смотришь любимые сериальчики, а с другой — прокачиваешь язык, учишь слова и избавляешься от чувства вины. Это ли не рай?
Такая идея пришла и ко мне. Я начал в большом количестве смотреть сериалы на английском с субтитрами и разбираться что же там говорят. И после пары сотен перепечатанных слов в гугл транслейт или Urban disctionary задумался об автоматизации этого процесса. Поискал готовые решения и нашел несколько подходящих плагинов. Но часть из них была мертва (например, плагин от skyeng), какие-то заточены только на нетфликс, а мне хотелось зайти на уютный кинопаб и выбрать любой сериал или посмотреть лекцию на ютубе. В итоге я пришел к идее написания своего плагина.
Прототип
Я хоть и писал одно время фронт, но по большей части всё же бэкенд разработчик. Но что же нам поцонам, берем тайпскрипт (мы ж не какие-то там джиэсеры) и начинаем погружаться в разработку и апи гугл хрома.
Первый прототип поддерживал только кинопаб, был собран на коленке за пару недель и напичкан таймаутами. Но этого уже хватило, что бы оценить насколько удобней стало смотреть сериалы. Просмотр сложных серий сократился минут на 20. Это меня вдохновило, и я начал активно доводить все до юзабельного состояния. Кто ж знал, что это станет самым сложным и долгим.
Проблемы разработки или как построить проект на хаках
Интеграция
Мне хотелось сделать интеграцию плагина максимально нативной для всех сервисов, чтобы он не ломал стандартную работу, а дополнял её, не раздражая, когда не нужен.
Например:
- Плагин должен сам определять текущий язык субтитров, автоматически их подгружать и корректно отображать.
- Если переключаешь язык в интерфейсе плеера, то плагин должен это отловить и автоматически сменить язык.
Тут я столкнулся с тем, что у каждого сервиса свой плеер и своя логика работы с субтитрам, в которой предстояло разобраться.
Написав несколько разных по успешности реализаций интеграций с сервисами, я пришел к общему алгоритму:
- В запросах ищем ссылки по которым загружены субтитры и разбираемся как их сформировать.
- Инжектим js скрипт напрямую в страницу сервиса, это позволяет управлять плеером и перехватывать события.
- Разбираемся, как сервис работает с субтитрами и погружаемся в работу самого плеера.
- Придумываем хаки для определения событий загрузки, смены субтитров и текущего языка.
Самым простым в этом плане оказался Kinopub, так как он использует опенсорсный плеер JW Player, можно посмотреть в доке его события, подписаться на них внутри инжект скрипта, да и просто изучить внутренний код.
Netflix
Нетфликс имеет свой плеер, который доставил много боли. Естественно, по нему нигде не найти документации, приходилось снифать запросы к мобильному приложению, часами изучать в консоли браузера, как работает плеер и какие функции можно вызвать. Я пересмотрел практически все проекты на гитхабе, где хоть как-то упоминается нетфликс, доставал исходники существующих расширений и разбирался в их минимизированном коде. Ухх, это был долгий путь.
В итоге решение получилось специфичным, но вполне рабочим и в духе JS. Все ж наслышаны о протипном устройстве JS и что всё можно переопределить. Именно этим я и воспользовался. В коде, который инжектится на страницу нетфликса, переопределяем фунции JSON.stringify
и JSON.parse
, которые используется при сериализации/десериализации данных. Таким образом мы получаем возможность перехватывать и модифицировать запросы плеера к серверам нетфликса. Дальше остается только понять, что нужно подменять.
Поделюсь уже готовым решением:
Для того чтобы в ответе от серверов нетфликса пришла ссылка на субтитры в формате VTT
, нужно модифицировать запрос и добавить webvtt-lssdh-ios8
в список профилей.
Чтобы открыть весь список субтитров и аудио дорожек, нужно в параметры запроса добавить showAllSubDubTracks = true
.
После чего при десериализации джейсона, мы можем достать ссылки на субтитры и положить их в кэш. В дальнейшем при смене языка просто взять нужную ссылку из кеша и загрузить по ней субтитры.
Реализация перемотки
На первый взгляд задача перемотки по субтитрам выглядит достаточно просто: берем video элемент со страницы и проставляем в currentTime время нужного субтитра.
Но тут к нам стучится нетфликс и говорит, эй парень, держи-ка ошибку, нельзя мешать работе нашего плеера извне. Погружаемся в устройство плеера нетфликса и находим функцию seek
, которая используется для перемотки. Дальше дело за малым, когда в плагине происходит событие перемотки субтитров, отсылаем наш кастомный эвент, на который подписан инжект скрипт (забыли уже про него?), и вызываем из него функцию самого плеера.
Это малая доля хаков, которые пришлось использовать в плагине. Еще много подбросил YouTube. Если интересно, вы всегда можете спросить про них у меня в чате.
Запуск
Для меня это до сих пор самая сложная задача, тут уж скрипт с хаком не напишешь.
При использовании кинопаба, вы могли удивиться, что там к большинству сериалов есть английские субтитры, а порой и других языков. По мере разработки плагина я ближе познакомился с сервисом и нашел людей, которые занимаются заливкой этих субтитров. К ним приходит много обращений с просьбами добавить фичи для просмотра видео с иностранными субтирами. Таким образом, плагин вызвал взаимный интерес и кинопаб сделали рекламу в своём канале.
Так я получил первые 100 пользователей и в дальнейшем сарафанным радио их набралось около 300.
Поговорим о деньгах
Основная цель проекта была решить мои задачи и потренироваться в самостоятельной разработке проекта от идеи до релиза. Поэтому проект сейчас полностью бесплатный и опенсорсный.
Я б хотел, чтобы это так и оставалось, ибо на текущий момент хочется ощущать его полезность, а не думать как впихнуть форму ввода карты в субтитры.
Есть несколько глобальных идей монетизации, но это уже будет совсем другой проект.
За всё время на проект потрачено только $5 гуглу за валидацию аккаунта разработчика (это если не считать моё время).
Ближайшие планы развития
- Интеграция с Amazone Prime Video
- Улучшать анализ текста, распознавать идиомы, жаргонизмы и т.п.
- Добавить фичи для постепенного отказа от субтитров, кажется, это и есть основная цель проекта.
Отбиваем бакс по полной!
На данный момент я особо не представляю, как продвигать проект, и буду рад любой помощи в этом.
Также не стесняйтесь оставлять обратную связь и фичреквесты.
Расширение стало официально доступно в Firefox Store
https://addons.mozilla.org/en-US/firefox/addon/easysubs/
А чего для Firefox не зальёте в стор им? Там же вообще бесплатно и просто. https://addons.mozilla.org/en-US/developers/ зарегаться да залить. Я то могу с github собрать и залить, а вот мама врядтли :)
Могу помочь если что, а так расширение топ!
Спасибо тебе!
Поставил и дико рад одной киллер-фиче: delay
На кинопабе иногда рассинхрон титров с дорожкой идёт, а сейчас всё по феншую
Вау! Спасибо большое - давно искал подобную штуку, а то переключатся во вкладку с гугл транслейтом изрядно надоело.
Кайф, пользоюсь до статьи. Вещь из разрядка всегда хотелось чтобы такая была
Тем более за использование effector'a респект!
Спасибо! Похоже на ororo.tv но с внятным переводом и без ожидания заливки новых сериалов 🚀
Круто, попробую маме показать, как раз язык учит. Она правда с телефона в основном смотрит, а там LPlayer. Кривенький, но вроде работает (плюс можно свои файлы скормить ему). Было бы хорошо и сюда так (в Plex интегрировать, например)
Крутой
жопыт. Даже и не думал что так можно залезать в Внутренности плееров! За это отдельно Респект!Очень круто!
Отличный проект. Буду юзать активно теперь
Супер! Юзаю уже несколько дней, очень доволен:)
😱 Комментарий удален его автором...
прекрасная прекрасная штука! респект!
А роад мап по фичам есть/планируется? Или пока задача распространения выше любых фичей
😱 Комментарий удален его автором...