Атрибут playsinline тега <video>

Описание

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

Пример использования:
<video playsinline autoplay muted loop src="video.mp4"></video>

Особенности работы:

  • Работает преимущественно на iOS (Safari)
  • Требуется для автовоспроизведения на мобильных устройствах
  • Часто используется вместе с autoplay и muted
  • Не влияет на поведение видео в десктопных браузерах

Рекомендуемые сценарии:

Применение Комбинация атрибутов
Фоновые видео playsinline + autoplay + muted + loop
Герой-секции playsinline + autoplay + muted
Анимационные баннеры playsinline + muted + controls

Пример для разных платформ:

<video playsinline autoplay muted loop poster="preview.jpg" src="hero-video.mp4"> </video>

Рекомендации:

  • Всегда добавляйте для видео в области просмотра
  • Используйте с muted для автовоспроизведения
  • Добавляйте poster для быстрого отображения
  • Тестируйте на реальных iOS-устройствах

Ограничения iOS:

  • Autoplay работает только с muted
  • Fullscreen по-прежнему включается при ручном воспроизведении
  • Некоторые версии iOS могут игнорировать атрибут

Политика iOS для видео:

<script> // Обход ограничений для iOS 10+ document.addEventListener('DOMContentLoaded', () => { const videos = document.getElementsByTagName('video'); for (let video of videos) { video.playsInline = true; video.setAttribute('playsinline', ''); video.setAttribute('webkit-playsinline', ''); } }); </script>
Важно: Для полной кросс-браузерной поддержки:
  • Добавляйте оба атрибута: playsinline и webkit-playsinline
  • Устанавливайте свойство playsInline через JavaScript
  • Всегда указывайте poster image

Полная реализация:

<video id="mobileVideo" playsinline webkit-playsinline autoplay muted loop poster="preview.jpg" src="animation.mp4"> </video> <script> document.getElementById('mobileVideo').playsInline = true; </script>