Видеообучение в формате mobile-first

Кратко

Большинство ваших учащихся уже учатся с телефона, поэтому mobile-first – это не уменьшенная копия десктопного курса, а исходная точка проектирования; десктоп становится вариантом с большим экраном. Подход «сначала телефон» меняет пять конкретных вещей: видеоплеер (работает в портрете, контролы достаточно крупные, чтобы попасть пальцем), формат контента (короткие, часто вертикальные микроуроки), трафик (скачивание только по Wi-Fi и ограничение качества, чтобы не тратить пакет учащегося), фоновое и офлайн-воспроизведение (слушать с заблокированным экраном, смотреть без сети) и доступность (тач-цели не меньше 24×24 px, свободный поворот экрана, субтитры). Технологии здесь обычные: стриминг (HLS, MPEG-DASH), учебные записи (xAPI и его профиль cmi5, которые копятся офлайн и синхронизируются при появлении связи), веб-API (Media Session API для контролов на экране блокировки) и доступность (WCAG 2.2). Разница лишь в том, что телефон – основной сценарий, а не то, о чём вспоминают в последний момент. Самый дешёвый рычаг – первое же архитектурное решение: PWA, нативное приложение и адаптивный сайт дают разные офлайн- и фоновые возможности за разные деньги.

Зачем это читать

Если курс проектировали на ноутбуке, а «проверили на мобильном» в самом конце, его делали в обратном порядке: сегодня большая часть обучения происходит на телефоне. Статья написана для L&D-директора, основателя EdTech-стартапа, методиста или продакт-менеджера, который решает, сколько вкладывать в мобильный опыт и что просить у инженеров. Разберём пять вещей, которые меняет телефон, – плеер, формат, трафик, офлайн- и фоновое воспроизведение, доступность – с цифрами для оценки каждой и стандартами, на которых их строят. Сетевые механизмы описаны в разделе Фора Софт Видеостриминг, а плохая связь – в статье Учебное видео на слабых сетях. Здесь речь о мобильном продукте: во что обходится подход «сначала телефон», что он даёт и каких учащихся помогает удержать.

Телефон – аудитория по умолчанию

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

Для школ и колледжей мобильный канал к тому же задан регулированием. Если обрабатываются персональные данные учеников, общеобразовательные организации и организации СПО обязаны использовать государственные информационные системы и национальный мессенджер MAX (ч. 3.1 ст. 16 273-ФЗ) [9]; правила электронного обучения прямо называют этот сервис каналом взаимодействия участников (п. 4.1 и 9 ПП № 1678 в ред. ПП № 517) [20], а школьный «Сферум» в октябре 2025 года переехал внутрь MAX [24]. Учебный продукт для этого сегмента должен корректно открываться на телефоне по ссылке из мессенджера: это его главная точка входа.

Десктопный курс рассчитан на большой экран, мышь с точностью до пикселя, розетку и, как правило, безлимитный Wi-Fi. На телефоне всё наоборот: маленький экран в одной руке, палец вместо курсора, садящаяся батарея и часто лимитный тариф. Mobile-first – это подход, при котором сначала проектируют под этот более жёсткий набор ограничений, а десктоп получается простым частным случаем с большим экраном. Типичная ошибка – считать телефон уменьшенным десктопом. Итог – крошечные контролы, горизонтальное видео, которое не использует портретный экран, и загрузки, незаметно съедающие чужой трафик.

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

Изменение 1. Мобильный видеоплеер

На телефоне видеоплеер – это и есть продукт, и от десктопного он отличается в трёх важных отношениях.

Первое – ориентация. Телефон обычно держат вертикально, поэтому учебный плеер должен работать в портрете (видео в верхней части экрана, транскрипт, заметки или список следующих уроков ниже) и разворачиваться на весь экран, когда учащийся поворачивает телефон горизонтально. Жёсткая фиксация одной ориентации – это и неудобство, и нарушение доступности, о чём ниже.

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

Третье – доставка должна быть адаптивной и опираться на возможности платформы. Записанные уроки стоит отдавать адаптивным битрейтом (ABR): урок готовится в нескольких вариантах качества, и плеер сам выбирает тот, который выдерживает канал. Стандарты для этого открытые – HLS (HTTP Live Streaming, интернет-стандарт RFC 8216) и MPEG-DASH (ISO/IEC 23009-1) [2][3]. Мобильные платформы рассчитаны именно на них: системный плеер AVPlayer в iOS воспроизводит HLS нативно, а современная библиотека Android Media3 / ExoPlayer воспроизводит HLS, DASH и Smooth Streaming и включает менеджер загрузок, который докачивает файлы в фоне даже при закрытом приложении [10]. Механика ABR описана в подробном объяснении адаптивного битрейта; здесь важно, что мобильный плеер строят на этих стандартах, а не изобретают доставку заново.

