Нативное полноэкранное видео

1Встроенное полноэкранное видео#

Ваше созданное приложение уже поддерживает нативное полноэкранное воспроизведение видео. Когда пользователь нажимает кнопку полноэкранного режима на элементе HTML5 <video>, приложение:

• Включается настоящий иммерсивный полноэкранный режим
• Автоматически поворачивается в альбомную ориентацию
• Скрывает все панели навигации
• Возвращает портретную ориентацию, когда пользователь выходит из полноэкранного режима

Настройка не нужна — всё работает автоматически! Блокировкой ориентации управляет приложение, поэтому даже приложения, настроенные только на портретную ориентацию, корректно переходят в альбомную при воспроизведении видео.

2Поддерживаемые источники видео#

Следующие типы видео работают в полноэкранном режиме:

✅ Элементы HTML5 <video>
✅ Встроенные ролики YouTube (iframe)
✅ Встроенные ролики Vimeo
✅ Собственные видео MP4/WebM
✅ Потоки HLS (.m3u8)

⚠️ Некоторый контент с защитой DRM может не переходить в нативный полноэкранный режим

3Рекомендации по видео на сайте#

Для лучшего видеоопыта в созданном приложении:

<!-- Good: Standard HTML5 video -->
<video controls playsinline>
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Good: YouTube embed -->
<iframe
  src="https://youtube.com/embed/VIDEO_ID"
  allowfullscreen>
</iframe>

<!-- Tip: Add 'playsinline' attribute
     for inline playback on iOS too -->

4Совмещение с PiP#

Для лучшего видео включите и встроенный полноэкранный режим, и режим PiP:

1. Пользователь смотрит видео прямо на странице
2. Нажимает полноэкранный режим → включается иммерсивная альбомная ориентация
3. Нажимает «назад» → возвращается к обычному виду
4. Нажимает «домой» → включается плавающее окно PiP

Это даёт пользователям вашего веб-приложения такой же удобный просмотр, как в YouTube!