Video.js v10 и Streaming Processor Framework

Кратко

Бесплатный open-source медиа-плеер Video.js, впервые выпущенный в 2010 году и сегодня обслуживающий десятки миллиардов просмотров видео в месяц, 10 марта 2026 года представил бета-версию десятой мажорной версии. Это полное переписывание с нуля, объединяющее четыре ранее независимых веб-плеера – сам Video.js, Plyr, Vidstack и Media Chrome – в единый модульный фреймворк с полноценной поддержкой React, TypeScript и Tailwind. Стандартный бандл стал на 88% меньше, чем в восьмой версии: плеер теперь собирается из небольших функциональных модулей, которые попадают в бандл только при импорте. Новый параллельный проект под названием Streaming Processor Framework (SPF) заменяет монолитный стриминговый движок набором компонентов, из которых можно собрать движок под конкретную задачу. Например, «простой HLS»-движок, собранный на базе SPF, в сжатом виде занимает около 12 килобайт против 156 килобайт у hls.js.

Эта статья объясняет, что собой на самом деле представляет Video.js v10, как устроен SPF, чем новый плеер отличается от восьмой версии и от hls.js / Shaka / dash.js, когда его уже можно использовать в продакшене, а когда стоит подождать general availability (команда планирует релиз на середину 2026 года), и какие практические вопросы по миграции нужно решить перед переходом на новую версию. К статье приложен одностраничный чек-лист оценки, который ваша команда может использовать на плановой встрече и выйти с чётким ответом – «да» или «нет».

Почему это важно

Если ваш продукт отдаёт HTML5-плеер в браузер – лендинг, OTT-каталог, сайт подкастов, образовательную платформу, приложение для smart TV, инструмент видеообзоров – выбор плеер-библиотеки определяет три вещи, с которыми вы будете жить годами: килобайты, которые каждый зритель скачивает до первого кадра, размер команды, поддерживающей интеграцию, и скорость, с которой вы внедряете новые фичи по запросу дизайна. До марта 2026 года эти три параметра для половины рынка, выбравшей Video.js, были слишком высокими: большой бандл, API середины 2010-х, дефолтная тема, которую никто не хотел использовать. Десятая версия меняет все три сразу, а SPF – четвёртое: сколько байт стоит ваш стриминговый движок. Будь вы продакт-менеджер, взвешивающий «мигрировать сейчас или ждать GA», фронтенд-инженер, сравнивающий Video.js v10 с React-нативными альтернативами вроде Vidstack или Media Chrome, или стриминговый инженер, проверяющий, может ли SPF заменить hls.js в плеерах, которые вы сейчас развертываете, – эта статья даёт структурную картину, цифры и фреймворк решений, которые можно взять на планировочную встречу. Предварительные знания по стримингу не требуются: каждый термин объясняется в момент первого упоминания.

Что такое Video.js v10 в одном абзаце

Video.js v10 – это полное переписывание open-source библиотеки медиа-плеера, которая с 2010 года выпускалась под именем video.js. Теперь она переосмыслена как модульный фреймворк, а не монолитный объект-плеер. Все предыдущие версии – от 1.x до 8.x – строились вокруг единственного конструктора videojs(element), возвращавшего объект Player, в котором были собраны все функции библиотеки: от кнопки воспроизведения до меню субтитров и движка адаптивного битрейта. В десятой версии плеер собирается из трёх независимых компонентов: хранилища состояния (на основе паттерна store-слайсов из Zustand), медиакомпонента (сам элемент <video> или один из его специализированных аналогов – например, компонент для YouTube или background-видео) и пользовательского интерфейса, построенного из неоформленных примитивов в стиле Radix и Base UI (Video.js Project, Video.js v10 Beta: Hello, World (again), 10 марта 2026).

