Обойти нативный плеер на Android и iOS: HTML5 и JS

Быстрый ответ

<!-- Отключаем автоматический переход в полноэкранный режим на iPhone с помощью атрибута 'playsinline' -->
<video playsinline class="my-full-window-video">
  <source src="cool-video.mp4" type="video/mp4">
</video>

/* Расширяем видео на полный экран устройства */
video.my-full-window-video {
  position: fixed; /* Фиксируем на позиции */
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9999; /* Устанавливаем высокий приоритет отображения */
}

Для начала воспроизведения необходимо активировать пользовательское взаимодействие, чтобы обойти ограничения на автовоспроизведение.

Поэтапная инструкция для плавного воспроизведения видео

Атрибуты playsinline и webkit-playsinline

Атрибут playsinline используйте для iOS 10 и более новых версий, а webkit-playsinline – для более старых, чтобы предотвратить автоматический переход в полноэкранный режим.

Подробнее об этом расскажет наш спикер на видео

Библиотека для устаревших версий iOS

Для iOS 8 и 9 рекомендуем воспользоваться библиотекой iphone-inline-video для обеспечения встроенного воспроизведения видео.

Настройки для UIWebView

Установите в UIWebView параметр allowsInlineMediaPlayback в значение true для возможности воспроизведения видео без автоматического перехода в полноэкранный режим.

Для веб-приложений, размещенных на домашнем экране

Добавьте webkit-playsinline в мета-теги веб-приложения, чтобы избежать автоматического перехода в полноэкранный режим.

Синхронизация аудио

С помощью JavaScript обеспечьте синхронность звука и видео, чтобы избежать диссонанса.

Создание собственного видеоплеера

Разработайте уникальные пользовательские элементы управления и обеспечьте динамическую синхронизацию воспроизведения с помощью HTML5 и JavaScript.

Гибридные и нативные приложения

Если все другие варианты не подходят, рассмотрите возможность создания нативного или гибридного приложения.

Рекомендации разработчикам

Ресурсы WebKit и документация Apple предоставляют подробные сведения о политике воспроизведения видео на iOS: Блог WebKit, Библиотека для разработчиков Apple.

Советы для плавного воспроизведения на мобильных устройствах

Помните, что в Mobile Safari параметр allowsInlineMediaPlayback по умолчанию выключен на iPhone и включен на iPad.

Особенности Android

Android более гибок и не потребует от вас дополнительных манипуляций для воспроизведения видео.

Визуализация

Представьте на экране мобильного устройства (📱) ваш любимый фильм с кучей попкорна.🍿

Мы переходим от 📱 к кинотеатральному изображению 🎬 в приложении,
Избегая превращения вашего 📱 в огромный экран 🎦 (полноэкранный режим).

Цель – предоставление удобного и понятного пользовательского опыта внутри приложения.🌱

Улучшение пользовательского опыта

Интерфейс, удобный для взаимодействия с помощью жестов

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

Адаптивность ориентации

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

Доступность

Используйте скрытые субтитры и субтитры, а также элементы управления, доступные для экранных читалок. Доступность – это не просто параметр, а обязательное условие.

Проверка производительности

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

Полезные материалы

1. Fullscreen API – Веб-API | MDN
2. Новые политики воспроизведения <video> на iOS | WebKit
3. Can I use... Поддержка HTML5, CSS3 и других технологий
4. Поддерживаемые мета-теги
5. VideoView | Android Developers
6. Стилизация модальных окон | CSS-Tricks
7. GitHub – react-native-video/react-native-video: Компонент <Video /> для react-native