🎥 Тест ориентации видео

Демонстрация улучшенного VideoFeedPlayer с квадратным контейнером (1:1) и адаптивным отображением для горизонтальных и вертикальных видео

Горизонтальное видео (16:9)

Классическое горизонтальное видео с соотношением сторон 16:9. Отображается в квадратном контейнере с черными полосами сверху и снизу.

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

• Контейнер всегда квадратный (1:1)
• Автоматическое определение ориентации видео
• Переключение между режимами "cover" и "fit" для горизонтальных видео
• Полноэкранный режим
• Социальные кнопки (лайк, комментарий, поделиться)
• Автовоспроизведение при появлении в viewport
• Адаптивные контролы

Вертикальное видео (9:16)

Вертикальное видео, оптимизированное для мобильных устройств. Заполняет весь квадратный контейнер.

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

• Контейнер всегда квадратный (1:1)
• Автоматическое определение ориентации видео
• Переключение между режимами "cover" и "fit" для горизонтальных видео
• Полноэкранный режим
• Социальные кнопки (лайк, комментарий, поделиться)
• Автовоспроизведение при появлении в viewport
• Адаптивные контролы

Квадратное видео (1:1)

Квадратное видео, популярное в социальных сетях. Идеально подходит для квадратного контейнера.

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

• Контейнер всегда квадратный (1:1)
• Автоматическое определение ориентации видео
• Переключение между режимами "cover" и "fit" для горизонтальных видео
• Полноэкранный режим
• Социальные кнопки (лайк, комментарий, поделиться)
• Автовоспроизведение при появлении в viewport
• Адаптивные контролы

Ультраширокое видео (21:9)

Ультраширокое видео для кинематографического эффекта. Отображается с большими черными полосами.

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

• Контейнер всегда квадратный (1:1)
• Автоматическое определение ориентации видео
• Переключение между режимами "cover" и "fit" для горизонтальных видео
• Полноэкранный режим
• Социальные кнопки (лайк, комментарий, поделиться)
• Автовоспроизведение при появлении в viewport
• Адаптивные контролы

📋 Инструкции по использованию

Для горизонтальных видео:

• Контейнер остается квадратным (1:1)
• По умолчанию используется режим "fit" (показать полностью)
• Появляются черные полосы сверху и снизу
• Нажмите кнопку с иконкой стрелок для переключения в режим "cover"
• В режиме "cover" видео обрезается для заполнения квадрата
• Используйте полноэкранный режим для лучшего просмотра

Для вертикальных видео:

• Контейнер остается квадратным (1:1)
• Всегда используется режим "cover" для оптимального отображения
• Видео масштабируется для заполнения квадрата
• Может обрезаться по бокам для сохранения пропорций
• Идеально подходит для мобильных устройств
• Социальные кнопки расположены справа

← Вернуться к ленте новостей