Расширение Chrome, чтобы сделать его быстрее и проще

Видео и видеореклама HTML5 - сложные технологии. Они зависят от широкого круга технических партнеров, придерживающихся слабо стандартизированных и часто возникающих систем, которые постоянно меняются по прихоти постоянно меняющейся поддержки браузеров и политик.

Наш проигрыватель HTML5 должен работать во всем диапазоне браузеров, чтобы обрабатывать целый ряд методов защиты контента. Он также должен учитывать различные типы потоковой передачи, форматы файлов и успешно переваривать и представлять контент из множества сервисов транскодирования. Эти службы создают различные и иногда неправильно отформатированные представления, из-за которых игроки заикаются и ломаются. Еще больше сложности вносится при монетизации; рекламные сети, рекламные клиенты и поставщики рекламы могут создавать самые разные ответы XML VAST, что может приводить к различным ошибкам.

Эта экосистема хрупка, и бывает трудно понять, где и почему что-то не работает. К счастью, у JW Player есть надежный API, подробные аналитические сервисы и выразительная система событий, которые при правильном использовании представляют собой мощный набор инструментов. Без глубоких знаний этих систем это может быть ошеломляющим (что я слишком хорошо знаю по моим первым нескольким неделям в видео пространстве). Такие вопросы, как «где искать», «какие шаги предпринять» и «какие вопросы задавать» сложно сформулировать, и часто бывает сложно определить, где именно в цепочке что-то сломалось.

Снижение сложности

Инновации поощряются в JW Player, и во время нашего ежеквартального хакатона мы с несколькими инженерами начали работу над продуктом для повышения доступности, создав интуитивно понятный комплексный инструментарий для отладки и устранения неполадок экземпляра JW Player. Наша миссия заключалась в том, чтобы создать решение, позволяющее любому пользователю достичь следующих целей:

  1. Упростите понимание того, что JW Player делает на странице.
  2. Повысьте доступность богатого набора функций плееров.
  3. Уменьшите барьер, чтобы потреблять исчерпывающую информацию, которую он излучает, и свести наши «лучшие практики» по устранению неполадок в одно нажатие кнопки.

Спустя несколько месяцев мы с гордостью представляем JW Lens.

Объектив JW

JW Lens - это расширение для браузера, созданное с использованием комбинации прослушивателей событий JW Player и методов API, API браузера, Vue.js и VueX. JW Lens предоставляет пользователям интерфейс на основе вкладок, предлагающий отличный набор функций и возможностей. На высоком уровне эти вкладки предоставляют следующие функции:

  • Обзор: предоставляет высокоуровневый контекст экземпляра JW Player и его реализации на странице. Сюда входит текущий URL-адрес медиафайла, состояние буфера плеера и другая подобная информация.

  • Конфигурация: обеспечивает быстрый доступ к конфигурации, используемой для создания экземпляра проигрывателя, и позволяет пользователям редактировать конфигурацию и повторно инициализировать проигрыватель с измененной конфигурацией.

  • Устранение неполадок. Предоставляет сводку ошибок (ошибки проигрывателя, ошибки мультимедиа и ошибки рекламы), а также проверку конфигурации, обеспечивая мгновенную обратную связь по вашей конфигурации, включая любую неправильную, недопустимую или отсутствующую конфигурацию. опции.
  • Автоматическая отладка рекламы: обновляет страницу определенное пользователем количество раз, регистрируя эффективность рекламы для каждого «запуска» и выводя подробный отчет в файл CSV. Этот отчет включает в себя сводную информацию о количестве показов и ошибок рекламы, а также подробную информацию о каждом запуске, включая конкретные коды ошибок рекламы и эффективность ставок игроков.

  • События: фильтруемая лента событий и сопутствующих данных от игрока в режиме реального времени.

  • Аналитика: фильтруемый поток аналитических запросов в реальном времени, отправляемых Google Analytics, вместе с сопутствующими данными.
  • QoE: дает представление о производительности проигрывателя и страницы, на которой он работает, предоставляя специфичные для игрока метрики, такие как время до первого кадра, время настройки проигрывателя и измерения страницы «запрос на готовность», например а также метрики на уровне страницы, такие как время до интерактивности, событие загрузки DOM и событие загруженного контента DOM.

  • Отчет. Быстро соберите всю информацию, необходимую команде поддержки JW Player для устранения неполадок. Предназначен для отправки вместе с заявкой в ​​службу поддержки, чтобы упростить процесс поддержки.

  • Открытая тестовая страница: позволяет быстро протестировать проигрыватели производственной среды в продезинфицированной «пустой» среде (без какого-либо внешнего CSS или JavaScript). Это может помочь определить, связана ли проблема, с которой вы столкнулись, с проблемой на рабочей странице или с самим проигрывателем. Отчеты, полученные с помощью отчета, можно загрузить с помощью кнопки Загрузить отчет, открыв ту же самую простую страницу с информацией, содержащейся в отчете.