Изменение 2. Форматы под телефон: вертикаль и микроуроки

Экран телефона вытянут, а сеансы на телефоне короткие. Отсюда два изменения формата.

Вертикальное (портретное) видео занимает весь экран так, как учащийся уже держит телефон, без чёрных полос и без поворота. Формат знаком по соцсетям и коротким роликам, и разница в вовлечённости заметная: по одной широко цитируемой статистике платформ зрители до девяти раз чаще досматривают вертикальное видео, чем горизонтальное, а управлять им проще одним большим пальцем [4]. Вертикаль подходит не всему: для широкого демо ПО или разбора таблицы всё ещё нужен горизонтальный кадр. Но для «говорящей головы», демонстраций и коротких инструкций портрет – естественный формат.

Микрообучение меняет длину: тему дробят на короткие уроки с одной мыслью вместо часовых лекций. Практический оптимум, который называют руководства по корпоративному обучению 2026 года, – примерно 3–7 минут на урок: каждый отвечает на один вопрос или целиком показывает один процесс и заканчивается проверкой знаний [5][6]. Короткие уроки помещаются в паузы дня (дорога, перерыв, пара минут перед встречей) и хорошо ложатся на модель трекинга ниже, потому что каждый короткий урок – удобная единица для отметки «пройдено». Подробнее о выборе форматов – в статье Форматы обучающего видео. Главная ошибка здесь – механический перенос: выложить 60-минутную запись вебинара на телефон без изменений и удивляться, что её никто не досматривает.

Изменение 3. Берегите трафик учащегося

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

Пятиминутный микроурок в трёх распространённых вариантах качества:

• 720p при ~2,5 Mbps: 2,5 Mbps × 300 секунд = 750 мегабит ÷ 8 = около 94 МБ [11].
• 480p при ~1,2 Mbps: 1,2 × 300 = 360 мегабит ÷ 8 = около 45 МБ [11].
• Только аудио, речь Opus при 24 kbps: 24 kbps × 300 = 7 200 килобит ÷ 8 = около 0,9 МБ [1].

Теперь умножим на библиотеку из 30 уроков. Стриминг в 720p по сотовой сети – это примерно 30 × 94 МБ ≈ 2,8 ГБ. Если один раз скачать библиотеку в 480p по домашнему Wi-Fi, получится 30 × 45 МБ ≈ 1,35 ГБ, но ни одного мегабайта сотового трафика, и смотреть её в дороге можно бесплатно. В виде аудио вся библиотека займёт около 30 × 0,9 МБ ≈ 27 МБ, то есть почти ничего. Поэтому мобильный плеер должен отдать этот выбор учащемуся: показывать объём каждого варианта качества до скачивания, дать переключатель «только Wi-Fi» и режим экономии трафика в сотовой сети. Такие настройки есть у популярных видео- и музыкальных сервисов и в самих операционных системах (режим экономии данных в iOS и Android), так что учащиеся их ожидают [7][8]. Экономика доставки подробнее разобрана в статьях Учебное видео на слабых сетях и Масштабирование доставки: CDN, транскодинг и стоимость при больших объёмах.

Изменение 4. Фоновое аудио и офлайн-скачивание

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

Фоновое аудио: урок продолжает звучать, когда учащийся блокирует телефон или переключается на другое приложение, и видеокурс превращается в подкаст для дороги или спортзала. Веб-платформа поддерживает это напрямую через Media Session API – спецификацию W3C, которая позволяет веб-приложению показывать название урока и контролы на экране блокировки и реагировать на аппаратные кнопки воспроизведения, паузы и перемотки [12]. Аудиопоток весит мало: кодек Opus (аудиостандарт веба, RFC 6716) передаёт разборчивую речь на 16–32 kbps и подстраивается под канал пакет за пакетом [1]. Модуль можно дослушать в наушниках, с телефоном в кармане, почти не расходуя трафик.

Офлайн-скачивание – главный приём мобильного обучения для всех, у кого ненадёжная или лимитная связь: скачать урок по Wi-Fi и посмотреть позже вообще без сети. С ним связаны один продуктовый вопрос и один инженерный. Продуктовый – это UX: понятные кнопки скачивания, видимая очередь, индикатор занятой памяти и автоочистка просмотренного. Именно для этого сделаны менеджер загрузок Android Media3 и офлайн-HLS в iOS [10]. Инженерный вопрос возникает, только если контент защищён. Видео под управлением цифровыми правами (DRM), то есть шифрованием, которое не даёт скопировать платный курс, можно скачать, только если DRM выдаёт постоянную (офлайн) лицензию – ключ, который хранится на устройстве и позволяет воспроизводить файл без сети. В вебе с DRM работают через стандарт Encrypted Media Extensions (EME), а распространённые DRM-системы – Widevine и FairPlay; если ваша DRM-система не поддерживает постоянные лицензии, офлайн просто не заработает [13]. То же касается российских видеоплатформ: Kinescope, например, заявляет DRM на ClearKey и FairPlay и защиту от скачивания [21]. До выбора платформы уточните, выдаёт ли она офлайн-лицензии для вашего приложения, иначе защита от скачивания заодно отключит и офлайн-просмотр. Офлайн-стратегия в целом разобрана в статье Офлайн и обучение при слабой связи.

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