Плеер создаётся вызовом createPlayer({ features: [...] }), и в итоговый бандл попадают только те функции, которые реально используются в приложении: если вы не импортируете фичу audio, в бандл не попадёт код управления громкостью и отключением звука. Стандартный видеобандл в сжатом виде (gzip) стал на 88% меньше по сравнению с аналогом из восьмой версии – 25 килобайт против 75. Бета-версия вышла 10 марта 2026 года; команда планирует выйти на general availability к середине 2026 года при условии достижения функционального паритета с легаси-базами Plyr, Vidstack, Media Chrome и Video.js v8 как минимальный порог для GA.

Нажмите, чтобы увеличить

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

Почему вообще произошёл этот рерайт

Video.js был создан шестнадцать лет назад, чтобы помочь вебу перейти с Adobe Flash на новый HTML5-элемент <video> – задачу, с которой он справился настолько хорошо, что к концу 2010-х стал стандартным open-source плеером на значительной части веба. На его основе построен основной продукт Brightcove, им пользовались все OTT-пилоты кабельных провайдеров, а множество небольших видеосайтов выбрали его просто потому, что больше не было подходящих альтернатив. Цена, которую заплатила кодовая база за раннее распространение, – публичный API, отражающий JavaScript начала 2010-х: глобальный конструктор videojs(), прототипное наследование для каждого компонента, jQuery-подобные DOM-утилиты и модель расширения «создай экземпляр плеера и переопредели метод», которая не выдержала появления бандлеров, tree-shaking и нативной композиции в React (Heffernan, S., Video.js v10 Beta: Hello, World (again), 10 марта 2026). Экосистема сторонних плагинов закрепила этот паттерн – как только тысячи плагинов начали полагаться на возможность расширять прототип Player, команда уже не могла провести рефакторинг, не сломав всё.

Технические последствия – дефолтный бандл, который только рос, но никогда не уменьшался. Даже после того как в 2018 году команда вынесла adaptive bitrate streaming в опциональный плагин videojs-http-streaming и разрешила импортировать video.js/core, чтобы его исключить, большинство установок продолжали подтягивать полный бандл – частично из привычки, частично потому что дефолтный <script>-теговый сетап загружал именно полный файл. К середине 2020-х дефолтный v8 с поддержкой adaptive bitrate весил около 700 килобайт в минифицированной форме и чуть больше 200 килобайт в сжатом виде gzip, в то время как HTML5-элемент <video> не требует никаких дополнительных ресурсов. Именно этот разрыв десятая версия была создана, чтобы закрыть.

Политический контекст тоже важен. Параллельно с Video.js развивались три других open-source плеера: Plyr от Сэма Поттса, ориентированный на визуальный дизайн; Vidstack, создающий React-примитивы; и Media Chrome от Mux, построенный на основе HTML web components. К 2025 году четыре проекта разделяли мейнтейнеров (Mux нанимает нескольких разработчиков, работающих над всеми четырьмя кодовыми базами), спонсоров (Mux спонсирует Video.js и разработал Media Chrome внутри своей компании) и общую фрустрацию пользователей: одни и те же инженерные решения по сути переоткрывались четыре раза с незначительно отличающимися API. Рерайт версии 10 объединил их. По подсчётам самого проекта, совместное сотрудничество собрало под одну крышу 75 000 звёзд на GitHub и обеспечивает десятки миллиардов просмотров видео в месяц (Video.js Project, Video.js v10 Beta, 10 марта 2026). Четыре легаси-проекта продолжают выпускать обновления – Plyr 4, стабильная версия Vidstack, Media Chrome – но их дальнейшее развитие теперь сосредоточено внутри репозитория videojs/v10.

Новая архитектура простым языком

Работающий Video.js v10 – это небольшой граф из трёх независимых компонентов, объединённых контекстом Player.Provider – новым публичным интерфейсом библиотеки, заменяющим устаревший объект Player. Эти компоненты называются State, Media и UI, и причина, по которой они находятся в отдельных файлах, заключается в том, что их можно использовать независимо друг от друга.