Технические препятствия

Во время разработки JW Lens мы столкнулись с двумя всеобъемлющими вопросами: как сделать интерфейс максимально интуитивно понятным и как включить более надежную функциональность в контекст расширения. В обоих случаях наша команда разработчиков имела небольшой опыт работы.

Первой проблемой, с которой мы столкнулись, было определить, можем ли мы использовать фреймворк JavaScript в контексте расширения браузера. Не многие из нас раньше работали с Vue.js, но, поскольку проект родился после недели хакеров, мы были рады получить некоторый практический опыт работы с фреймворком. Узнав больше о пакетах сборки расширений, мы обратились к Webpack, чтобы быстро создать нашу первую итерацию, приложение Vue «Hello World», дающее нам основу для начала создания функциональности, которую мы стремились предоставить.

Следующим шагом было начало сбора необходимых данных из экземпляра игрока на странице. В типичном процессе отладки, который в значительной степени зависит от инструментов разработчика Chrome и тестовых страниц, это просто включает настройку прослушивателей событий и вызов любых методов API по мере необходимости - стандартное выполнение JavaScript. Однако в контексте расширения браузера это оказалось более трудным из-за характера архитектуры браузера.

Два основных сценария, составляющих расширение, - это сценарии фона и содержимого. Эти сценарии живут вне контекста главного окна и не разделяют пространство имен со страницей. Поскольку пространства имен были отдельными, нам не удалось настроить слушателей для проигрывателя или вызвать методы API проигрывателя. Мы определили, что обходным путем было использование внедрения сценария. Хотя мы не могли настроить слушателей из содержимого или фоновых сценариев, мы могли получить доступ к документу и добавить дополнительный сценарий, который будет выполнять эти обязанности. Этот сценарий содержал сообщения браузера, которые перенаправляли соответствующие данные обратно в сценарий содержимого для очистки, манипулирования и рендеринга.

Эффективное использование хранилища браузера было еще одним препятствием, лежащим в основе поведения автоматических отчетов по рекламе и функциональности «пустой страницы» (новая страница открывается только с выбранным проигрывателем и его конфигурацией, и ничего больше в DOM). Вместо того, чтобы полагаться на локальное хранилище браузера, расширениям предоставляется доступ к двум различным вариантам хранилища - storage.local и storage.sync; оба предлагают разный объем хранилища, но доступны через один и тот же асинхронный API. С помощью этих решений мы смогли лучше контролировать состояние приложения, сохранять данные между обновлениями окон и передавать соответствующую информацию, необходимую для изменения композиции проигрывателя и сопутствующих деталей в новой вкладке.

Когда мы начали тестировать наши POC на производственных площадках наших клиентов, мы быстро поняли, что нам также необходимо быть очень конкретными в наших правилах CSS. JW Players работают на сотнях тысяч доменов, и нашей целью было добиться того же опыта на каждой из этих страниц. Чтобы упростить этот процесс, мы приняли LESS, чтобы воспользоваться преимуществами его вложенной структуры, что позволяет нам применять мелкие детали к нашим элементам, избегая конфликтов с CSS клиентов - то, что из-за количества сайтов, с которыми мы работаем, мы продолжаем дорабатывать сегодня.

Что дальше?

JW Lens в настоящее время находится в стадии закрытого бета-тестирования, но мы очень довольны достигнутым прогрессом и ценностью, которую он уже предоставил внутренним пользователям, а также издателям. Когда мы смотрим на то, что будет дальше, мы хотим продолжить сбор отзывов от первых пользователей и доработать функциональность расширения, чтобы соответствовать нашей миссии по повышению доступности. Наша цель состоит в том, чтобы заменить рутинное устранение неполадок видео автоматизированным и обнаруживать «скрытые жемчужины» информации, которую игрок уже фиксирует, но может быть нелегко идентифицировать.

Мы также в восторге от среды этого приложения. Согласно нашему исследованию, расширения браузера не являются широко распространенным методом предоставления таких функций, особенно в этой отрасли. Мы надеемся, что работа, проделанная с JW Lens, откроет двери для разработки других инструментов, которые сделают наш продукт максимально доступным для любого пользователя.

Если вы заинтересованы в участии в пробной версии Lens, предоставлении отзывов и помощи в планировании будущего приложения, сообщите нам, и мы свяжемся с вами для получения дополнительной информации.