html - 如何在视频标签中正确设置图片海报

Question

我将视频设置为桌面页面版本。当页面宽度小于 480 像素（移动版）时，我想将该视频更改为图像。我已经为视频标签设置了海报，但不知道如何使图像在手机上正确显示（现在它是所有设备上唯一显示的视频）。请告诉我如何正确设置图像。谢谢

.video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

    <main class="main">
        <div class="main-background">
            <video preload="none" autoplay playsinline muted loop class="video"              
                poster="./images/beach.jpg" id="video">
                <source src="./video/Atropicallandscape.mp4" type="video/mp4">
            </video>
        </div>
    </main>

标签： htmlcss

Answer 1

JavaScript 解决方案

您可以使用 JavaScript 来确定媒体大小，使用matchMedia()=> MDN:方法返回一个新的MediaQueryList对象，然后可以使用该对象来确定文档是否与媒体查询字符串匹配，以及监视文档以检测何时匹配（或停止匹配）该媒体查询。

在您的 HTML 中，在您的视频元素父元素中添加图像元素，并添加一个辅助类来切换display: none;CSS 中的元素样式，以便在您的媒体查询与您想要的大小匹配时使用。

然后创建一个函数并将事件传递给使用event.matches =>检查浏览器大小的函数e.matches。条件可用于处理元素的显示切换。el.classList.add您可以使用一个助手类，它简单地将 display 属性定义为 none ，如果使用/可以来回切换el.classList.remove。

然后添加一个 eventListener 来使用你的函数来检查你的设备屏幕大小。

const main = document.querySelector('.main-background')
const video = main.querySelector('.video')
const image = main.querySelector('.image')

const mediaQuery = window.matchMedia('(max-width: 450px)')

function handleChange(e) {
  if (e.matches) {
    video.classList.add('hidden')
    image.classList.remove('hidden')
  }else{
    image.classList.add('hidden')
    video.classList.remove('hidden')
  }
}

mediaQuery.addListener(handleChange)

.video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.image {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  background: url('https://picsum.photos/450/450') no-repeat;
}

.hidden {
  display: none;
}

<main class="main">
  <div class="main-background">
    <video preload="none" autoplay playsinline muted loop class="video" poster="./images/beach.jpg" id="video">
      <source src="./video/Atropicallandscape.mp4" type="video/mp4">
    </video>
    <div class="image hidden">
    </div>
  </div>
</main>