Question

由于this answer，我在CSS中使用了video[poster]{object-fit:fill}，以避免html5视频中的海报图像失真。由于poster似乎是可样式的，因此我也想使用CSS来显示视频的不同海报，具体取决于屏幕大小（移动设备或台式机）。但是video[poster]{background-image:url(poster.jpg)不会产生任何结果，大概poster并不是背景。因此，我尝试如下修改some javascript found here：

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.getElementById("video").poster = "poster1.jpg";
  } else {
    document.getElementById("video").poster = "poster2.jpg";
  }
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction)

它也不起作用，但是也许只是缺少了一些小东西（甚至original都没有通过JavaScript验证）有人知道如何将媒体查询应用于发帖人属性吗？

Answer 1

删除x中的myFunction(x)。

API已更改，现在将是您将在此处收到的Event，而在以前的实现中，确实是MediaQueryList。

只需保持对MediaQueryList的引用，就可以了。

function myFunction(evt) {
  console.log(evt && evt.toString());
  if (x.matches) { // If media query matches
    document.getElementById("video").poster = "https://lorempixel.com/200/400";
  } else {
    document.getElementById("video").poster = "https://lorempixel.com/400/200";
  }
}
var x = window.matchMedia("(max-width: 500px)")
myFunction() // Call listener function at run time
x.addListener(myFunction)

.as-console-wrapper{max-height:20px!important}

<video id="video" controls></video>

如何将CSS媒体查询应用于视频海报？

1 个答案: