Более 79% онлайн-покупателей предпочитают совершать покупки со своих смартфонов. Если видео о ваших товарах буферизируется, медленно загружается или потребляет много трафика на мобильных устройствах, клиенты уходят, не успев увидеть продукт. В сфере розничной торговли это напрямую влияет на конверсию.
SDK видеоплеера Cloudinary решает эту проблему с помощью легкого HTML5-плеера, который автоматически поддерживает адаптивную потоковую передачу, адаптивное изменение размера и оптимизацию форматов. В этом руководстве вы настроите оптимизированный для мобильных устройств видеоплеер в приложении React, который быстро загружается, масштабируется под разные размеры экранов и адаптируется к условиям сети.
- Исходный код: https://github.com/ugwutotheeshoes/cloudinary-video-player-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 Video Player:
Это даст вам рабочее приложение React с готовым к использованию SDK видеоплеера.
Создайте новый файл по адресу src/components/VideoPlayer.js. Этот компонент инициализирует видеоплеер Cloudinary и отображает адаптивный видеоэлемент:
Вот за что отвечает каждая часть:
- useRef() хранит ссылки как на экземпляр Cloudinary, так и на DOM-элемент <video>. Это предотвращает повторную инициализацию при повторном рендеринге.
- videoPlayer() инициализирует плеер Cloudinary с именем вашего облака и включает элементы управления воспроизведением.
- player.source() загружает видео по его публичному идентификатору Cloudinary.
- cld-fluid делает плеер адаптивным. Он масштабируется, чтобы соответствовать своему контейнеру, сохраняя при этом соотношение сторон видео.
Замените your-cloud-name на имя облака, которое вы скопировали на шаге 2.
Импортируйте компонент в файл App.js и передайте публичный идентификатор загруженного видео в качестве пропса:
Замените Sport_Training и demo-video на публичные идентификаторы видео из вашей учетной записи Cloudinary.
Класс cld-fluid обеспечивает базовое адаптивное масштабирование, но вы можете добавить CSS для более точного контроля внешнего вида плеера:
Правила max-width: 100% и height: auto гарантируют, что плеер никогда не выйдет за пределы своего контейнера, а скругление углов и тень придают ему отполированный вид, подходящий для страницы товара.
Запустите приложение, чтобы увидеть плеер в действии:
Откройте приложение в браузере и измените размер окна, чтобы убедиться, что плеер масштабируется правильно. Затем откройте панель инструментов разработчика (или протестируйте на реальном телефоне), чтобы проверить мобильную верстку.
Проверьте следующее во время тестирования:
- Видео начинает воспроизводиться без длительных задержек буферизации.
- Плеер заполняет ширину контейнера как на компьютере, так и на мобильном устройстве.
- Элементы управления воспроизведением видны и доступны для нажатия на мобильных экранах.
- Видео сохраняет соотношение сторон при любой ширине экрана.
Теперь, когда плеер работает, вот семь практических советов, как сделать доставку мобильного видео быстрой и надежной.
- Используйте отложенную загрузку (lazy loading). Загружайте видео только тогда, когда они попадают в область просмотра. Это значительно сокращает время начальной загрузки страницы, особенно на страницах с несколькими видео о товарах.
- Включите адаптивную потоковую передачу. Адаптивная потоковая передача с переменным битрейтом (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, чтобы добавить кликабельные ссылки на товары прямо внутри видеоплеера.
Зарегистрируйте бесплатную учетную запись Cloudinary и попробуйте ее со своими видео о товарах.
Ресурсы:
- Полный исходный код на GitHub
- Документация SDK видеоплеера Cloudinary
- Трансформации видео в Cloudinary
- Google PageSpeed Insights
- Рекомендации по доступности WCAG 2.1
Да. SDK видеоплеера Cloudinary не зависит от фреймворков — он работает с Vue, Angular, Svelte или обычным HTML в дополнение к React. Основная настройка одинакова для всех фреймворков: инициализируйте плеер для элемента video и передайте публичный ID Cloudinary в качестве источника. Инструкции для конкретных фреймворков см. в документации по видеоплееру Cloudinary.
Класс cld-fluid указывает видеоплееру Cloudinary масштабироваться по размеру контейнера с сохранением исходного соотношения сторон видео, поэтому он автоматически адаптируется для телефонов, планшетов и ПК без дополнительных медиа-запросов. Вы можете комбинировать его с собственным CSS (например, max-width: 100%) для более точного контроля и добавлять другие настройки с помощью параметров настройки видеоплеера.
Да. Видеоплеер Cloudinary создан в соответствии со стандартами WCAG 2.1 AA, включая навигацию с клавиатуры, поддержку чтения с экрана и работу с титрами/субтитрами, чтобы пользователи с нарушениями зрения, слуха, моторики или восприятия могли взаимодействовать с вашими видео с помощью вспомогательных технологий. Полный набор функций см. в документации по доступности видеоплеера.
Нет. Cloudinary применяет оптимизацию форматов и сжатия автоматически с помощью своей системы трансформаций, доставляя каждому посетителю наименьший файл, который при этом выглядит четко на его устройстве и в браузере — вам не нужно самостоятельно хранить или управлять несколькими вариантами форматов. Это описано в документации по оптимизации видео.
Да. Функция Shoppable Video от Cloudinary, входящая в стандартный пакет видеоплеера, позволяет добавлять кликабельную панель товаров и интерактивные точки на видео, которые ведут зрителей прямо на страницу товара во время просмотра. Параметры установки и настройки описаны в документации по Shoppable Video.