State – это небольшой реактивный хранилище по паттерну store-слайсов из Zustand, в котором хранится всё, на что должно реагировать приложение: находится ли медиа на паузе, где сейчас курсор воспроизведения, какой буфер заполнен, включены ли субтитры, какая громкость и какой текущий ABR-вариант. Функциональность добавляется в хранилище путём передачи массива features в createPlayer() – например, features: [features.playback] подключает только слайс воспроизведения/паузы, features: videoFeatures – полный видеослайс (аудио, субтитры, время, ABR-сигналы, обработка ошибок), а features: backgroundVideoFeatures – минимальный автозапуск без аудио (Video.js Project, Concepts: Overview, доступ 2026-05-25). Если нужной функции нет в массиве – её код не попадает в бандл. Именно это структурное решение объясняет, почему «приветствие мира» на React из анонсного поста весит менее пяти килобайт в сжатом виде.

Media – это компонент, который непосредственно отображает байты. Он может быть простым <Video src="…">, оборачивающим HTML5-элемент <video>, или использоваться для аудио-only (<Audio>), для видео с автовоспроизведением без звука на лендинге (<BackgroundVideo>), либо представлять собой форматно-специфичный компонент (HLS, DASH) или компонент, привязанный к сервису (YouTube, Vimeo, Mux), которые команда планирует интегрировать в ту же архитектуру (Video.js Project, Concepts: Overview, доступ 2026-05-25). Media-компонент предоставляет единый state-стора API независимо от оборачиваемого источника – остальной плеер не должен знать, работает ли он с нативным HLS, с инстансом hls.js или с движком, собранным через SPF.

UI – это набор unstyled-примитивов, каждый из которых генерирует ровно один HTML-элемент и применяет каждое визуальное свойство в виде реального CSS-класса, полностью под вашим контролем. В v8 легаси-элемент ползунка таймлайна был псевдоэлементом вложенного дочернего элемента, который стилизовали через переопределение font-size для изменения размеров. В v10 ползунок таймлайна – это <TimeSlider.Thumb className="slider-thumb">, и вы задаёте width: 0.75rem; height: 0.75rem; напрямую. Паттерн заимствован у shadcn/ui и Radix: UI-примитивы намеренно избыточны, поскольку именно избыточность обеспечивает полный контроль над разметкой и CSS без сопротивления со стороны плеера (Video.js Project, Video.js v10 Beta, 10 марта 2026).

Нажмите, чтобы увеличить

Preset – это уже готовая комбинация трёх параметров. В бета-версии доступны три пресета: videoFeatures для обычного видео на сайте, audioFeatures для подкаст-стиля аудио и backgroundVideoFeatures для muted hero-видео на лендинге – команда планирует добавлять новые по мере получения обратной связи. Вы выбираете пресет, наиболее подходящий под ваш плеер, применяете его и далее настраиваете под себя.

Паттерн композиции означает, что плеер v10 может оказаться в любом месте на спектре – от «пятикилобайтного hello world» до «полнофункционального стриминг-плеера с ABR, DRM, рекламой и аналитикой». Случай с пятью килобайтами – это React-фрагмент из анонсного поста:

import { createPlayer, features } from '@videojs/react';
import { Video } from '@videojs/react/video';

const Player = createPlayer({ features: [features.playback] });

function App() {
  const store = Player.usePlayer();
  const paused = Player.usePlayer((s) => s.paused);
  return (
    <Player.Provider>
      <Player.Container>
        <Video src="video.mp4" />
        <button onClick={() => (paused ? store.play() : store.pause())}>
          {paused ? 'Play' : 'Pause'}
        </button>
      </Player.Container>
    </Player.Provider>
  );
}

Полнофункциональный случай – это тот же вызов createPlayer, но с полным набором функций, подключённым стриминговым движком и медиакомпонентом, поддерживающим ABR.

Streaming Processor Framework, объяснённый

SPF – Streaming Processor Framework – это отдельный sister-проект к Video.js v10, который для стримингового движка делает то же, что v10 делает для плеера: заменяет монолитную библиотеку набором маленьких, легко комбинируемых компонентов, из которых можно собрать движок под конкретную задачу.

