Более 79% онлайн-покупателей предпочитают совершать покупки со смартфонов. Если видео о ваших товарах зависают, загружаются медленно или расходуют много мобильного трафика, клиенты уходят, так и не увидев товар. В розничной торговле это напрямую влияет на показатели конверсии.
SDK видеоплеера Cloudinary решает эту проблему с помощью легковесного HTML5-плеера, который автоматически управляет адаптивным стримингом, адаптивным изменением размера и оптимизацией форматов. В этом туториале вы настроите оптимизированный для мобильных устройств видеоплеер в приложении React, который быстро загружается, масштабируется под разные размеры экранов и подстраивается под условия сети.
К концу этого туториала у вас будет компонент видеоплеера, который:
- Воспроизводит видео из вашей медиабиблиотеки Cloudinary.
- Адаптивно масштабируется на телефонах, планшетах и настольных компьютерах.
- Осуществляет адаптивный стриминг в зависимости от скорости сети клиента.
- Автоматически доставляет видео в оптимальном формате (MP4, WebM) и с нужным уровнем сжатия.
- Соответствует стандартам доступности WCAG 2.1 AA из коробки.
Вот готовый плеер, работающий как на ПК, так и на мобильных устройствах:
Покупатели полагаются на видео при принятии быстрых решений о покупке. Демонстрации, обучающие материалы и отзывы клиентов формируют доверие, стимулирующее продажи. На мобильных устройствах клиенты ожидают, что такие видео начнут воспроизводиться за считанные секунды на экранах меньшего размера, при более низкой пропускной способности и на менее мощном железе.
Видеоплеер с приоритетом мобильных устройств разработан для того, чтобы:
- Воспроизводить видео в медленных сетях без буферизации.
- Автоматически адаптироваться к различным размерам и ориентациям экранов.
- Улучшать показатели SEO, особенно для индексации с приоритетом мобильного контента.
- Предоставлять метрики вовлеченности, такие как время просмотра и точки выхода.
Имея этот контекст, вы можете приступать к созданию плеера.
Прежде чем начать, убедитесь, что у вас есть:
- Бесплатная учетная запись Cloudinary. Запишите имя вашего облака (cloud name) из панели управления.
- Установленный на компьютере Node.js.
- Базовые знания React.
Примечание:
В этом туториале используется React, но SDK видеоплеера Cloudinary работает с любым JavaScript-фреймворком (Vue, Angular, Svelte) или чистым HTML.
Начните с загрузки видео в медиабиблиотеку Cloudinary:
- Войдите в консоль Cloudinary.
- Перейдите на вкладку Media Library.
- Нажмите Upload, выберите файл видео и дождитесь завершения загрузки.
Запишите открытый идентификатор (public ID) видео. Вы будете использовать его на шаге 4 для загрузки видео в компоненте плеера.
Перейдите в панель управления Cloudinary и скопируйте имя своего облака. Оно понадобится вам для подключения видеоплеера к вашей учетной записи.
Создайте новое приложение React с помощью Vite и установите пакет видеоплеера Cloudinary:
Это даст вам работающее приложение React с готовым к использованию SDK видеоплеера.
Создайте новый файл src/components/VideoPlayer.js. Этот компонент инициализирует видеоплеер Cloudinary и отрисовывает адаптивный видеоэлемент:
Вот что делает каждая часть:
- useRef() сохраняет ссылки как на экземпляр Cloudinary, так и на DOM-элемент <video>. Это предотвращает повторную инициализацию при ререндеринге.
- videoPlayer() инициализирует плеер Cloudinary с именем вашего облака и включает элементы управления воспроизведением.
- player.source() загружает видео по его открытому идентификатору (public ID) в Cloudinary.
- cld-fluid делает плеер адаптивным. Он масштабируется под размер своего контейнера, сохраняя при этом соотношение сторон видео.
Замените your-cloud-name на имя облака, которое вы скопировали на шаге 2.
Импортируйте компонент в файл App.js и передайте открытый идентификатор загруженного видео в качестве пропса:
Замените Sport_Training и demo-video на открытые идентификаторы видео из вашего аккаунта Cloudinary.
Класс cld-fluid управляет базовым адаптивным масштабированием, но вы можете добавить CSS для более точного контроля внешнего вида плеера:
Правила max-width: 100% и height: auto гарантируют, что плеер никогда не выйдет за пределы своего контейнера, а скругление углов и тень придают ему аккуратный вид, подходящий для страницы товара интернет-магазина.
Запустите приложение, чтобы увидеть плеер в действии:
Откройте приложение в браузере и измените размер окна, чтобы убедиться, что плеер масштабируется правильно. Затем откройте панель инструментов разработчика в браузере (или протестируйте на реальном телефоне), чтобы проверить мобильную верстку.
Проверьте следующее во время тестирования:
- Видео начинает воспроизводиться без долгих задержек на буферизацию.
- Плеер заполняет ширину контейнера как на ПК, так и на мобильных устройствах.
- Элементы управления воспроизведением видны и по ним удобно нажимать на мобильных экранах.
- Видео сохраняет соотношение сторон при любой ширине экрана.
Когда плеер запущен, вот семь практик, которые помогут сохранить доставку мобильного видео быстрой и надежной.
- Используйте ленивую загрузку (lazy loading). Загружайте видео только тогда, когда они попадают в область видимости (viewport). Это значительно улучшает время первоначальной загрузки страницы, особенно на страницах с несколькими видео о товарах.
- Включите адаптивный стриминг. Адаптивный битрейт (ABR) настраивает качество видео в зависимости от скорости сети клиента. Видеоплеер Cloudinary поддерживает это автоматически. Клиенты с быстрым соединением получают высокое качество. Клиенты в более медленных сетях получают более низкое разрешение, которое все равно воспроизводится без буферизации.
- Сжимайте и оптимизируйте видеофайлы. Доставляйте видео в таких форматах, как MP4 или WebM. Cloudinary применяет сжатие и оптимизацию формата автоматически через свою систему трансформаций, уменьшая размер файла без видимой потери качества.
- Проектируйте с учетом адаптивных макетов. Убедитесь, что плеер масштабируется под разные размеры экранов. Класс cld-fluid справляется с этим, но всегда тестируйте на реальных устройствах. Эмуляторы не могут воспроизвести реальные сетевые условия и взаимодействие с сенсорным экраном.
- Мониторьте основные веб-показатели (Core Web Vitals). Отслеживайте Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) и First Input Delay (FID) с помощью Google PageSpeed Insights. Неоптимизированные видеоплееры являются частой причиной низких оценок LCP на страницах товаров.
- Добавьте структурированные метаданные. Реализуйте разметку схемы VideoObject на страницах с видео. Это поможет поисковым системам понять ваш видеоконтент и может повысить видимость в результатах поиска.
- Тестируйте на реальных устройствах. Запускайте ваш плеер на реальных телефонах и планшетах в различных сетевых условиях (WiFi, 4G, 3G). Тестирование на реальных устройствах выявляет проблемы с производительностью, которые пропускают эмуляторы браузера.
Вы создали легковесный видеоплеер с приоритетом мобильных устройств, используя SDK видеоплеера Cloudinary в приложении React. Плеер адаптивно масштабируется, осуществляет адаптивный стриминг и доставляет видео в оптимальном формате и качестве для каждого устройства. Вся оптимизация происходит на серверах и CDN Cloudinary. Никакой обработки видео на стороне клиента не требуется.
Вот несколько способов пойти дальше:
- Добавьте аналитику видео. Используйте аналитические события видеоплеера Cloudinary для отслеживания времени просмотра, показателей вовлеченности и точек выхода для видео о ваших товарах.
- Внедрите плейлисты. Создавайте плейлисты с видео о товарах, которые автоматически воспроизводят демонстрации, отзывы и обучающие материалы по порядку на одной странице товара.
- Добавьте фирменный стиль. Настройте внешний вид, цвета и наложение логотипа плеера в соответствии с брендом вашего магазина.
- Попробуйте интерактивное видео (shoppable video). Используйте функции интерактивного видео Cloudinary, чтобы добавлять кликабельные ссылки на товары прямо внутрь видеоплеера.
Ресурсы:
- Полный исходный код на GitHub
- Документация по SDK видеоплеера Cloudinary
- Трансформации видео в Cloudinary
- Google PageSpeed Insights
Да. SDK видеоплеера Cloudinary не зависит от фреймворка — помимо React, он работает с Vue, Angular, Svelte или обычным HTML. Основная настройка одинакова для всех фреймворков: инициализируйте плеер для элемента video и передайте общедоступный идентификатор (public ID) Cloudinary в качестве источника. Дополнительные инструкции для конкретных фреймворков см. в документации по видеоплееру Cloudinary.
Класс cld-fluid указывает видеоплееру Cloudinary масштабироваться по размеру контейнера с сохранением исходного соотношения сторон видео, поэтому плеер автоматически адаптируется под телефоны, планшеты и настольные ПК без использования дополнительных медиазапросов. Вы можете комбинировать его с собственным CSS (например, max-width: 100%) для более точного контроля, а также добавлять другие настройки с помощью параметров кастомизации видеоплеера.
Да. Видеоплеер Cloudinary создан в соответствии со стандартами WCAG 2.1 AA, включая навигацию с клавиатуры, поддержку средств чтения с экрана и работу с субтитрами. Благодаря этому пользователи с нарушениями зрения, слуха, моторики или когнитивных функций могут взаимодействовать с вашими видео с помощью вспомогательных технологий. Полный набор функций описан в документации по доступности видеоплеера.
Нет. Cloudinary автоматически применяет оптимизацию форматов и сжатия с помощью своей системы трансформаций, доставляя каждому посетителю наименьший файл, который при этом выглядит четко на его устройстве и в браузере. Вам не нужно самостоятельно хранить или управлять вариантами файлов в разных форматах. Подробнее об этом рассказано в документации по оптимизации видео.
Да. Функция Shoppable Video от Cloudinary, входящая в стандартный пакет видеоплеера, позволяет добавлять кликабельную панель товаров и интерактивные точки на видео, которые во время просмотра перенаправляют зрителей прямо на страницу товара. Параметры настройки и конфигурации описаны в документации по Shoppable Video.
