如何在移动设备上隐藏背景视频并显示图像？

【问题标题】：How can I hide background video on mobile and display an image?如何在移动设备上隐藏背景视频并显示图像？
【发布时间】：2019-08-01 09:55:28
【问题描述】：

在我的页面上我有一个背景视频

<video poster="video/p01-v01.jpg" autoplay="autoplay" loop="loop" muted="muted">
    <source src="video/p01-v01.mp4" type="video/mp4">
    <source src="video/p01-v01.webm" type="video/webm">
    <img src="video/p01-v01.jpg">
</video>

我想隐藏它们，因为在某些 iOs 设备上会显示带有播放按钮的视频第一帧

我想显示图片占位符

如果可能的话，我更愿意通过 CSS 和媒体查询来实现我确实尝试过这种方法，但它似乎不起作用？

video > source {
    display: none;
}

唯一的方法是隐藏图像并在小屏幕上显示它吗？

【问题讨论】：

标签： html css video

【解决方案1】：

<source> 标签的可见性对视频本身的可见性没有影响。它只是一个标签来声明<video>标签的可能来源。

如果您想坚持使用 CSS，我最好的建议是使用包装器，否则可以使用 javascript 完成其他解决方案。

注意：您必须在媒体查询/标签样式之外将图像的默认显示设置为none，否则它会在视频之外显示！

.videoWrapper > video {
    display: none;
}
.videoWrapper > img {
    display: block !important;
}

<div class="videoWrapper">
    <video poster="https://placeimg.com/640/480/any">
        <source src="video/p01-v01.mp4" type="video/mp4">
        <source src="video/p01-v01.webm" type="video/webm">
    </video>
    <img src="https://placeimg.com/640/480/any" style="display: none;">
</div>

【讨论】：