Стриминговый движок – это часть веб-плеера, которая выполняет работу, которую браузер не может сделать нативно для адаптивных форматов: парсит манифест (небольшой текстовый индексный файл со списком доступных видеочанков), скачивает сегменты (короткие видеофайлы длительностью 2–6 секунд, на которые ссылается манифест), передаёт их в браузерный API Media Source Extensions для декодирования, определяет поддерживаемые кодеки и отбрасывает неподдерживаемые рендиции, управляет буфером, запускает ABR-алгоритм, выбирающий следующее качество для загрузки, согласовывает ключи дешифрации для контента под DRM и вставляет server-side рекламные слоты.

В hls.js, Shaka Player, dash.js и легаси-плагине VHS для Video.js весь этот функционал поставляется как единая библиотека – обрезать её без форка кода невозможно.

SPF переворачивает привычную модель. Движок представляет собой реестр функциональных компонентов, и вы формируете нужный движок, перечисляя те компоненты, которые требуются. Приложение для стриминга коротких видео в формате CMAF без DRM и рекламы собирает движок, включающий CMAF-парсер, загрузчик сегментов, простое ABR-правило и адаптер MSE source buffer – и больше ничего. Приложение для платного OTT-стриминга с поддержкой нескольких систем DRM добавляет компоненты Widevine, PlayReady и FairPlay. Приложение с серверной вставкой рекламы включает парсер маркеров SSAI. Исходное дерево движка в каждом случае остаётся неизменным; разница заключается лишь в том, какие импорты использует проект (Video.js Project, Video.js v10 Beta, 10 марта 2026).

Нажмите, чтобы увеличить

Числа из анонсного поста – это доказательство. SPF-собранный движок для случая «simple HLS» – только CMAF, on-demand, без рекламы и DRM – в сжатии gzip занимает 12,1 килобайта (Video.js Project, Video.js v10 Beta, 10 марта 2026). Сравнимая сборка hls.js-light – минимальный вариант, который можно получить из hls.js после удаления DRM, субтитров, альтернативного аудио, CMCD и interstitials – в gzip весит 103 килобайта. Полная версия hls.js – 156 килобайт; Shaka – 239 килобайт; dash.js – 294 килобайта. Если посчитать: 12,1 разделить на 156 – получается чуть меньше 8 процентов, то есть SPF-собранный движок для simple-HLS примерно в восемь раз легче стандартной сборки hls.js. По сравнению с hls.js-light соотношение составляет 12 процентов.

У этого подхода есть два важных предупреждения, которые анонсный пост оговаривает отдельно, а статья повторяет – потому что они определяют, подходит ли SPF для конкретного проекта сегодня. Первое: SPF – не готовая замена hls.js, Shaka или dash.js в сложных сценариях. Бета-версия SPF поддерживает простой ABR поверх CMAF, но пока не включает DRM, рекламу и низколатентный стриминг в реальном времени. Сама команда формулирует это так: «наша ближайшая цель – не заменить полнофункциональные движки вроде HLS.js в сложных задачах стриминга» – эту фразу инженерная команда должна прочитать вслух перед тем, как внедрять SPF в продакшн с поддержкой DRM. Второе: v10 работает с устоявшимися движками без изменений. Сегодня вы можете использовать v10 вместе с hls.js, Shaka или dash.js в качестве стримингового движка (в анонсном посте указано, что связка v10 + hls.js занимает 164 килобайта после сжатия gzip – на 20 процентов меньше, чем v8 + VHS, которые занимают 203 килобайта при той же нагрузке). SPF – это выбор, к которому стоит обращаться, когда сценарий достаточно прост, чтобы экономия оправдывала компромисс по зрелости решения.

Как v10 сравнивается с предыдущей версией и с другими веб-плеерами

Команда стриминговых инженеров выбирает плеер примерно по шести критериям: размер базового бандла, размер бандла с ABR, история использования фреймворка, возможности кастомизации, зрелость экосистемы и прозрачность дорожной карты. Таблица ниже объединяет данные из анонсного поста и публичные сигналы из roadmap, формируя единую картину на май 2026 года.

