带有触摸屏图像回退的背景视频答案

【问题标题】：Background video with image fallback for touchscreens带有触摸屏图像回退的背景视频
【发布时间】：2015-01-23 17:19:10
【问题描述】：

This is the website.

背景视频可在桌面上运行。对于小屏幕，显示的是图像（我为此使用了 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>

我添加了备用图片，以防浏览器/设备无法识别视频。但我认为触摸屏并非如此。我猜他们确实认出了视频，只是不自动播放。

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

感谢任何帮助。

【问题讨论】：

可能重复：stackoverflow.com/questions/7120703/…

标签： html css video tablet fallback

【解决方案1】：

看起来您已经在使用 Modernizr.js - 您可以使用它来检测触摸事件支持，然后做出相应的响应。要通过 css 定位，请使用 Modernizr 选择性地应用于 html 元素的类。

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

通过js定位：

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

如果您愿意，也有一些很好的库可以帮助管理背景视频 - 请查看 Unheap 上的媒体部分以获取大量选项。

另外，在使用自动播放背景视频时，我会有点谨慎。它们看起来很酷，当然，但它们可能会在性能、可访问性、加载时间等方面产生一些问题。

【讨论】：

我不确定 Modernizr 是什么。我有它，因为我正在使用样板。谢谢你的帮助，今晚我会努力的。

【解决方案2】：

我在这里聚会有点晚了。

Modernizr 方法可能最适合检测触摸屏，但您似乎并不真正关心设备是否触摸。您希望针对具有小屏幕的设备，其中大部分恰好是触摸屏。但是，有桌面触摸屏，因此触摸检测对于小型设备来说不是很准确。

您可以使用media queries 轻松定位小屏幕，无论是否触摸。

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

【讨论】：