Изменение 5. Трекинг учащегося, который был офлайн

Учебный продукт ценен тем, что фиксирует прогресс, а офлайн- и фоновое воспроизведение ломает наивное допущение, что во время занятий учащийся подключён к сети. Решение – стандарт учебных записей xAPI (Experience API). Он фиксирует каждое учебное событие как короткое утверждение, например «Мария завершила модуль 3». Утверждение – это небольшой фрагмент данных, поэтому приложение хранит утверждения на устройстве, пока телефон офлайн, и отправляет их пачкой в Learning Record Store (LRS) – хранилище учебных записей, – как только связь вернётся [14]. LRS хранит персональные данные учащихся, поэтому он должен работать на серверах в России: сбор и хранение ПДн граждан РФ в зарубежных базах запрещены (ч. 5 ст. 18 152-ФЗ) [22].

Если курс живёт внутри традиционной системы управления обучением (LMS – платформы, которая хранит курсы и фиксирует, кто что прошёл), подходящий вариант – cmi5. Это профиль xAPI (набор правил поверх xAPI), который добавляет похожую на SCORM логику запуска и завершения. Он специально рассчитан на то, чтобы учащийся мог начать на десктопе, продолжить на телефоне, закончить офлайн, а записи корректно объединились при синхронизации [15]. Дашборд в итоге обновляется так, будто учащийся всё время был онлайн. Точная фиксация событий просмотра (воспроизведение, пауза, перемотка, завершение) – задача профиля xAPI Video Profile, он разобран в статье Трекинг видео через xAPI.

Мобильная доступность по стандарту

Требования мобильной доступности с точными числами задаёт Руководство по доступности веб-контента (WCAG) – международный стандарт W3C. В России на WCAG 2.1 построен национальный ГОСТ Р 52872-2019 [23]; критерии ниже следуют той же логике, а самый новый из них (2.5.8) появился в WCAG 2.2 и задаёт планку выше ГОСТа. На телефоне важнее всего три критерия, и каждый проверяется однозначно: выполнен или нет.

Размер цели (минимальный), WCAG 2.2, критерий 2.5.8 (уровень AA): каждая тач-цель должна быть не меньше 24×24 CSS-пикселя или иметь такой отступ, чтобы круг диаметром 24 px с центром на ней не задевал соседние цели [16]. Более строгий критерий 2.5.5 (уровень AAA) требует 44×44 пикселя – размер, близкий к рекомендациям платформенных гайдлайнов [16]. Пример: панель из кнопок воспроизведения, перемотки и субтитров по 20×20 px без зазоров не проходит, потому что 24-пиксельные круги пересекаются. Увеличьте каждую кнопку до 24 px или оставьте 20 px, но добавьте хотя бы 4 px отступа, и панель проходит. Когда телефон в руке трясётся, от этого зависит, управляет ли учащийся уроком или воюет с плеером.

Ориентация, WCAG 2.1, критерий 1.3.4 (уровень AA): не фиксируйте контент в портретной или альбомной ориентации, если одна из них не обязательна для самой задачи [17]. Учащийся, у которого телефон закреплён в одном положении (частый случай у людей, передвигающихся на инвалидной коляске), всё равно должен иметь возможность пройти курс.

Перекомпоновка (Reflow), WCAG 2.1, критерий 1.4.10 (уровень AA): контент должен перестраиваться под окно шириной 320 px без прокрутки в двух направлениях [17]. Проще говоря, страница должна подстроиться под узкий экран, а не заставлять учащегося прокручивать вбок, чтобы читать. И субтитры остаются обязательными на любом устройстве: эта лёгкая текстовая дорожка почти ничего не стоит и помогает каждому мобильному учащемуся в шумном или, наоборот, тихом месте. Подробнее – в статьях Субтитры, транскрипты и аудиоописание и WCAG 2.1 AA и ГОСТ Р 52872-2019 для учебного видео.

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

Первое решение: PWA, натив или адаптивный сайт

Ещё до любого из пяти изменений вы принимаете решение в духе «разрабатывать или брать готовое», которое задаёт потолок для всех них: как собран мобильный клиент. Распространённых путей три, и у каждого свой баланс стоимости, охвата и доступа к возможностям устройства.

