用于触摸屏的带有图像回退的背景视频

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>

我添加了备用图像以防 browser/device 无法识别该视频。但我认为触摸屏并非如此。我猜他们确实认出了视频，只是没有自动播放而已。

如何在不播放背景视频的设备上显示背景图片？

感谢任何帮助。

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;
    }
}

用于触摸屏的带有图像回退的背景视频

Background video with image fallback for touchscreens

html

css

video

fallback

tablet