时间戳

首页 > 解决方案 > 如何在移动设备上隐藏背景视频并显示图像？

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

问题描述

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

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

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

标签： htmlcssvideo

解决方案

标签的可见<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>

推荐阅读