Адаптивный сайт – одна веб-страница, которая перестраивается под любой экран. Это самый дешёвый вариант, он не требует установки из магазина, но офлайн- и фоновые возможности ограничены тем, что разрешает браузер. PWA (прогрессивное веб-приложение) – устанавливаемый сайт, который умеет кешировать контент и работать офлайн через фоновый скрипт (service worker). Он добавляет иконку на главном экране, офлайн-кеш и аудио на экране блокировки через Media Session за долю стоимости нативной разработки: по отраслевым оценкам 2026 года, PWA обходится примерно в 40–60% стоимости двух отдельных нативных приложений [18]. Ещё один плюс для российского продукта: PWA устанавливается прямо из браузера и не зависит от правил и доступности магазинов приложений. Нативное приложение (Swift для iOS, Kotlin для Android) даёт самое ёмкое офлайн-хранилище, самую надёжную фоновую загрузку и самую гладкую интеграцию с платформенным DRM, но и обходится дороже всего в разработке и поддержке, потому что кодовых баз две [18].

Итог: большинству мобильных учебных продуктов в 2026 году стоит начинать с PWA и переходить на натив, только когда конкретная потребность оправдывает вторую и третью кодовые базы: строгий офлайн-DRM для платного контента, максимально надёжная загрузка больших библиотек или глубокая интеграция с устройством [18]. Решите это первым делом, потому что от этого зависит, что смогут плеер, офлайн-режим и фоновое аудио. Более общий выбор разобран в статье Построить, купить или расширить LMS, а бюджет – в Модели стоимости платформы обучения.

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

Частые ошибки

Эти сбои всплывают, как только курс попадает на реальный телефон.

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

Нет контроля трафика. Автоматический стриминг в максимальном качестве по сотовой сети незаметно расходует пакет учащегося. Дайте переключатель «только Wi-Fi», режим экономии и оценку объёма до скачивания [7][8].

Слишком маленькие или слишком тесные тач-цели. Контролы меньше 24×24 px без отступа не проходят WCAG 2.2 (2.5.8) и раздражают любого пользователя [16].

Офлайн без трекинга. Если видео скачивается, а xAPI-утверждения не копятся, офлайн-прогресс учащегося теряется. Копите записи локально и синхронизируйте их при появлении связи с LRS на российских серверах [14][15][22].

Блокировка ориентации. Принудительный портрет или альбомная ориентация не проходят WCAG 2.1 (1.3.4) и мешают учащимся, у которых телефон закреплён в одном положении [17].

Защищённый контент без постоянной DRM-лицензии. Если DRM не выдаёт офлайн-лицензию, скачанное воспроизводится только онлайн, и весь смысл скачивания пропадает [13][21].

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

Фора Софт с 2005 года разрабатывает видеостриминг, real-time-связь на WebRTC, OTT и мобильные медиаприложения. В mobile-first обучении сложность редко в одной функции: трудно свести плеер, контроль трафика, офлайн-скачивание, фоновое аудио и офлайн-трекинг в одно приложение, которое корректно работает на дешёвом телефоне с лимитным тарифом. Готовый мобильный плеер даёт базовое воспроизведение, но почти не позволяет управлять сценарием «скачать и синхронизировать», постоянной DRM-лицензией, аудио на экране блокировки и размерами тач-целей по WCAG. Заказная разработка позволяет настроить всё это под телефоны и тарифы ваших учащихся, но и ответственность за правильную инженерию офлайна и трекинга ложится на вас. Мы помогаем командам выбрать между PWA и нативом, а затем строим мобильный слой так, чтобы учащийся в электричке всё равно прошёл курс до конца. Тот же опыт стриминга, real-time и офлайн-медиа мы применяем в продуктах для видеоконференций, OTT, телемедицины и видеонаблюдения.

Главное

• Большинство учащихся учится с телефона: проектируйте сначала под телефон, затем под десктоп. Для школ мобильная точка входа – MAX.
• Мобильный плеер работает в портрете, его контролы рассчитаны на палец, доставка – на HLS/DASH.
• Вертикальные микроуроки по 3–7 минут – там, где тема укладывается в такой формат.
• Берегите трафик: «только Wi-Fi», режим экономии, оценка объёма до скачивания.
• Офлайн-скачивание и фоновое аудио, а xAPI/cmi5-записи копятся в очереди и затем синхронизируются с LRS в России.
• WCAG 2.2 (и ГОСТ Р 52872-2019 на базе WCAG 2.1): тач-цели от 24 px, свободный поворот, перекомпоновка, субтитры.

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

• Учебное видео на слабых сетях
• Офлайн и обучение при слабой связи
• Трекинг видео через xAPI