Две ячейки заслуживают жирного. Video.js v10 с SPF потребляет на 81% меньше ресурсов при нагрузке simple-HLS, чем Video.js v8 с VHS при той же нагрузке – одно это соотношение уже является причиной, по которой greenfield-проект, стартующий в мае 2026 года, должен провести оценку на основе v10 ещё до даты GA. И Video.js v10 – единственный из пяти плееров с полноценной поддержкой React, TypeScript и Tailwind: все остальные библиотеки либо предлагают обёртку, отстающую от основного API, либо оставляют интеграцию с фреймворком на усмотрение пользователя. Для React-стека это самая значительная разница в продуктивности с первого дня разработки.

Ячейка, которая может вас затормозить, – production-зрелость: beta на 10 марта 2026. Команда стремится к general availability к середине 2026 года и отмечает, что API пока нестабилен. Правильное толкование этого сигнала зависит от того, проект ли это с нуля (greenfield) или миграция существующей v8-установки – следующий раздел рассматривает решение вслух.

Нажмите, чтобы увеличить

Пример с разбором миграционной арифметики

Нетехнический читатель должен увидеть аргумент о размере бандла с конкретными цифрами, потому что на нём держится вся статья. Возьмём маркетинговый лендинг с HLS-видео продукта – одна рендиция, без рекламы, без DRM, субтитры включены, автовоспроизведение на скролле с отключённым звуком. Сегодня страница загружает Video.js v8 с VHS, включённым по умолчанию: 202,7 килобайта в сжатии gzip. При типичной скорости загрузки 3G – 200 килобайт в секунду – это даёт примерно одну секунду чистого времени скачивания до того, как код плеера начнёт выполняться. Арифметика вслух:

v8 + VHS gzipped:            202,7 кБ
3G скорость:                 200 кБ/с
Время скачивания:            202,7 / 200 ≈ 1,01 с

Та же страница на Video.js v10 с SPF для случая simple-CMAF: 38,7 килобайта в gzip.

v10 + SPF gzipped:           38,7 кБ
3G скорость:                 200 кБ/с
Время скачивания:            38,7 / 200 ≈ 0,19 с

Страница экономит около 820 миллисекунд сетевого времени при каждой холодной загрузке. На маркетинговой странице, где отказы растут на 9% с каждой дополнительной секундой загрузки (Akamai, State of Online Retail Performance, исторические данные – приведены иллюстративно), эта экономия сама по себе окупает миграцию. Картина менее драматична для OTT-приложения после авторизации, где плеер загружается один раз, а пользователь смотрит контент часами, – но эффект всё равно присутствует и накапливается на каждом устройстве.

Угол ИИ

Анонсный пост Стива Хеффернана выделяет аспект, который остальная экосистема плееров до сих пор не обсуждала открыто: команда проектировала кодовую базу v10 с учётом понимания её ИИ-агентами, а не только людьми. Основная идея в том, что чем больше фронтенд-кода генерируется с помощью ИИ, тем выше вероятность, что плеер-библиотека будет понятна агенту без чрезмерных затрат на документацию. Три конкретных артефакта v10 поддерживают эту цель (Video.js Project, Video.js v10 Beta, 10 марта 2026):

Файл llms.txt верхнего уровня, предоставляющий любому ИИ-агенту курированную карту документации с низким контекстом – указывающую агенту на нужные страницы без необходимости загружать всё дерево навигации. Отдельный framework-специфичный файл llms.txt для документации React. Markdown-версии каждой страницы документации, выдаваемые по согласованию контента: если агент отправляет запрос с заголовком Accept: text/markdown, сервер возвращает исходный Markdown вместо отрендеренного HTML, что позволяет сэкономить агенту ресурсы на парсинге стилизованной страницы для извлечения текста. И растущий набор скиллов, ориентированных на работу с агентами, закоммиченных под .claude/ и .zed/ в репозитории (отображаются в списке файлов репозитория v10), которые команда использует внутри и планирует опубликовать для внешнего использования агентами.

