Question

背景视频适用于桌面。对于小屏幕，显示图像（我使用CSS显示属性）。但是像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 queries轻松定位小屏幕，无论是否触摸。

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

与图象后退的背景录影触摸屏的

2 个答案: