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

Question

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

<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设备上显示了带有play按钮的视频第一帧

我想显示图像占位符

如果可能的话，我希望通过CSS和媒体查询进行此操作我确实尝试过，但似乎不起作用？

video > source {
    display: none;
}

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

Answer 1

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

我最好的建议是如果您想坚持使用包装器，否则可以使用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>