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

Question

This is the website.

背景视频适用于桌面。对于小屏幕，显示的是图像(为此我使用了 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) { ... }
如果 (!Modernizr.touch) { ... }

如果您愿意，还有一些很好的库可以帮助管理背景视频 - 查看 Unheap 上的媒体部分有很多选择。

此外，我对使用自动播放的背景视频持谨慎态度。它们看起来很酷，当然，但它们会在性能、可访问性、加载时间等方面造成一些问题。