Угол стоит подсветить, потому что ни одна другая веб-плеер-библиотека не представила эквивалентных артефактов к 2026 году. Если ваша инженерная команда использует ИИ-агентов для работы с интерфейсами – а данные Фора Софт по проектам в сфере e-learning, OTT и видеонаблюдения, завершённым за последний год, показывают, что тренд на это набирает обороты, – то кодовая база v10 станет той самой, на основе которой ваши агенты будут генерировать корректный код быстрее всего.

Частая ошибка: отождествление v10 и SPF

Самая частая путаница в обсуждениях начала 2026 года – считать, что Video.js v10 и SPF – это одно и то же. Это не так. Video.js v10 – это видеоплеер, а SPF – стриминговый движок. Вы можете использовать v10 с hls.js, Shaka, dash.js или устаревшим VHS, а SPF можно интегрировать как стриминговый движок в другие плееры или использовать автономно. Два проекта имеют общую команду разработчиков, но живут в отдельных ветках кода и следуют разным циклам релизов.

Причина разделения – различия в уровне зрелости: плеер v10 уже близок к general availability по функционалу, который ранее обеспечивал легаси-версия v8, тогда как стриминговый движок SPF находится в бета-стадии и пока ориентирован на простые сценарии ABR. Поддержка DRM, рекламы и low-latency live остаётся в дорожной карте.

Команда сегодня может спокойно запустить v10 + hls.js в продакшене и подключить SPF позже, когда его возможности станут достаточными для задач проекта. А вот команда, которая перепутает эти два компонента, либо переоценит возможности SPF, либо недооценит готовность v10. Обе ошибки – дорогие.

Где здесь Фора Софт

Мы девятнадцать лет разрабатывали браузерные видеоплееры в вертикалях, где Video.js исторически был стандартным open-source решением – платформы видеоконференций с воспроизведением записей, OTT- и интернет-ТВ-каталоги, e-learning курсы с таймстампированными викторинами, телемедицина с разбором консультаций, системы видеонаблюдения с мультистримовыми дашбордами и AR/VR-опыт, которому нужен резервный плеер для плоского видео. Плеер редко бывает самой заметной частью продукта, но он – один из самых громких индикаторов инженерного качества в тот момент, когда пользователь нажимает «воспроизвести».

Наша практика в 2026 году: начинать новый клиентский проект с оценки Video.js v10 + SPF, v10 + hls.js, Shaka Player и нативных путей для iOS / Smart TV с учётом конкретных требований к функциональности и DRM. Аргументы в пользу размера бандла и React-центричности в этой статье склоняют выбор в пользу v10 для большинства новых браузерных проектов, а соображения стоимости миграции побуждают существующие установки на v8 оставаться на текущей версии до конца поддержки (GA) и планировать переход осознанно.

Ключевые выводы

• Video.js v10 – это полная переработка с нуля, выпущенная в виде бета-версии 10 марта 2026 года, с планируемой датой выхода в general availability – середина 2026 года.
• Стандартный видеобандл составляет 25,1 кБ в gzip – на 88% меньше, чем 75,2 кБ у Video.js v8.
• Архитектура разделена на три независимые части: хранилище состояния (State store), медиакомпонент и UI-примитивы, объединённые через контекст Provider.
• Framework для обработки стриминга (Streaming Processor Framework, SPF) позволяет собирать стриминговый движок из функциональных компонентов; простая композиция HLS занимает 12,1 кБ в gzip против 155,9 кБ у hls.js.
• В v10 реализована полноценная поддержка React, TypeScript и Tailwind – это единственный крупный веб-плеер в 2026 году, предлагающий такую интеграцию «из коробки».
• Для новых React-проектов оптимальным выбором является v10 + SPF или v10 + hls.js; для существующих установок v8 рекомендуется оставаться на текущей версии до выхода GA.

Что читать дальше

• hls.js: подробный разбор
• Shaka Player: подробный разбор
• Media Source Extensions (MSE): как устроен каждый веб-плеер изнутри