Фоновое видео с откатом изображения для сенсорных экранов

Question

Это сайт.

Фоновое видео работает на рабочем столе. Для небольших экранов вместо этого отображается изображение (для этого я использовал CSS-свойство display). Но как насчет сенсорных экранов, таких как iPad, которые не маленькие?

Я попробовал этот код:

<video id="background" width="100%" height="100%" muted autoplay loop>
    <source src="videos/video.mp4" type="video/mp4">
    <source src="videos/video.ogg" type="video/ogg">
    <img src="img/image.jpg">
    Your browser does not support the video tag.
</video>

Я добавил запасное изображение на случай, если браузер / устройство не распознает видео. Но я думаю, что это не относится к сенсорным экранам. Я предполагаю, что они действительно распознают видео, они просто не воспроизводят его автоматически.

Что можно сделать для отображения фонового изображения на устройствах, которые не воспроизводят фоновое видео?

Любая помощь приветствуется.

Answer 1

Похоже, вы уже используете Modernizr.js - вы можете использовать его для обнаружения поддержки сенсорных событий, а затем реагировать соответствующим образом. Чтобы выполнить таргетинг через css, используйте классы, которые Modernizr выборочно применяет к элементу html.

.touch video { ... } .no-touch video { ... }

Для таргетинга через js:

if (Modernizr.touch) { ... } if (!Modernizr.touch) { ... }

Если вам нравится, есть также несколько хороших библиотек, которые помогут управлять фоновым видео - проверьте раздел "Медиа" в Unheap, чтобы найти множество вариантов.

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

Answer 2

Я немного опоздал на вечеринку здесь.

Подход Modernizr, вероятно, лучше всего подходит для обнаружения сенсорных экранов, но, похоже, на самом деле вам все равно, сенсорное устройство или нет. Вы хотите настроить таргетинг на устройства с маленькими экранами, большинство из которых являются сенсорными. Тем не менее, существуют настольные сенсорные экраны, поэтому сенсорное обнаружение не очень точно для целевых небольших устройств.

Вы можете легко ориентироваться на маленькие экраны, касаться или нет, с помощью медиа-запросов.

@media (max-width: 600px) {
    #myvideo {
         display: none;
    }
}